时间戳

首页 > 解决方案 > 为什么使用jQuery提交功能时此表单不提交

jquery - 为什么使用jQuery提交功能时此表单不提交

问题描述

当我单击具有附加到其单击事件的 jQuery 提交功能的 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();
    });

标签： jqueryhtmlformssubmit

解决方案

您<input type="button" name="submit" value="Buy" class="buttonBuy">需要type="submit"代替type="button"才能提交表单。

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

这可以在下面看到：

$(".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>

推荐阅读