使用jquery和.submit捕获表单提交
[英]Capturing a form submit with jquery and .submit
问题描述
我正在尝试使用jQuery捕获提交事件，然后将格式化为JSON的表单元素发送到PHP页面。 我在拍摄虽然提出的问题，我开始了.click()事件，而是移动到.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.');
});
5 个解决方案
解决方案1
140 已采纳 2012-09-03 18:27:26
将文档中的代码包装好，并阻止默认的提交操作：
$(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
});
});
解决方案2
14 2012-09-03 18:15:16
试试这个：
使用'return false'来减少事件的流程：
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
编辑
如果表单元素具有jQuery的'length'，则证实：
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准备好之后？
解决方案3
6 2013-04-24 14:34:00
只需将form.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
};
解决方案4
2 2017-09-04 17:58:50
只是一个提示：记得将代码检测放在document.ready上，否则可能无效。 那是我的情况。
解决方案5
0 2019-02-23 15:43:21
$(document).ready(function () { var form = $('#login_form')[0]; form.onsubmit = function(e){ var data = $("#login_form :input").serializeArray(); console.log(data); $.ajax({ url: "the url to post", data: data, processData: false, contentType: false, type: 'POST', success: function(data){ alert(data); }, error: function(xhrRequest, status, error) { alert(JSON.stringify(xhrRequest)); } }); return false; } });
<!DOCTYPE html> <html> <head> <title>Capturing sumit action</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <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> </body> </html>
jQuery不捕获表单提交
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.