admin管理员组文章数量:1355679
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
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.
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);
}
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
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.
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);
}
- We didn't have your ajax.js code. Can you post your code in JSFIDDLE? More easy to find the problem. – Gaucho_9 Commented Jan 24, 2014 at 19:58
- Why you have two bindings to the same button? You should remove the onclick attribute and use the $(selector).click() binding – mart Commented Jan 24, 2014 at 20:00
- Everytime you call your function test() you are binding a new click event to your button. You have to bind the event on page load only. – Gaucho_9 Commented Jan 24, 2014 at 20:04
- ok i am not familliar with $(selector).click(), I will look into it. New to Jquery. – Tyler Commented Jan 24, 2014 at 20:08
3 Answers
Reset to default 3With @mart's and others help I came up with this:
Bind button:
$(document).ready(function(){
$("#tbutton").click(function(){
test($('#test').serialize());
});
});
function:
function test(data) {
alert(data);
}
Thanks.
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:
<button id="tbutton">Serialize</button>
<button id="fbutton">do nothing</button>
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());
});
});
本文标签： javascriptJQuery serialize form on button clickStack Overflow
版权声明：本文标题：javascript - JQuery serialize form on button click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743979919a2571036.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论