jQuery提交函数没有';t发送输入提交


jQuery submit function doesn't send input submit

我一直在寻找问题的答案,但没有找到解决方案。这里有类似的主题链接,但我有不同的代码,我不知道如何将这个主题的答案与我的代码相匹配。

这是我的问题。我将id为order_form的表格发送给test.php。除了input submit之外,每个表单值都在正确发送。我的脚本是基于检查<input id="sendform" type="submit" value="ORDER PRODUCT" name="sendform"/>是否已发送。

下面是我用来发送表单的代码。

$("#order_form").submit(function() {
    $.ajax({
           type: "POST",
           url: "includes/test.php",
           data: $("#order_form").serialize(), // serializes the form's elements.
           success: function(data)
           {
                alert(data);
           }
    });
    return false; // avoid to execute the actual submit of the form.
});

以下是test.php 的内容

echo '<pre>';
print_r($_POST);
echo '</pre>';

这是我的表格,因为我的表格太大了。

  <form id="order_form">
      <input type="text" name="w2b" value="abc"/>
      <input id="sendform" type="submit" value="ZAMAWIAM" name="sendform"/>
  </form>

在HTML5表单中,当您将参数和变量传递给ajax函数时,不会传递"提交输入"中的值数据。因此,如果你有一个表格设置为:

<form>
<input type="text" name="foo" value="bar">
<input type="submit" name="submitTest" value="Hello World!">
</form>

未通过发送"submitTest"的值。唯一被发送的是值为"bar"的参数"foo"。在这种情况下,"submitTest"只提交表单并执行ajax调用。

要解决此问题,只需在表单中添加一个隐藏元素。现在看起来这个

<form>
<input type="text" name="foo" value="bar">
<input type="hidden" name="sendform" value="ZAMAWIAM">
<input type="submit" name="submitTest" value="Hello World!">
</form>

这将把值发送给您的ajax调用,您可以将其用于任何可能需要的用途。

确保将jquery代码包装在中

$(function(){
//code here 
});

再次不要忘记防止默认事件,下面是您的jquery代码的重写

$(function(){
$("#order_form").submit(function(event) {
event.preventDefault();
    $.ajax({
           type: "POST",
           url: "includes/test.php",
           data: $("#order_form").serialize(), // serializes the form's elements.
           success: function(data)
           {
                alert(data);
           }
    });//end ajax
});//end on submit
});//end jquery