jQuery在提交表单前

Question

我有一个列表（一个简单的列表），我可以使用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>

并设置列表元素的JavaScript代码：

   <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";
}

- dana

---

JavaScript 在浏览器中处理并渲染 HTML。您能否发布该页面的相关 HTML 代码（查看源代码）？ - David Thomas

嗯...我的想法是：我只想在那个表单上添加一个jQuery事件监听器。这样，如果我尝试在没有从列表中选择事件的情况下提交它，就会出现一条消息并且不会提交表单...这可能吗？谢谢！ - dana

我想要看到一些渲染后的HTML输出。 - netbrain

Answer 1

给表单添加一个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，您也可以使用纯JavaScript来处理提交事件，如下所示：

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

- theabraham

---

如果我向表单添加最简单的事件监听器（只是为了检查它是否有效，但我无法让它工作...）代码：<script> $('#addtobasket').submit(function() { alert('Handler for .submit() called.'); return false; }); </script>并且我已经向表单添加了一个ID。 - dana

你有包含jQuery吗？这个答案使用了jQuery，而你在问题中没有使用。 - Bob Fincheimer

我在我提供的HTML上测试了我的代码，它运行良好。你使用了我展示给你的确切代码吗？另外，尝试运行这个命令来查看你是否选择了正确的表单：console.log($('#addtobasket'));。 - theabraham

@Bob，干得好。是的，这个问题使用了jQuery（我建议您在事件处理方面使用它，因为它可以在各种浏览器中保持一致性）——给我一点时间，我会尝试将其设置为主JavaScript。 - theabraham