Ajaxはデフォルトのフォームを現在のページに送信しないようにします

Question

私は次のスクリプトを使用していますが、問題なく動作するためにはform action attributeが必要です。行動や提出は、あなたのAJAX形で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; 
    } 
}) 

Answer 1

を必要とせずに、現在のページの上に形成し、あなたはurl: $(form).attr('action')を使用しています。つまり、フォームはフォームのaction属性に送信されます。何もないので、ajaxは動作しません。

フォームがactionタグなしになりたい場合は、あなただけのAJAXのURLの一部別のオプションがwindow.location.hrefにある

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

Answer 2

のフォーム提出のURL（page.php）を書くことができます。

サイドノート：formを$()に再ラップする必要はありません。これはすでに2行目の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; 
    } 
}); 

Answer 3

：

return false; 

これは離れて移動するからブラウザに防ぐことができます。