I'm attempting to use jQuery to capture a submit event and then send the form elements formatted as JSON to a PHP page. I'm having issues capturing the submit though, I started with a .click()
event but moved to the .submit()
one instead.
我正在尝试使用jQuery捕获提交事件,然后将格式化为JSON的表单元素发送到PHP页面。我在捕获提交时遇到问题,我开始使用.click()事件,但转而使用.submit()。
I now have the following trimmed down code.
我现在有以下修剪过的代码。
HTML
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
使用Javascript
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
});
4 个解决方案
#1
125
Wrap the code in document ready and prevent the default submit action:
将文档中的代码包装好,并阻止默认的提交操作:
$(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
11
try this:
尝试这个:
Use ´return false´ for to cut the flow of the event:
使用'return false'来减少事件的流程:
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
Edit
编辑
corroborate if the form element with the 'length' of jQuery:
如果表单元素具有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
});
OR:
要么:
it waits for the DOM is ready:
它等待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
});
});
Do you put your code inside the event "ready" the document or after the DOM is ready?
您是否将代码放入事件“准备好”文档或DOM准备好之后?
#3
6
Just replace the form.submit function with your own implementation:
只需将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
0
Just a tip: Remember to put the code detection on document.ready, otherwise it might not work. That was my case.
只是一个提示:记得将代码检测放在document.ready上,否则它可能无效。那是我的情况。
#1
125
Wrap the code in document ready and prevent the default submit action:
将文档中的代码包装好,并阻止默认的提交操作:
$(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
11
try this:
尝试这个:
Use ´return false´ for to cut the flow of the event:
使用'return false'来减少事件的流程:
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
Edit
编辑
corroborate if the form element with the 'length' of jQuery:
如果表单元素具有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
});
OR:
要么:
it waits for the DOM is ready:
它等待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
});
});
Do you put your code inside the event "ready" the document or after the DOM is ready?
您是否将代码放入事件“准备好”文档或DOM准备好之后?
#3
6
Just replace the form.submit function with your own implementation:
只需将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
0
Just a tip: Remember to put the code detection on document.ready, otherwise it might not work. That was my case.
只是一个提示:记得将代码检测放在document.ready上,否则它可能无效。那是我的情况。