Ajax表单提交在1页上不起作用

时间:2018-01-05 15:30:40

标签: javascript php jquery ajax forms

我有一个用JQuery AJAX提交的表单。但在我点击提交后,我的页面将重定向到我的表单submit.php。我几乎尝试了一切,但我找不到这个错误...

PHP脚本运行正常。我只回应一次,

HTML:

<form class="offerte-form" method="post">
                        <div class="col-sm-6">
                            <input type="text" class="name" id="naamofferte" name="naam" placeholder="Naam*" required="" style="border-radius: 4px;">
                            <input type="text" class="name" id="naambedrijf" name="naambedrijf" placeholder="Naam bedrijf" style="border-radius: 4px;">
                            <input type="text" class="name" id="adresofferte" name="adres" placeholder="Adres" style="border-radius: 4px;">
                            <input type="text" class="name" id="vestplaats" name="vestplaats" placeholder="Vestigingsplaats" style="border-radius: 4px;">
                            <input type="text" class="name" id="postcode" name="postcode" placeholder="Postcode" style="border-radius: 4px;">
                            <input type="email" class="name" id="emailofferte" name="email" placeholder="Emailadres*" required="" style="border-radius: 4px;">
                        </div>
                        <div class="col-sm-6">
                            <input type="text" class="name" id="telnrofferte" name="telnr" placeholder="Telefoonnummer*" required="" style="border-radius: 4px;">
                            <select class="name" name="offertevoor" id="offertevoor" style="border-radius: 4px;" required>
                                <option value="none">
                                    Selecteer een optie
                                </option>
                                <option value="pallets aanbieden">
                                    Ik wil pallets aanbieden
                                </option>
                                <option value="pallets kopen">
                                    Ik wil pallets kopen
                                </option>
                                <option value="containerservice">
                                    Containerservice
                                </option>
                            </select>
                            <textarea placeholder="Uw opmerkingen" id="messageofferte" name="message" required="" style="border-radius: 4px;"></textarea>
                            <input type="submit" value="Verstuur">
                        </div>
                    </form>

JS:

$(function() {
    // Get the form.
    var form3 = $('.offerte-form');
    // Get the messages div.
    var formMessages3 = $('.offerte-form-message');
    $(form3).submit(function(event) {
    // Stop the browser from submitting the form.
    event.preventDefault();
    // Serialize the form data.
    var formData3 = $(form3).serialize();
    console.log(formData3);
    $.ajax({
    type: 'POST',
    url: $(form3).attr('action'),
    data: formData3
    }).done(function(response) {
      // Make sure that the formMessages div has the 'success' class.
      $(formMessages3).removeClass('alert alert-danger');
      $(formMessages3).addClass('alert alert-success');

      // Set the message text.
      $(formMessages3).text(response);

      // Clear the form.
      $('#naamofferte').val('');
      $('#naambedrijf').val('');
      $('#adresofferte').val('');
      $('#vestplaats').val('');
      $('#postcode').val('');
      $('#emailofferte').val('');
      $('#telnrofferte').val('');
      $('#offertevoor').val('');
      $('#messageofferte').val('');

    }).fail(function(data) {
      // Make sure that the formMessages div has the 'error' class.
      $(formMessages3).removeClass('alert alert-success');
      $(formMessages3).addClass('alert alert-danger');

      // Set the message text.
      if (data.responseText !== '') {
          $(formMessages3).text(data.responseText);
      } else {
          $(formMessages3).text('Helaas, er ging iets fout, probeer het opnieuw');
      }
    });
});

很抱歉这些行,我需要添加更多'详细信息',但我没有。 提前谢谢!

1 个答案:

答案 0 :(得分:0)

ajax url你打电话给.offerte表格的attr('action'),但我看不到你表格中的动作。请检查。

<form class="offerte-form" method="post" action="submit.php">