Просто и проблематично c, двойная форма ajax публикация не запускается

Question

Я уверен, что мой код не работает, кто-нибудь может сказать, где? Я не могу использовать ту же форму. Я пробовал несколько способов отправить 2 формы POST на страницу действий. Но когда вы нажимаете кнопку, страница перезагружается с обновленной адресной строкой (нажмите кнопку yname в форме отправки, и адрес переходит на example.com/?yname, а не на страницу do. php *)

Пожалуйста, рассмотрите пример:

$("#sub").click(function(){
    $("form").each(function(){
        var fd = new FormData($(this)[0]);
        $.ajax({
            type: "POST",
            url: "do.php",
            data: fd,
            processData: false,
            contentType: false,
            success: function(data,status) {
               //this will execute when form is submited without errors
           },
           error: function(data, status) {
               //this will execute when get any error
           },
       });
    });
});

<form id="form1">
	<input type="tel" placeholder="Your Email" id="email" name="yemail" class="c">
	<button id="sub"></button>
</form>

<form id="form2">
	<input type="tel" placeholder="Your Name" id="name" name="yname" class="b">
	<button id="sub"></button>
</form>

Результат tis-кода: при щелчке в форме адрес URL обновляется с помощью? Yname Почему не запускается действие для страницы do. php

Answer 1

#id невозможно повторить. Вместо этого используйте class. И строка $(this).parent('form') получает форму каждого .sub, на который нажали. Кнопки должны быть type="button" ', по умолчанию это будет type="submit"

TYPE

Поведение кнопки по умолчанию. Возможные значения:

представить: Кнопка отправляет данные формы на сервер. Это значение по умолчанию, если атрибут не указан для кнопок, связанных с, или если атрибут является пустым или недопустимым значением. сброс: Кнопка сбрасывает все элементы управления к их начальным значениям, например. (Такое поведение раздражает пользователей.) кнопка: Кнопка не имеет поведения по умолчанию и ничего не делает при нажатии по умолчанию. Он может иметь клиентские сценарии для прослушивания событий элемента, которые запускаются при возникновении событий.

Кнопка документации

РЕДАКТИРОВАНИЕ: для отправки всех данных в одной форме просто удалите form2

$(".sub").click(function(){
         //This line is searching the correct form from itself.
        var fd = new FormData($(this).parent('form')[0]);
        $.ajax({
            type: "POST",
            url: "do.php",
            data: fd,
            processData: false,
            contentType: false,
            success: function(data,status) {
               //this will execute when form is submited without errors
           },
           error: function(data, status) {
               //this will execute when get any error
           }
       });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
	<input type="tel" placeholder="Your Email" id="email" name="yemail" class="c">
	<button type="button" class="sub"></button>
   

	<input type="tel" placeholder="Your Name" id="name" name="yname" class="b">
	<button type="button" class="sub"></button>
</form>