表单操作调用按钮

form action call button

本文关键字：按钮 调用 操作 表单      更新时间：2023-09-26

在表单中，我有一个按钮和一个图像...当我单击图像时，将调用表单操作，该工作...但是当我单击按钮时，不会调用操作。按钮有什么具体的事情要做吗？

.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"/>

type="button"元素不是提交按钮，它们的存在只是为了运行客户端代码。

如果要提交表单，请使用type="submit"（或者根本不指定类型属性，默认为提交）。

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

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

您有 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/

相关文章：