Форма контакта с использованием e.preventDefault(); не работает

Question

UPDATE - контактная форма находится здесь URL.

Я пытаюсь получить следующую контактную форму для работы, используя этот tutorial.

Мне удалось заставить все работать на своем компьютере с помощью веб-сервера apache. После загрузки файлов на веб-сайт функция ajax не запускается. Кажется, что e.preventDefault(); перестает работать после загрузки, а форма перенаправляется на новый сайт и не просто обрабатывается на сайте без перезагрузить.

Я также пытался использовать return false; вместо e.preventDefault(); без каких-либо успехов.

Ее мой код:

.html

<form method="post" action='mail/mail.php'> 
    <label>Name</label> 
    <input name="name" id="name" placeholder="Name.." required="true" class="input-field"> 

    <label>Mail</label> 
    <input type="email" name="email" placeholder="Mail.." required="true" class="input-field"> 

    <label>Msg</label> 
    <textarea name="message" id="message" class="textarea-field" required="true"></textarea> 

    <input type="submit" id="submit" name="submit" value="Send"> 
</form> 

    <div id="loading"> 
     Sender melding... 
    </div> 
    <div id="success"> 
    </div> 

.js

$(function(){ 
     $('form').submit(function(e){ 
     var thisForm = $(this); 
     //Prevent the default form action 

     //return false; 
     e.preventDefault(); 

     //Hide the form 
     $(this).fadeOut(function(){ 
      //Display the "loading" message 
      $("#loading").fadeIn(function(){ 
      //Post the form to the send script 
      $.ajax({ 
       type: 'POST', 
       url: thisForm.attr("action"), 
       data: thisForm.serialize(), 
       //Wait for a successful response 
       success: function(data){ 
       //Hide the "loading" message 
       $("#loading").fadeOut(function(){ 
        //Display the "success" message 
        $("#success").text(data).fadeIn(); 
       }); 
      } 
      }); 
     }); 
     }); 
    }) 

Пожалуйста, помогите!

Answer 1

Это потому, что ваш JS отсутствует закрытие });. Пожалуйста, проверьте это демо, чтобы подтвердить, что действие по умолчанию действительно предотвращено, и ajax делает удар. Однако я ожидал POST, но вместо этого я вижу запрос OPTIONS.

ПРИМЕЧАНИЕ: Давать элемент а значение атрибута name или id из submit плохая практика. Вы не можете, например, использовать JavaScript для отправки формы через форму отправки по умолчанию - this.submit() or $('form')[0].submit() без получения ошибки ...submit() is not a function .....

$(function() { 
 
     $('form').submit(function(e) { 
 
     var thisForm = $(this); 
 
     //Prevent the default form action 
 

 
     //return false; 
 
     e.preventDefault(); 
 

 
     //Hide the form 
 
     $(this).fadeOut(function() { 
 
      //Display the "loading" message 
 
      $("#loading").fadeIn(function() { 
 
      //Post the form to the send script 
 
      $.ajax({ 
 
       type: 'POST', 
 
       url: thisForm.attr("action"), 
 
       data: thisForm.serialize(), 
 
       //Wait for a successful response 
 
       success: function(data) { 
 
       //Hide the "loading" message 
 
       $("#loading").fadeOut(function() { 
 
        //Display the "success" message 
 
        $("#success").text(data).fadeIn(); 
 
       }); 
 
       } 
 
      }); 
 
      }); 
 
     }); 
 
     }); 
 
    }); // <==== MISSING THIS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form method="post" action='mail/mail.php'> 
 
    <label>Name</label> 
 
    <input name="name" id="name" placeholder="Name.." required="true" class="input-field"> 
 

 
    <label>Mail</label> 
 
    <input type="email" name="email" placeholder="Mail.." required="true" class="input-field"> 
 

 
    <label>Msg</label> 
 
    <textarea name="message" id="message" class="textarea-field" required="true"></textarea> 
 

 
    <input type="submit" id="submit" name="submit" value="Send"> 
 
</form> 
 

 
<div id="loading"> 
 
    Sender melding... 
 
</div> 
 
<div id="success"> 
 
</div>

Answer 2

Поскольку вы все равно отправляете через AJAX, вам может быть проще изменить тип ввода на кнопку и привязать к клику вместо формы submit, чтобы избежать поведения отправки по умолчанию, которое вы пытаетесь обойти.