Jquery перед отправкой формы - PullRequest
Новая
       4

Jquery перед отправкой формы

14 голосов
/ 02 мая 2011

У меня есть список (простой список), из которого я могу выбирать и устанавливать элементы (используя js), а затем форма, позволяющая мне выбирать, сколько элементов я хочу, и форма для отправки. не выбирает элемент, есть скрипт, который выдает исключение. Проблема в том, что я хочу, чтобы форма не отправлялась, если элемент не выбран, но не выдает исключение, а показывает мне сообщение с помощью кнопки отправки (используя jquery). мой скрипт ниже: 

<? foreach ($types as $type):?>
<ul class = "product_types">
    <? if ($type->stock_2 > 0):?>
    <li id = 'product_types'><a href="#" onclick='selecteazaElement(<?= $type->id; ?>,<?= $type->stock_2; ?>);'><?= $type->label; ?></a></li>
    <? else: ?>
    <li id = 'product_unavailable_types'><label><?= $type->label; ?></label></li>
    <? endif; ?>

</ul>
<? endforeach; ?>
<form  name="addtobasket" method="POST" action="<?= Route::url('Add to Basket', array('sale_id' => $sale->id)); ?>">
    <input type="hidden" name="idOfSelectedItem" id="idOfSelectedItem" value="-1">
    <select name="number" id="number">
        <option value=0>Alege numarul de produse</option>    </select>
    <button type="submit" name = "submit" onclick="addtobasket";>Adauga in cos</button><br />
</form>

и js, который устанавливает элементы списка: 

   <script type="text/javascript">
   function selecteazaElement(id,stock)
    {
   document.addtobasket.idOfSelectedItem.value=id;
   window["canSubmit"] = true;
   var number23=document.addtobasket.number;
   number23.options.length=0;
   if (stock>=6)
   stock=6;
   for (i=1;i<=stock;i++)
    {
//alert ('id: '+id+'; stock: '+stock);
   number23.options[number23.options.length]=new Option(i, i);
   }
//window.status="my status";
}

1 Ответ

29 голосов
/ 02 мая 2011

Добавьте submit слушателя к форме. Когда оно отправлено, проверьте, выбран ли элемент, и если нет, то вы можете предотвратить отправку, используя return false. Вот пример: 

$('#myForm').submit(function()
{
    if (/* test case not true */) { 
        $('#myError').show();
        return false; 
    }

    // ... continue work
});

А вот и HTML: 

<form id="myForm">
    <input type="text"/>
    <input type="submit"/>
</form>

Если вы не хотите использовать jQuery, вы также можете обработать событие submit с помощью простого JavaScript, например: 

var myform = document.getElementById('myForm');
myform.addEventListener('submit', function() { console.log('Submitted!'); return false; });
...