Почему эта форма не отправляется при использовании функции отправки jQuery?

Question

У меня есть следующая форма, которая не отправляется, когда я нажимаю кнопку html с функцией отправки jQuery, прикрепленной к событию клика.

Ниже указан мой 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();
    });

Answer 1

В качестве альтернативы просто измените имя кнопки отправки на другое, отличное от отправки, как показано ниже:

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

Вы можете просмотреть рабочую демоверсию здесь

Answer 2

Ваш <input type="button" name="submit" value="Buy" class="buttonBuy"> должен быть type="submit" вместо type="button" для отправки формы.

В дополнение к этому, вы, кажется, делаете пользовательскую проверку / отправку jQuery.Чтобы вызвать это, вам нужно запретить отправку формы по умолчанию , передав событие отправки в функцию щелчка и предотвратив его с помощью .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>