CODEWITHSUNDEEP
jqueryhtmlformssubmit
SJW525
SJW525

Reputation: 51

Why does this form not submit when using jQuery submit function

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();
    });

Upvotes: 0

Views: 1567

Answers (2)

TejSoft
TejSoft

Reputation: 3315

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

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

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>

Upvotes: 1

Related Questions