Javascript 提交表单前的jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5851819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery before submitting the form
提问by dana
I have a list, (a simple list) from which i am able to select and set elements (using js), and then a form that allows me to choose how many elements i want, and a submit form.if one doesn't select an element, there is a script that throws an exception. The problem is that i want that the form doesn't submit, if an element is not selected, but not throw an exception, but to show me a message down the submit button (using jquery). my script below:
我有一个列表（一个简单的列表），我可以从中选择和设置元素（使用 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>
and the js that sets the list elements:
以及设置列表元素的 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";
}
回答by theabraham
Add a submitlistener to the form. When it's submitted, check to see if an element is selected, and if not you can prevent the submission by using return false. Here's an example:
submit向表单添加侦听器。提交时，检查是否选择了某个元素，如果没有，您可以使用return false. 下面是一个例子：
$('#myForm').submit(function()
{
if (/* test case not true */) {
$('#myError').show();
return false;
}
// ... continue work
});
And here's the HTML:
这是 HTML：
<form id="myForm">
<input type="text"/>
<input type="submit"/>
</form>
If you don't want to use jQuery, you can also handle the submit event with plain JavaScript like so:
如果您不想使用 jQuery，您也可以使用纯 JavaScript 处理提交事件，如下所示：
var myform = document.getElementById('myForm');
myform.addEventListener('submit', function() { console.log('Submitted!'); return false; });
