有没有办法阻止用这个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

为了得到它的工作，你必须使用事件作为你的回调函数的参数。