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? Also, Why HTML form cannot be submitted by a button with name “submit”? and How send a form with Javascript when input name is “submit”? — showdev
– showdev, Commented Oct 2, 2018 at 21:13
Also, per jQuery 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
– showdev, Commented Oct 2, 2018 at 21:16

Obsidian Age · Accepted Answer · 2018-10-02 20:42:31Z

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>

TejSoft · Accepted Answer · 2018-10-03 00:56:56Z

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 3, 2018 at 0:56

TejSoft

3,3356 gold badges38 silver badges64 bronze badges

Collectives™ on Stack Overflow

Why does this form not submit when using jQuery submit function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related