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的处理程序绑定到整个表单。在该处理函数中，提交表单。

例如：

＆＃13;

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

＆＃13;

<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>

＆＃13;

供参考，请参阅on()和submit() 作为on()的替代方案，您可以使用click()。

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

this.submit();

我使用jQuery触发提交，因为我想捕获提交事件以显示用于演示目的的消息。 DOM提交方法不会触发提交事件，而jQuery会这样做。请参阅Jquery submit vs. javascript submit。

编辑：

回应评论中的问题：

（1）如果我使用DOM方法，我需要一个不同的脚本标签吗？

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

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

（2）如果我在一个具有不同表单名称的页面上有三个这样的表单，那么就有三个jquery / js代码块，每个代码块在单引号中都有不同的表单名称，例如jQuery（＆＃39; form1＆＃39 ;）。（＆＃39;点击＆＃39;，功能（）和jQuery（＆＃39; form2＆＃39;）。on（＆＃39;点击＆＃39;，功能（）等......似乎是一个很好的解决方案 - 这是正确的吗？

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

如果页面上不存在其他表单，您可以绑定到每个表单标记：jQuery('form')。我更喜欢用一堂课来保持井井有条。我可能会在以后添加另一个表单，我不希望受到此处理程序的影响，忘记了每个表单都绑定了一个处理程序。

＆＃13;

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;
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意在处理函数中使用this keyword。在此上下文中，this指的是被点击的特定表单元素，因为它是事件发生的地方。

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

请参阅this: As a DOM event handler

Answer 2

而不是渲染多个DOM对象（隐藏的输入对象），这是性能耗尽。您可以使用现有的DOM对象ID并使用document.getElementById（＆＃34; IDHERE＆＃34;）。onClick回调事件并提交。请查找此代码段。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案:

编辑：