按钮点击JQuery序列化表单

我有一个简单的表单，我想提交给JQuery。我的下面的代码几乎可以工作，但表现得很有趣。我有两个按钮，一个提交（序列化）和一个取消（什么都不做）。都指向相同的javascript功能，但是当提交被按下时，弹出一个警告框。在新的页面加载时，单击提交将不会执行任何操作，但如果再次单击它，它将显示警告框，但会显示两次。如果再次点击它，它会弹出3次，依此类推。取消按钮（如果按下）不会执行任何操作，但它也会增加下次单击“提交”时弹出警告框的次数。我看着的例子很多，据我所知，我在做正确此按钮点击JQuery序列化表单

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>

我的功能：

function test() { 
    $("#tbutton").click(function(){ 
    alert($('#test').serialize()); 
    }); 
}

我想获得的形式信息放入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); 
}

来源

2014-01-24 Tyler

我们没有你的ajax.js代码。你可以在[JSFIDDLE]（http://jsfiddle.net/）中发布你的代码吗？更容易找到问题。 –

为什么你有两个绑定到同一个按钮？您应该删除onclick属性并使用$（selector）.click（）绑定 – mart

每次调用函数test（）时，都会将新的单击事件绑定到您的按钮。您必须仅在页面加载时绑定事件。 –

随着@沃尔玛和其他人的帮助，我想出了这个：

绑定按钮：

$(document).ready(function(){ 
    $("#tbutton").click(function(){ 
    test($('#test').serialize()); 
    }); 
});

功能：

function test(data) { 
    alert(data); 
}

谢谢。

来源

2014-01-24 20:42:23 Tyler

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()); 
    }); 
});

来源

2014-01-24 20:07:20

与您的代码的问题是您调用测试功能，当您点击序列化按钮，在那个函数中你是有约束力的事件点击按钮的功能。

尝试改变这一点：

$(document).ready(
    $("#tbutton").click(function(){ 
     alert($('#test').serialize()); 
    }); 
)

而在你的HTML：

<button id="tbutton">Serialize</button> 
<button id="fbutton">do nothing</button>

来源

2014-01-24 20:09:53 mart

我需要在一个函数内部执行该操作，因为单击取消将返回到上一页。我将编辑我的帖子。 – Tyler

谢谢，这帮助了我很多。我需要绑定页面加载的点击，然后从该 – Tyler

Yup调用该函数，欢迎您:) – mart

按钮点击JQuery序列化表单

回答

相关问题