2016-11-13 97 views
1

我有以下腳本,這完美的作品,但問題是我需要一個form action attribute它的工作,因此我的問題如何修改我的當前腳本,它可以防止默認表單提交行爲和形式的提交當前頁面上,而不需要一個action attribute形式阿賈克斯防止默認和提交表格當前頁

$(function() { 
    var form = $('#editRes'); 
    var formMessages = $('#formMsg'); 
    // Set up an event listener for the contact form. 
    $(form).submit(function(e) { 
    // Stop the browser from submitting the form. 
    e.preventDefault(); 
    //do the validation here 
    if (!validateLog()) { 
     return; 
    } 
    // Serialize the form data. 
    var formData = $(form).serialize(); 
    // Submit the form using AJAX. 
    $.ajax({ 
     type: 'POST', 
     url: $(form).attr('action'), 
     data: formData 
    }).done(function(response) { 
     // Make sure that the formMessages div has the 'success' class. 
     $(formMessages).removeClass('error').addClass('success'); 
     // Set the message text. 
     $(formMessages).html(response); // < html(); 
     // Clear the form. 
     $('').val('') 
    }).fail(function(data) { 
     // Make sure that the formMessages div has the 'error' class. 
     $(formMessages).removeClass('success').addClass('error'); 
     // Set the message text. 
     var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured!.'; 
     $(formMessages).html(messageHtml); // < html() 
    }); 

    }); 
    function validateLog() { 
    var valid = true; 
    //VALIDATE HERE 
    return valid; 
    } 
}) 
+0

對不起,但我沒有得到你。你能解釋一下你想要的嗎? – mrid

+0

您好@mrid我的腳本只能用於

'但是當我有一個像的形式時,即在頁面中提交沒有'action'屬性的腳本在表單字段我的腳本不起作用....有道理? –

+0

使用輸入類型按鈕而不是提交。在該按鈕上註冊單擊事件並刪除$(form).submit()函數。 $(button).click()將刪除您的操作屬性。 – ScanQR

回答

0

在你的Ajax,您使用的url: $(form).attr('action')。這意味着表單將被提交給您的表單的action屬性。由於沒有,阿賈克斯將無法正常工作。

如果你想要的形式是沒有action標籤,你可以只寫在一個AJAX網址部分

$.ajax({ 
    type: 'POST', 
    url: 'page.php', 
    data: formData, 
    ... 
    ... 
}); 
+0

不需要動作屬性。刪除提交併使用type =「button」並在此按鈕上註冊點擊事件。 Ajax url將是action屬性的值。 – ScanQR

+0

對不起,我沒有讓你'你可以只寫表格提交網址(page.php)'你可以請擴大.... @TechBreak我不能刪除我的提交按鈕 –

+0

@TimothyCoetzee你爲什麼不能?任何具體原因?根據您的問題,您想在當前頁面上提交表格。 – ScanQR

0

另一種選擇是window.location.href表單提交的url(page.php文件)。

附註:您不需要重新包裝form$(),因爲它已經是您第二行中的jQuery對象 - 與formMessages一樣。

$(function() { 
    var form = $('#editRes'); // this is a jQuery object 
    var formMessages = $('#formMsg'); // this is also a jQuery object 

    // Set up an event listener for the contact form. 
    form.submit(function (e) { 
     // Stop the browser from submitting the form. 
     e.preventDefault(); 
     // do the validation here 
     if (!validateLog()) { 
      return; 
     } 
     // Submit the form using AJAX. 
     $.ajax({ 
      type: 'POST', 
      url: window.location.href, 
      data: form.serialize() 
     }).done(function(response) { 
      // Make sure that the formMessages div has the 'success' class. 
      formMessages.removeClass('error').addClass('success'); 
      // Set the message text. 
      formMessages.html(response); // < html(); 
      // Clear the form. 
      $('').val('') 
     }).fail(function(data) { 
      // Make sure that the formMessages div has the 'error' class. 
      formMessages.removeClass('success').addClass('error'); 
      // Set the message text. 
      var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured!.'; 
      formMessages.html(messageHtml); // < html() 
     }); 
    }); 

    function validateLog() { 
     var valid = true; 
     //VALIDATE HERE 
     return valid; 
    } 
}); 
0

在您提交功能添加結束:

return false; 

這樣可以防止瀏覽器導航了。