Question

what is the simplest way to auto-submit form when the user click out side the div?
Just consider the div not the form elements.

<div id="formDiv">
<form id="search">
  <input id="target" type="text" value="Field 1" />
  <input type="text" value="Field 2" />
</form>
</div>

Answer 1

You can add a click handler to document that isn’t activated inside the <div>, like this:

$(document).click(function() {
  $("#search").submit();
});
$("#formDiv").click(function(e) {
  e.stopPropagation();
});

What this does, is any click on document, results in the <form id="search"> being submitted, but from inside the <div> we stop that click event from reaching (bubbling up to) document via event.stopPropagation().

If the #search form may be hidden at times and you only want this to kick in when it’s shown for example, no problem, just add a :visible to the selector, like this:

$("#search:visible").submit();