Why does this form not submit when using jQuery submit function

Question

I have the following form that is not submitting when I click the html button that has a jQuery submit function attached to it's click event.

My html is below:

<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>

My jQuery is below:

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

See [Why does naming your HTML form submit button “submit” break things?](https://stackoverflow.com/questions/876243/why-does-naming-your-html-form-submit-button-submit-break-things) Also, [Why HTML form cannot be submitted by a button with name “submit”?](https://stackoverflow.com/questions/30014765/why-html-form-cannot-be-submitted-by-a-button-with-name-submit) and [How send a form with Javascript when input name is “submit”?](https://stackoverflow.com/questions/8729319/how-send-a-form-with-javascript-when-input-name-is-submit) — showdev, Oct 02 '18 at 21:13
Also, per jQuery [`submit()`](http://api.jquery.com/submit/) documentation: "Forms and their child elements should not use input names or ids that conflict with properties of a form, such as `submit`, `length`, or `method`. Name conflicts can cause confusing failures." — showdev, Oct 02 '18 at 21:16

score 1 · Answer 1 · answered Oct 02 '18 at 20:42

Your <input type="button" name="submit" value="Buy" class="buttonBuy"> needs to be type="submit" instead of type="button" in order to submit the form.

In addition to this, you appear to be doing custom jQuery validation / submission. To trigger this, you'll need to prevent the default form submission by passing the submission event into the click function, and preventing it with .preventDefault().

This can be seen in the following:

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

score 0 · Answer 2 · answered Oct 03 '18 at 00:56

0

Alternatively, just change the name of the submit button to something other than submit as below:

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

You can view an working demo here

answered Oct 03 '18 at 00:56

TejSoft

3,213
6
34
58

Why does this form not submit when using jQuery submit function

2 Answers2