Question

我们希望我们的用户点击“转移”按钮，然后在下面的javascript中填充值。

但是，当我点击按钮时，它不会触发。

任何想法我做错了什么以及如何解决它？

谢谢

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="form1">
<input type="text" id="user" name="user" />
<input type="password" id="pass" name="pass" />
<input type="button" value="Transer" />
</form>
<script>
$.post("exhume.aspx",
    { data: JSON.stringify({ LoginName: $("#user").val(),Password: $("#pass").val() }) },
    function (data) {
        var token = JSON.parse(data);
    }
);

</script>
</body>
</html>

Answer 1

该按钮没有click handler，

试试这个，

$('#form1 input[type="button"]').click(function(){
    $.post("exhume.aspx",
       { data: JSON.stringify({ LoginName: $("#user").val(),Password: $("#pass").val() }) },
         function (data) {
         var token = JSON.parse(data);
       }
    );    
})

Answer 2

这里有几件事：

1.您需要将该功能附加到提交事件 2.您需要阻止表单的默认行为，以便页面不会重新

 $("#form1").on("submit", function(e) {
    e.preventDefault();
    $.post("exhume.aspx",
        { data: JSON.stringify({ LoginName: $("#user").val(),Password: $("#pass").val() })      },
        function (data) {
        var token = JSON.parse(data);
    }
  );
});

Answer 3

我想你想要

$('#form1').on('submit', function() {
    $.post("exhume.aspx",
        { data: JSON.stringify({ LoginName: $("#user").val(),Password: $("#pass").val() }) },
        function (data) {
            var token = JSON.parse(data);
        }
    );
});

另外，将“转移”按钮的类型更改为submit

Answer 4

你过分复杂了。您无需手动创建数据字符串。

您可以这样做：

HTML：

<form id="form1" action="exhume.aspx">
  <input type="text" id="user" name="user" />
  <input type="password" id="pass" name="pass" />
  <input type="button" value="Transer" />
</form>

JS：

$('#form1').on('submit', function(e){
  e.preventDefault();
  var $form = $(this);
  $.post( $form.attr('action'), $form.serialize(), function(){
    alert('The form was submitted!');
  }); 
});

即使JS不可用，这种方法也可以提交表单。

Answer 5

script标记中的代码在页面加载时正确执行，这意味着加载页面时POST正确。要在click事件上触发它，您需要将事件处理程序附加到按钮。否则，当单击按钮时，浏览器无法知道执行代码。

<form id="form1">
<input type="text" id="user" name="user" />
<input type="password" id="pass" name="pass" />
<input id="transfer" type="button" value="Transer" />
</form>
<script>
$("#transfer").click(function() {
    $.post("exhume.aspx",
        { data: JSON.stringify({ LoginName: $("#user").val(),Password: $("#pass").val() }) },
        function (data) {
            var token = JSON.parse(data);
        }
    );

});

</script>

更简单的选择是简单地绑定到表单上的submit事件：

<form id="form1">
<input type="text" id="user" name="user" />
<input type="password" id="pass" name="pass" />
<input type="button" value="Transer" />
</form>
<script>
$("#form1").submit(function() {
    $.post("exhume.aspx",
        { data: JSON.stringify({ LoginName: $("#user").val(),Password: $("#pass").val() }) },
        function (data) {
            var token = JSON.parse(data);
        }
    );    
});

</script>

有人可以告诉我为什么单击按钮时此表单不提交？

5 个答案: