Question

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

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

Answer 1

您的代码的问题是，当您单击“序列化”按钮时，您正在调用测试功能，并且在该功能中，您将事件单击按钮绑定到某个功能。

尝试更改此内容：

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

在你的HTML中：

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

Answer 2

随着@ mart和其他人的帮助我想出了这个：

绑定按钮：

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

功能：

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

感谢。

Answer 3

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

按钮单击时JQuery序列化表单

3 个答案: