具有大可点击区域的 HTML 表单

Question

我重新表述了我昨天发布的一个类似问题。我不确定这是否是我应该采取的方式。

我的目标是创建一个表单，其中包含多个输入type="hidden' 元素和一个覆盖页面大部分区域并包含多个div 元素的点击区域。当单击该页面区域中的任何一个时，结果应该与单击提交按钮时的结果相同。在这种情况下，结果会将用户带到一个新的 URL 并传递表单中包含的隐藏参数数据。 （我们目前使用没有表单的 URL 参数来执行此操作，但需要更改我们的解决方案以使用表单）。

<div>    <!-- start of clickable area of page -->
<form>
    <input type="hidden"...>
    <input type="hidden"...>
    <div>
        xxxxx
    </div>
    <div>
        xxxxx
    </div>
</form>
</div>    <!-- end of clickable area of page -->

Answer 1

由于您的表单除了提交之外不需要任何用户交互，您可以将onclick event 的处理程序绑定到整个表单。在该处理函数中，提交表单。

例如：

jQuery('form').on('click', function() {
  jQuery(this).submit();
});


/* This part purely for demonstration purposes */
jQuery('form').on('submit', function() {
  console.log('SUBMITTED!');
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="hidden" ...>
  <input type="hidden" ...>
  <div>
    xxxxx
  </div>
  <div>
    xxxxx
  </div>
</form>

有关参考，请参阅on() 和 submit()。
作为on() 的替代品，您可以使用click()。

---

顺便说一句，您也许可以只使用DOM submission method：

this.submit();

我使用 jQuery 来触发提交，因为我想捕获提交事件以显示一条消息以用于演示目的。 DOM submit 方法不会触发提交事件，而 jQuery 会。见Jquery submit vs. javascript submit。

---

编辑：

回答评论中的问题：

(1) 如果我使用 DOM 方法，我需要不同的脚本标签吗？

不，你可以像这样把它放在处理函数中：

jQuery('form').on('click', function() {
  this.submit();
});

(2) 如果我在一个页面上有三个表单名称不同的表单，那么三个 jquery/js 代码块，每个代码块在单引号中都有不同的表单名称，例如 jQuery('form1').on( 'click', function() and jQuery('form2').on('click', function() etc...似乎是一个很好的解决方案 - 对吗？

除非您希望这三种表单的每一种都具有不同的功能，否则我建议您使用一个绑定到所有表单的处理程序。下面，我为每个表单赋予了相同的类，并将处理程序绑定到该类。

如果页面上不存在其他表单，您可以绑定到每个表单标签：jQuery('form')。我更喜欢使用一个类来让事情井井有条。稍后我可能会添加另一个我不想受此处理程序影响的表单，忘记有一个处理程序绑定到 每个 表单。

jQuery('.clickform').on('click', function() {
  jQuery(this).submit();
});

/* This part purely for demonstration purposes */
jQuery('.clickform').on('submit', function() {
  var name = jQuery(this).data('name');
  console.log('Submitted ' + name);
  return false;
});

.clickform {
  border: 1px solid gray;
  margin: 0 0 .5em;
  padding: .25em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="clickform" action="" method="post" enctype="application/x-www-form-urlencoded" data-name="form #1">
  <input type="hidden" name="hidden1" value="value1">
  <input type="hidden" name="hidden2" value="value2">
  <div>Form 1, Content 1</div>
  <div>Form 1, Content 2</div>
</form>

<form class="clickform" action="" method="post" enctype="application/x-www-form-urlencoded" data-name="form #2">
  <input type="hidden" name="hidden1" value="value1">
  <input type="hidden" name="hidden2" value="value2">
  <div>Form 2, Content 1</div>
  <div>Form 2, Content 2</div>
</form>

<form class="clickform" action="" method="post" enctype="application/x-www-form-urlencoded" data-name="form #3">
  <input type="hidden" name="hidden1" value="value1">
  <input type="hidden" name="hidden2" value="value2">
  <div>Form 3, Content 1</div>
  <div>Form 3, Content 2</div>
</form>

注意处理函数中this keyword 的使用。在这种情况下，this 指的是被点击的特定表单元素，因为那是事件起源的地方。

当函数用作事件处理程序时，其this 被设置为触发事件的元素

见this: As a DOM event handler

Answer 2

而不是渲染多个 DOM 对象（隐藏的输入对象），这会消耗性能。您可以标识您现有的 DOM 对象并使用 document.getElementById("IDHERE").onClick 回调事件并提交。请发现这个 sn-p 很有用。

document.getElementById("IDHERE").onclick = function() {
  // write you buttons onsumit callback here here
  alert("this.id");
};

<div>
  <form id="IDHERE">
    <!-- ID can be given to any object like div or span all you need is the range witntin the click event should work -->
    <!--  not required  
    <input type="hidden"...>
    <input type="hidden"...>
    use YOUR HTML
  -->
    <div>

    </div>
    <div>
      xxxxx
    </div>
  </form>
</div>