为啥使用jQuery提交功能时此表单不提交

Posted 2023-05-09

【中文标题】为啥使用jQuery提交功能时此表单不提交

【英文标题】：Why does this form not submit when using jQuery submit function为什么使用jQuery提交功能时此表单不提交

【发布时间】：2019-03-08 00:48:15

【问题描述】：

当我单击带有 jQ​​uery 提交功能的 html 按钮的点击事件时，我有以下表单未提交。

我的html如下：

<form data-role="tocart-form" name="dynamicForm" id="dynamForm" action="http://www.example.com/dynamicbuy.php" method="post">
<input type="hidden" name="product" value="4">
<input type="hidden" name="uenc" value="aHR0c"> 
<input name="form_key" type="hidden" value="eG4oiXalmxVw4hDx">
<input name="price" type="hidden" value="">
<input type="button" name="submit" value="Buy" class="buttonBuy">
</form>

我的 jQuery 如下：

$(".buttonBuy").click(function()
        $("input[name='price']").val($("#the-watchPrice > span").html());
        $("#dynamForm").submit();
    );

【问题讨论】：

见Why does naming your HTML form submit button “submit” break things?另外，Why HTML form cannot be submitted by a button with name “submit”?和How send a form with javascript when input name is “submit”?

另外，根据 jQuery submit() 文档：“表单及其子元素不应使用与表单属性冲突的输入名称或 ID，例如 submit、length 或 @ 987654330@。名称冲突可能会导致令人困惑的失败。"

【参考方案1】：

您的<input type="button" name="submit" value="Buy" class="buttonBuy"> 必须是type="submit" 而不是type="button" 才能提交表单。

除此之外，您似乎正在执行自定义 jQuery 验证/提交。要触发此操作，您需要通过将提交事件传递给 click 函数并使用.preventDefault() 阻止它来阻止 default 表单提交。

这可以在下面看到：

$(".buttonBuy").click(function(e) 
  e.preventDefault();
  $("input[name='price']").val($("#the-watchPrice > span").html());
  $("#dynamForm").submit();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form data-role="tocart-form" name="dynamicForm" id="dynamForm" action="http://www.example.com/dynamicbuy.php" method="POST">
  <input type="hidden" name="product" value="4">
  <input type="hidden" name="uenc" value="aHR0c">
  <input name="form_key" type="hidden" value="eG4oiXalmxVw4hDx">
  <input name="price" type="hidden" value="">
  <input type="submit" name="submit" value="Buy" class="buttonBuy">
</form>

【参考方案2】：

或者，只需将提交按钮的名称更改为提交以外的名称，如下所示：

<input type="button" name="buybutton" value="Buy" class="buttonBuy">

您可以查看正在工作的demo here