捕获一个表单使用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中,否则可能无法工作。 那是我的情况。