0

Вот HTML

       <form >
            <p>Ваше имя</p>
            <input type="text" name="entry.264177477">
            <p>Ваш email</p>
            <input type="text" name="entry.512172970">
            <p>Ваш телефон</p>
            <input type="text" name="entry.1843778406">
            <div>
                <input type="hidden" name="fvv" value="1">
                <input type="hidden" name="draftResponse" value="[null,null,&quot;-5538723825868381013&quot;]">
                <input type="hidden" name="pageHistory" value="0">
                <input type="hidden" name="fbzx" value="-5538723825868381013">
                <input type="submit" name="submit" value="Отправить контакты" id="submitBtn">
            </div>
        </form>

Вот JS

$('#submitBtn').click(function(e){
  e.preventDefault();
    var formData = $(this).parent('form').serialize();
     $.ajax({
       url: 'https://docs.google.com/forms/u/0/d/e/1FAIpQLSfD7qfNagDlYAtcfDzE4gVdiwsbj3E0NYcDlGlzi1lVA-wofw/formResponse',
       method: 'POST',
       data: formData,
       statusCode: {
           200: function(response) {
               alert('200');
           },
           201: function(response) {
               alert('201');
           },
           400: function(response) {
               alert('400');
           },
           404: function(response) {
               alert('401');
           }
       },
       success: function() {
           alert('Успешно');
       },
   });
});

После нажатия отправки все равно идет перезагрузка страницы и данные не записываются в гугл таблицу.

Но вот так данные отправляются, но происходит перезагрузка страницы

<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfD7qfNagDlYAtcfDzE4gVdiwsbj3E0NYcDlGlzi1lVA-wofw/formResponse" target="_self" method="POST">
                    <p>Ваше имя</p>
                    <input type="text" name="entry.264177477">
                    <p>Ваш email</p>
                    <input type="text" name="entry.512172970">
                    <p>Ваш телефон</p>
                    <input type="text" name="entry.1843778406">
                    <div>
                        <input type="hidden" name="fvv" value="1">
                        <input type="hidden" name="draftResponse" value="[null,null,&quot;-5538723825868381013&quot;]">
                        <input type="hidden" name="pageHistory" value="0">
                        <input type="hidden" name="fbzx" value="-5538723825868381013">
                        <input type="submit" name="submit" value="Отправить контакты">
                    </div>
                </form>

Как отправить данные с формы без перезагрузки страницы, чтобы можно было высветить попап о успешной отправки?

1
  • А вы уверены, что код $('#submitBtn').click( выполняется? Поставьте в обработчик нажатия клика console.log. Commented 27 апр. 2020 в 13:37

1 ответ 1

0

Чтобы не было перезагрузки страницы, сделайте отправку данных при событии submit для формы и с e.preventDefault();:

$('form').submit(function(e){
    e.preventDefault();
    var formData = $(this).serialize();
        $.ajax({
        url: 'https://docs.google.com/forms/u/0/d/e/1FAIpQLSfD7qfNagDlYAtcfDzE4gVdiwsbj3E0NYcDlGlzi1lVA-wofw/formResponse',
        method: 'POST',
        data: formData,
        statusCode: {
            200: function(response) {
                alert('200');
            },
            201: function(response) {
                alert('201');
            },
            400: function(response) {
                alert('400');
            },
            404: function(response) {
                alert('401');
            }
        },
        success: function() {
            alert('Успешно');
        },
    });
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.