JQuery - Запрос на отправку Ajax загружает ту же страницу с данными формы, добавленными в URL

У меня есть форма регистрации в HTML, которую я привел ниже.

<form id="registerForm">
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required>
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required>
            <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required>
            <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required>
            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
            <br>
            <button id="myButton">Register</button>
</form>

Я пытаюсь опубликовать информацию из формы, когда кто-то заполняет ее API-интерфейсом python, который затем вставляет информацию в базу данных MySQL.

Я хочу функциональность требуемых и шаблонов в HTML.

Я использую jQuery 3.1.1 и Ajax для отправки данных формы в API.

Мой JQuery/Ajax приведен ниже:

$("#registerForm").submit(function() 
{
    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    })
});

Я думаю, что это должно работать, однако, если я заполню форму и нажмите кнопку "Регистрация", она перезагрузит страницу и просто добавит информацию о форме в URL-адрес.

Примером этого является:

URL_GOES_HERE/register.html?guestFName=Joe&guestLName=Bloggs&guestEmail=bloggs%40gmail.com&guestPhone=087-1111111&guestPassword=TestPassword1

Почему так себя ведут?

Вся помощь очень ценится

EDIT: e.preventDefault(); не устраняет проблему.

ОТВЕТЫ

Ответ 1

Я думаю, вы должны использовать <input type='button'> вместо <button> и просто использовать .click() событие этого <input type='button'>, как показано ниже.

Изменить

<button id="myButton">Register</button>

Для

<input type='button' id='btnRegeister' value='Register'/>

И в JS

Изменить

$("#registerForm").submit(function()

Для

$("#btnRegeister").click(function()

Итак, теперь весь ваш код становится ниже.

<form id="registerForm">
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required>
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required>
            <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required>
            <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required>
            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
            <br>
            <input type='button' id='btnRegeister' value='Register'/>
</form>

$(document).ready(function(){
    $("#btnRegeister").click(function() 
    {
       $.ajax(
       {
           url: "URL_GOES_HERE",
           data: $('#registerForm').serialize(),
           type: 'POST',
           async: false
       })
       .done(function(response) 
       {
           console.log(response);

           var result = JSON.parse(response);      
       })
   });
});

Попробуйте более код, он работает для меня

Ответ 2

EDIT. Вы должны включить атрибут типа 'в свой HTML:

<button type="submit" name="submit"></button>

Использование функции "preventDefault" предотвратит отправку/перенаправление формы по умолчанию - это остановит непреднамеренное поведение

$("#registerForm").submit(function(e) 
{
    e.preventDefault(); // Add this

    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $(this).serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);
        var result = JSON.parse(response);      
    })
});

Ответ 3

вам нужно предотвратить preventDefault(), чтобы предотвратить поведение по умолчанию формы

$("#registerForm").submit(function(e) 
{
    e.preventDefault();

    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    })
});

Ответ 4

Вы работаете в браузере Safari случайно? потому что это единственный браузер, который я знаю, кто не поддерживает требуемые атрибуты и шаблоны, и он отправит форму любым способом, если это так, я могу дать вам хорошее решение, если не единственный вариант, который у вас есть, - удалить форму тег и запустить запрос ajax при нажатии кнопки.

Ответ 5

Есть несколько подсказок, которые, как я полагаю, могут заставить его работать.

  • Вставьте код jQuery в $(function() { ... }.
  • Не используйте async: false для вызова jQuery AJAX.
  • Используйте событие stopPropagation() и preventDefault(), чтобы предотвратить событие формы отправки.

Кроме этого, я ничего не менял и получил форму для работы. Я использовал HTTPBin для публикации ваших данных и получил соответствующий ответ.

Вот fiddle того же самого.

$(function() {

  $("#registerForm").submit(function(e) {
    e.stopPropagation();
    e.preventDefault();

    $.ajax({
        url: "https://httpbin.org/post",
        data: $('#registerForm').serialize(),
        type: 'POST'
      })
      .done(function(response) {
        console.log(response);
        //var result = JSON.parse(response);
      });
  });

});

Ответ 6

Убедитесь, что знак доллара $ принадлежит jQuery, введя этот $.fn.jquery в окно консоли. Если вы не получите версию jQuery, например, 3.1.1, тогда jQuery не загружается или что-то еще получает, чтобы назначить знак доллара $.

Измените свой код следующим образом:

jQuery(function($)
{
    $("#registerForm").submit(function(e) 
    {
        console.log('Form submitting');
        e.preventDefault();

        $.ajax(
        {
            url: "URL_GOES_HERE",
            data: $('#registerForm').serialize(),
            type: 'POST',
            async: false
        })
        .done(function(response) 
        {
            console.log(response);

            var result = JSON.parse(response);      
        })
    });
});

Кроме того, это не имеет особого значения, но попробуйте добавить метод POST к вашему form, чтобы проверить этот случай:

<form id="registerForm" method="POST">
    <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required>
    <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required>
    <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required>
    <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required>
    <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
    <br>
    <button id="myButton">Register</button>
</form>

И попробуйте отправить форму после проверки окна консоли на наличие ошибок.

Ответ 7

Похоже, что другое событие было инициировано, когда форма submit, попробуйте event.stopImmediateProgapation() или ваше событие находится за другим событием, которое перезагрузит страницу в очереди событий.

Ответ 8

Вы можете остановить поведение по умолчанию для отправки, используя: e.preventDefault()

$("#registerForm").submit(function(e) 
{
    e.preventDefault();
    console.log("it doesn't reload")
    // your ajax call
});

Надеюсь, что это полезно!;)

Ответ 9

Вы делаете форму отправки ajax, поэтому form_id.submit() не является хорошим! Если вы хотите сделать заявку на отправку по кнопке, нажатой как формат ajax, поймите click событие с идентификатором кнопки и добавьте preventDefault() или return false из-за предотвращения загрузки страницы.

$("#myButton").click(function(e) 
{
    e.preventDefault();
    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    });
    //return false;
});

Ответ 10

Вам нужно предотвратить поведение формы по умолчанию, добавив e.preventDefault(); (после получения e в качестве параметра) до конца вашего обработчика .submit, например:

$("#registerForm").submit(function(e)  //  <-- Add the e as param
{
    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    })
    e.preventDefault();   //  <-- Here is where the magic happens
});

e.preventDefault(); предотвращает фактическое собственное представление формы (перезагрузка страницы...)

Ответ 11

Попробуйте следующее:

$(document).on('submit','form',function(){
   // code
   $.ajax({
    url: "URL_GOES_HERE",
    data: $('#registerForm').serialize(),
    type: 'POST',
    async: false
   }).done(function(response){
    console.log(response);
    var result = JSON.parse(response);      
   })
});

Ответ 12

Я рекомендую вам удалить тег "button" и использовать тег "a" с некоторым css, чтобы преобразовать этот тег "a" в кнопку (например, с классом "btn" из начальной загрузки)

<form id="registerForm">
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required>
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required>
            <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required>
            <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required>
            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
            <br>
            <a class="btn btn-default">Register</a>
</form>

Затем в вашем JS-коде:

$("#registerForm a").click(function() 
{

    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    })
})

Ответ 13

Я могу реплицировать и исправлять вашу проблему с помощью NodeJS, Express, Multer и Internet Edge.

Когда я редактирую:

<form id="registerForm">

к

<form method="post" id="registerForm">

Я также отправляю ему действительный ответ с помощью Express.