具有大量可点击区域的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事件的处理程序绑定到整个表单.在该处理函数中,提交表单.

例如:

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提交方法:

this.submit();

我使用jQuery来触发提交,因为我想捕获提交事件以显示用于演示目的的消息.DOM提交方法不会触发jQuery的提交事件.请参阅Jquery提交与javascript提交.

编辑:

回答评论中的问题:

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

不,你可以把它放在这样的处理函数中:

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

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

除非您想要三种形式中的每一种都有不同的功能,否则我建议将一个处理程序绑定到所有这些形式.下面,我给了每个表单相同的类,并将处理程序绑定到该类.

如果页面上不存在其他表单,则可以绑定到每个表单标记: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关键字.在此上下文中,this指的是单击的特定表单元素,因为它是事件发生的位置.

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

请参阅this:作为DOM事件处理程序