High click area HTML form

Question

I am rephrasing a similar question that I posted yesterday. I’m not sure that I should have been doing this.

My goal is to create a form containing several input elements type="hidden'and a click area that covers a large area of ​​the page and includes several elements div. When clicking any of these areas of the page, the result should be the same as if someone had pressed the SUBMIT button. In this case, the result will lead the user to a new URL and pass the hidden parameter data contained in the form. (We are currently using URL parameters without a form, but we need to change our decision to use the form).

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

Hide result

. on() submit().
on() click().

---

, DOM:

this.submit();

jQuery , , . DOM jQuery. . Jquery submit vs. javascript submit.

---

:

:

(1) DOM, script?

, :

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>

Hide result

this keyword . this , , , .

, this , ,

. this: DOM

Answer 2

DOM ( ), . DOM document.getElementById( "IDHERE" ). OnClick call back event . .

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>

Hide result