用户从容器中单击时提交一组输入

Question

I have a form with a wide range of inputs. Each input is sent to the backend via ajax on change. However, I also have a group of inputs to collect an address as follows;

<div class="address">
    <input class="addrField" maxsize="100" name="street1" placeholder="street 1" size="40" type="text">
    <input class="addrField" maxsize="100" name="street2" placeholder="street 2" size="40" type="text">
    <input class="addrField" maxsize="100" name="city" placeholder="city" size="40" type="text">
    <input class="addrField" maxsize="100" name="postcode" placeholder="postcode" size="40" type="text">
    <input class="addrField" maxsize="100" name="country" placeholder="country" size="40" type="text">
</div>

i'm wondering if there is an efficient way to allow the user to edit the address fields and then submit all address inputs, as a group, when the user clicks out of the containing div?

I've tried using the change event eg

$(".address").change(function() { 
    var $inputs = $(this).children('input');
    submitInput($inputs);
});

however, the change event is fired each time the user changes input fields so I get a number of calls to the backend rather than one.

Is there a way to only call submitInput, when the user clicks out of the containing div?

FYI, submitInput is as follows:

function submitInput(group) {
    $.ajax({
      type: 'post',
      url: '/urladdress',
      data: group.serializeArray()
    });
};

NB. Putting a click event on the document is problematic because it's inefficient but also because it submits the form for every click outside the doc. For my purposes, the form should be submitted once when they have changed the form and then clicked to another part of the page (but not to another address field).

Answer 1

As per your requirement, you want to fire the submitInput event only when user click outside of the container div. Here is a code which can help you:

$(document).mouseup(function (e)
{
var container = $(".address");

if (!$("a").is(e.target) // if the target of the click isn't a link ...
    && !container.is(e.target) // ... or the container ...
    && container.has(e.target).length === 0) // ... or a descendant of the container
{
     var $inputs = $(this).children('input');
     submitInput($inputs);
}
});

Answer 2

Bind the onclick event to the container . Filter events coming from the form-container and the input elements. Submit the form when you get the event from the outer container.

 function submit(){ alert("Submitting."); } $("#viewport").click(function(event){ if(event.target.id !== "form-container" && event.target.nodeName !== "INPUT"){ submit(); } }) 

 #container{ padding:10px; background-color:blue; } #form-container{ margin:10px; padding:10px; background-color:red; } input{ margin:10px; } #viewport{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); } 

 <div id="viewport"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="form-container"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> </div> </div> </div>