捕获一个表单使用jQuery和.submit提交

我试图使用jQuery来捕获提交事件,然后将格式为JSON的表单元素发送到PHP页面。 我有问题捕获提交虽然,我开始与.submit()事件,但移动到.submit()代替。

我现在有下面的修剪代码。

HTML

 <form method="POST" id="login_form"> <label>Username:</label> <input type="text" name="username" id="username"/> <label>Password:</label> <input type="password" name="password" id="password"/> <input type="submit" value="Submit" name="submit" class="submit" id="submit" /> </form> 

使用Javascript

 $('#login_form').submit(function() { var data = $("#login_form :input").serializeArray(); alert('Handler for .submit() called.'); }); 

将代码包装在文档中,防止默认提交操作:

 $(function() { //shorthand document.ready function $('#login_form').on('submit', function(e) { //use on if jQuery 1.7+ e.preventDefault(); //prevent form from submitting var data = $("#login_form :input").serializeArray(); console.log(data); //use the console for debugging, F12 in Chrome, not alerts }); }); 

尝试这个:

使用结局false'来削减事件的stream程:

 $('#login_form').submit(function() { var data = $("#login_form :input").serializeArray(); alert('Handler for .submit() called.'); return false; // <- cancel event }); 

编辑

确认如果表单元素与“长度”的jQuery:

 alert($('#login_form').length) // if is == 0, not found form $('#login_form').submit(function() { var data = $("#login_form :input").serializeArray(); alert('Handler for .submit() called.'); return false; // <- cancel event }); 

要么:

它等待DOM准备就绪:

 jQuery(function() { alert($('#login_form').length) // if is == 0, not found form $('#login_form').submit(function() { var data = $("#login_form :input").serializeArray(); alert('Handler for .submit() called.'); return false; // <- cancel event }); }); 

你把你的代码放在事件“准备就绪”的文件或DOM准备好后?

只需用你自己的实现来replaceform.submit函数:

 var form = document.getElementById('form'); var formSubmit = form.submit; //save reference to original submit function form.onsubmit = function(e) { formHandler(); return false; }; var formHandler = form.submit = function() { alert('hi there'); formSubmit(); //optionally submit the form }; 

只是提示:请记住将代码检测放在document.ready中,否则可能无法工作。 那是我的情况。