有沒有辦法阻止用這個javascript/jquery提交表單？

Question

我搜索了網絡，我試過在所有地方實施「防止默認」和「返回錯誤」的聲明，但我似乎找不到防止此表單提交併重新加載頁面的方法。它只在表單被驗證時纔會重新加載。我是一個初學者，但我真的很努力地實現腳本來驗證表單（它具有「post」 - 方法和「＃」作爲動作），並進行ajax調用。這是一個學校任務，對於你們可以給予的任何指示都會優雅。

$(document).ready(function() 
{ 
    $("#submit").click(function() 
     { 
      var gbname = $("#gbname")[0]; 
      var gbmessage = $("#gbmessage")[0]; 

      formFields = [gbname, gbmessage] 
      var warning = false; 

      for (i=0; i<formFields.length; i++) 
      { 
       formFields[i].style.backgroundColor = "white"; 
       if (formFields[i].value == "") 
       { 
        formFields[i].style.backgroundColor = "red" 
        $(formFields[i]).bind("keyup", resetBgColor); 
        $(formFields[i]).bind("change", resetBgColor); 
        warning = true; 
       }  
      } 

      if (warning == true) 
      { 
       alert("Vänligen fyll i fälten korrekt!"); 
       return false; 
      } 

      else 
      { 
       $.post('ajax.php', {gbname: gbname, gbmessage: gbmessage}, 

       function(data) 
       { 
        $("#successmessage").html(data); 
        $("#successmessage").hide(); 
        $("#successmessage").fadeIn(1500); //Fade in error/success-meddelande 

        var comment = $("<div class='film2'><p class='names'><b>Namn:</b>" +gbname+ "</p> <p class='messages'><b>Meddelande:</b>" +gbmessage+ "</p></div>"); 

        $("#kommentarer").prepend(comment); 
        clearForm(); 


       }); 

       return false; 
      } 

      return false; 

     }); 

}); 

Answer 1

您對輸入元素作爲對象的引用以及從AJAX調用返回的數據有點混亂。

還包含了綁定到表單提交事件的建議。 DEMO

$(document).ready(function() { 

    function clearForm(){ 
     $('input.reset').each(function(){ 
      $(this).val(''); 
     }); 
    } 

    $("form").on('submit', function() { 
     alert('submitted!'); 
     var gbname = $("#gbname"); 
     var gbmessage = $("#gbmessage"); 

     formFields = [gbname[0], gbmessage[0]] 
     var warning = false; 

     for (i = 0; i < formFields.length; i++) { 
      formFields[i].style.backgroundColor = "white"; 
      if (formFields[i].value == "") { 
       formFields[i].style.backgroundColor = "red" 
       $(formFields[i]).bind("keyup", resetBgColor); 
       $(formFields[i]).bind("change", resetBgColor); 
       warning = true; 
      } 
     } 

     if (warning == true) { 
      alert("Vänligen fyll i fälten korrekt!"); 
      return false; 
     } else { 
      var J = JSON.stringify({ 
         "gbname": gbname.val(), 
         "gbmessage": gbmessage.val() 
        }); 
      console.log(J); 
      $.ajax({ 
       type: "POST", 
       url: '/echo/json/', 
       datatype: 'json', 
       data: { 
        json: J, 
        delay: 3 
       }, 
       success: function (data) { 
        $("#successmessage").html(data); 
        $("#successmessage").hide(); 
        $("#successmessage").fadeIn(1500); //Fade in error/success-meddelande 

        var comment = $("<div class='film2'><p class='names'><b>Namn:</b>" + data.gbname + "</p> <p class='messages'><b>Meddelande:</b>" + data.gbmessage + "</p></div>"); 

        $("#kommentarer").prepend(comment); 
        clearForm(); 


       } // end success 
      }); // end ajax 

      return false; 
     } // end else 

     return false; 

    }); 

}); 

Answer 2

我建議使用

$("form").on('submit', function (e) { 
[...] 
if(validationErrors) { 
    alert(Errormessage); 
    e.preventDefault(); 
} 
[...] 

而不是返回假。 https://developer.mozilla.org/en-US/docs/DOM/event.preventDefault

爲了得到它的工作，你必須使用事件作爲你的回調函數的參數。