javascript JQuery 在按钮单击时序列化表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21341348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery serialize form on button click
提问by Tyler
I have a simple form that i want to submit to JQuery. My following code almost works, but is behaving funny. I have two buttons, a submit(serialize) and a cancel(do nothing). both point to the same javascript function, but when submit is pressed a alert box pops up. On a fresh page load clicking submit will do nothing, but if you click it one more time, it will show the alert box, but twice. If you click it again, it will pop up 3 times and so on and so on. The cancel button, if it is pressed does nothing, however it also adds to the number of times the alert box pops up next time you click submit. I looked at alot of examples, and as far as I can tell, I am doing this correctly
我有一个简单的表单，我想提交给 JQuery。我的以下代码几乎可以工作，但表现得很有趣。我有两个按钮，一个提交（序列化）和一个取消（什么都不做）。两者都指向相同的 javascript 函数，但是当按下提交时会弹出一个警告框。在一个新的页面加载点击提交将什么也不做，但如果你再点击一次，它会显示警告框，但两次。如果再次单击它，它会弹出 3 次，以此类推。取消按钮，如果按下它什么也不做，但是它也会增加下次单击提交时弹出警告框的次数。我看了很多例子，据我所知，我这样做是正确的
HTML:
HTML：
<head>
<script src="js/jquery.min.js"></script>
<script src="js/ajax.js"></script>
</head>
<body>
<form id="test" action="">
First name: <input type="text" name="FirstName" value="Mickey" /><br>
Last name: <input type="text" name="LastName" value="Mouse" /><br>
</form>
<button id="tbutton" onclick="test()">Serialize</button>
<button id="fbutton" onclick="test()">do nothing</button>
</body>
My Function:
我的功能：
function test() {
$("#tbutton").click(function(){
alert($('#test').serialize());
});
}
I would like to get the form info into the AJAX function as it is used elsewhere in my project, and form data is not always used.
我想将表单信息放入 AJAX 函数中，因为它在我的项目中的其他地方使用，并且并不总是使用表单数据。
function get_node_data(u_id) {
var xmlhttp;
var ser_new_area = "";
$("#move").click(function(){
alert($('#move_node').serialize());
var ser_new_area = $('#move_node').serialize();
});
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("data_main").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "AJAX_node_overview.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("u_id=" + u_id + "&" + ser_new_area);
}
回答by mart
The problem with your code is you are calling test function when you click the Serialize button and in that function you are binding the event click of the button to a function.
您的代码的问题是当您单击“序列化”按钮时正在调用测试函数，并且在该函数中您将按钮的事件单击绑定到一个函数。
Try changing this:
尝试改变这个：
$(document).ready(
$("#tbutton").click(function(){
alert($('#test').serialize());
});
)
And in your html:
在你的 html 中：
<button id="tbutton">Serialize</button>
<button id="fbutton">do nothing</button>
回答by Tyler
With @mart's and others help I came up with this:
在@mart 和其他人的帮助下，我想出了这个：
Bind button:
绑定按钮：
$(document).ready(function(){
$("#tbutton").click(function(){
test($('#test').serialize());
});
});
function:
功能：
function test(data) {
alert(data);
}
Thanks.
谢谢。
回答by Gaucho_9
HTML:
HTML：
<body>
<form id="test" action="">
First name: <input type="text" name="FirstName" value="Mickey" /><br>
Last name: <input type="text" name="LastName" value="Mouse" /><br>
</form>
<button id="tbutton">Serialize</button>
<button id="fbutton">do nothing</button>
</body>
JAVASCRIPT:
爪哇脚本：
$(function() {
$("#tbutton").click(function(){
alert($('#test').serialize());
});
});
