Question

在一个表单中，我有一个按钮和一个图像......当我点击图像时，表单动作被调用，那个工作...但是当我点击按钮动作时没有被调用。是否有针对按钮的具体操作？

JS

$('#formUser').submit(function() {
  $(this).attr("action", "/secure/downloaduserinfo/" + reportName);
});


$('#formUser').submit(function() {
  $(this).attr("action", "/secure/deleteuser/" + reportName);
});

网络部分

<button type="button" id="deleteUserButton${statusReport.count}"></button>

<input id="downloadUserButton${statusReport.count}" type="image"/>

Answer 1

type="button"元素不是提交按钮，它们仅用于运行客户端代码。

如果您想提交表单，请使用type="submit"（或根本不指定类型属性，提交是默认设置。）

那就是说，我会避免依赖JavaScript。提供按钮，名称和值，并使用服务器上的来确定是否要下载或删除。

Answer 2

“image”类型的输入类似于“submit”，它确实提交了您的表单，这就是您的提交处理程序正常工作的原因。虽然“按钮”类型的输入不提交表单，但它看起来像一个按钮。

Answer 3

您有2个提交相同元素的侦听器，因此每次提交#formUser时，它都会使用它找到的第一个提交侦听器。

您可以使用onclick侦听器并将其绑定到要单击的特定元素。

我不确定你所使用的模板系统是如何绑定的，但我会使用一个类而不是id。

<button type="button" class="delete-user-button" id="deleteUserButton99">Delete</button>
<img src="http://placehold.it/200x200" class="download-user-button" id="downloadUserButton99"/>



<script>
    $('.delete-user-button').click(function() {
      // store object that was clicked
      var obj = $(this);

      // set that objects action attribute
      obj.attr("action", "/secure/deleteuser/" + obj.attr('id'));

      // show the action attribute's value
      alert(obj.attr('action'));
    });


    $('.download-user-button').click(function() {
      // store object that was clicked
      var obj = $(this);

      // set that objects action attribute
      obj.attr("action", "/secure/downloaduserinfo/" + obj.attr('id'));

      // show the action attribute's value
      alert(obj.attr('action'));
    });
    </script>

这是一个演示点击监听器操纵对象的小提琴：http://jsfiddle.net/chapmanc/HHfQT/2/

表单动作调用按钮

3 个答案: