如何在event.preventDefault（）之後提交ajax .done（）中的表單？

我正在使用ajax驗證我的表單，我只是檢查用戶名和密碼是否正確。如果他們是正確的，我提交表格並轉到歡迎頁面，否則返回錯誤消息。如何在event.preventDefault（）之後提交ajax .done（）中的表單？

一切順利，但表單無法提交。我希望表單在數據== 1時被提交，使用$（「＃login」）。submit（）;但它不起作用。

我繼續搜索，但我無法弄清楚問題所在。

任何幫助將不勝感激。

function check() { 
 
    
 
    $("#login").submit(function (event) { 
 
     
 
     event.preventDefault(); 
 
     if($("#username").val()=="") 
 
     { 
 
     $("#usernamenull").html("username required <br />"); 
 
     return false; 
 
     } 
 
     else if($("#password").val()=="") 
 
     { 
 
     $("#passwordnull").html("password required <br />"); 
 
     return false; 
 
     } 
 
     
 
     
 
     var xhra=$.post("login.php",{username:$("#username").val(),password:$("#password").val()}); 
 
     
 
     xhra.done(function (data) { 
 
     if (data==0) { 
 
      $("#message").html("username or password incorrect.<br />"); 
 
     } 
 
     else if (data==1) { 
 
      $("#message").html("good.<br />"); 
 
      $("#login").submit();//I want the form to be submited here,but doesn't work. 
 
     } 
 
     }); 
 
     
 
     xhra.fail(function() { 
 
     alert("oops : "+xhra.status+" "+xhra.statusText+".\n"); 
 
     }); 
 

 
     
 
     
 
    }) 
 
};

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <script src="jquery-3.0.0.js"></script> 
 
    <script src="test.js"></script> 
 
</head> 
 

 
<body> 
 
    <form name="login" id="login" action="welcome.php" method="post" > 
 
    username:  
 
    <br />  
 
    <input type="text" name="username" id="username"> 
 
    <br /> 
 
    <span id="usernamenull" style="color:red"></span> 
 
    <br /> 
 
    password: 
 
    <br /> 
 
    <input type="password" name="password" id="password" /> 
 
    <br /> 
 
    <span id="passwordnull" style="color:red"></span> 
 
    <br /> 
 
    <br /> 
 
    <input type="submit" name="mysubmit" id="mysubmit" value="login" onclick="check()" /> 
 
    <br /> 
 
    <br /> 
 
    <span id="message"style="color:red"></span> 
 
    <br /> 
 
    </form> 
 
    
 
</body> 
 

 
</html>

來源

2016-07-06 mulder

@Marcus H謝謝。我不是以英語爲母語的人。我希望你們知道我在說什麼。 – mulder

這是因爲每當你嘗試提交您的形式，它是越來越阻止event.preventDefault（）;即使在xhr請求後的響應匹配你的$（「＃login」）。submit（）再次被event.preventDefault（）阻塞，因爲它再次調用$（「＃login」）。submit（function （event）{}））。所以，你的問題解決方案可以

使用錨按鈕而不是提交按鈕，並調用你的形式在做同樣的東西提交功能。
```
<a href="javascript:void(0);" onclick="check()"> Submit </a> 
```

在Javascript中

function check(){ 


    if($("#username").val()=="") 
    { 
    $("#usernamenull").html("username required <br />"); 
    return false; 
    } 
    else if($("#password").val()=="") 
    { 
    $("#passwordnull").html("password required <br />"); 
    return false; 
    } 


    var xhra=$.post("login.php",{username:$("#username").val(),password:$("#password").val()}); 

    xhra.done(function (data) { 
    if (data==0) { 
     $("#message").html("username or password incorrect.<br />"); 
    } 
    else if (data==1) { 
     $("#message").html("good.<br />"); 
     $("#login").submit();//I want the form to be submited here,but doesn't work. 
    } 
    }); 

    xhra.fail(function() { 
    alert("oops : "+xhra.status+" "+xhra.statusText+".\n"); 
    }); 


}

Check Condition來阻止事件

function check() { 



$("#login").submit(function (event) { 


    if($("#username").val()=="") 
    { 
    event.preventDefault(); 
    $("#usernamenull").html("username required <br />"); 
    return false; 
    } 
    else if($("#password").val()=="") 
    { 
    event.preventDefault(); 
    $("#passwordnull").html("password required <br />"); 
    return false; 
    } 


    var xhra=$.post("login.php",{username:$("#username").val(),password:$("#password").val()}); 

    xhra.done(function (data) { 
    if (data==0) { 
     event.preventDefault(); 
     $("#message").html("username or password incorrect.<br />"); 
    } 
    else if (data==1) { 
     $("#message").html("good.<br />"); 
     $("#login").submit();//I want the form to be submited here,but doesn't work. 
    } 
    }); 

    xhra.fail(function() { 
    event.preventDefault(); 
    alert("oops : "+xhra.status+" "+xhra.statusText+".\n"); 
    }); 



})

};

來源

2016-07-06 05:23:26

謝謝。解決方案1是我想要的。有用。 – mulder

@mulder如果解決方案有效，您可以投票解決方案？ –

我沒有超過15的聲望，我的投票不會改變帖子分數。 – mulder

這是不可能恢復e.preventDefault()。在您需要的情況下，您應該只有preventDefault，並讓原始流程保持原樣。

例如

function onClick(e) { 
    if (condition === false) { 
    e.preventDefault(); 
    // do your stuff here 
    } else { 
    // let everything work as normal if condition is true 
    } 
}

來源

2016-07-06 05:05:48 activatedgeek

替換click事件提交事件，然後觸發提交

$("#login").click(function (event) { 

     event.preventDefault(); 
     if($("#username").val()=="") 
     { 
     $("#usernamenull").html("username required <br />"); 
     return false; 
     } 
     else if($("#password").val()=="") 
     { 
     $("#passwordnull").html("password required <br />"); 
     return false; 
     } 


     var xhra=$.post("login.php",{username:$("#username").val(),password:$("#password").val()}); 

     xhra.done(function (data) { 
     if (data==0) { 
      $("#message").html("username or password incorrect.<br />"); 
     } 
     else if (data==1) { 
      $("#message").html("good.<br />"); 
      $("#login").submit(); 
     } 
     }); 

     xhra.fail(function() { 
     alert("oops : "+xhra.status+" "+xhra.statusText+".\n"); 
     }); 



    }) 
};

來源

2016-07-06 05:14:11 madalinivascu

你是對的。我明白你的意思。我編輯了我的代碼，現在它工作。 – mulder

不要忘記檢查綠色按鈕接受答案：p – madalinivascu

您可以簡單地觸發表單的本機提交事件 - 這將繞過由jQuery綁定的提交事件處理程序。爲此，您必須訪問DOM節點：它是jQuery選擇器返回的數組中的第一個元素，即$('#login')[0]。

要調用提交事件繞過jQuery的，你可以這樣做：

if (data==1) { 
    // Call native submit event 
    $('#login')[0].submit(); 
}

來源

2016-07-06 06:22:41 Terry

我認爲使用return true and false比event.preventDefault越多越好！返回false做表單不要以同樣的方式提交preventDefault。提交表單時只返回true，不需要使用$("#login").submit()

function check() { 

    $("#login").submit(function (event) {   
     //event.preventDefault(); [use instead return true and false] 
     if($("#username").val()=="") 
     { 
     $("#usernamenull").html("username required <br />"); 
     return false; 
     } 
     else if($("#password").val()=="") 
     { 
     $("#passwordnull").html("password required <br />"); 
     return false; 
     }   

     var xhra=$.post("login.php",{username:$("#username").val(),password:$("#password").val()}); 

     xhra.done(function (data) { 
     if (data==0) { 
      $("#message").html("username or password incorrect.<br />"); 
      return false; 
     } 
     else if (data==1) { 
      $("#message").html("good.<br />"); 
      return true; 
     } 
     }); 

     xhra.fail(function() { 
     alert("oops : "+xhra.status+" "+xhra.statusText+".\n"); 
     });  

    }) 
};

來源

2016-07-06 06:37:48

它不起作用。它總是提交表單甚至是錯誤的用戶名和密碼。似乎返回true或false在ajax中不起作用。 – mulder

如何在event.preventDefault（）之後提交ajax .done（）中的表單？

回答

相關問題