使用e.preventDefault（）;的聯系表； 沒有現場工作

Question

UPDATE-在此URL上找到聯系表格。

我正在嘗試使用本教程使以下聯系表起作用。

我設法使用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提交的，因此您可能會發現將輸入類型更改為button並綁定為click而不是表單提交更容易，從而避免了您試圖繞過的默認提交行為。