Onclick on a Div

Question

Is there a event in HTML, through which, I can execute a function wherever there is any change/click in any element/member of a <div>? For example in the code below, I want to execute a function or some lines of code whenever there is any change within any elements of the div "customer". Will a normal onclick work? Any ideas?

<div id="customer">
<h3>Customer Information</h3>
<form id="customerinfo" name="customerinfo" style="font-size:14px">
   First Name:&nbsp;<input name="first_name" size="15" type="text" value="Parul">                                                                               
   &nbsp;Last Name:&nbsp;<input name="last_name" size="15" type="text" value="Kashyap"><br>
   <br>
   EMail:&nbsp;<input name="email_address" size="25" type="email" value="Parul@Gynapsys.com"><br><br>
   Phone:&nbsp;<input maxlength="3" name="area_code" size="3" type="tel" value="650">
   &nbsp;<input maxlength="7" name="number" size="7" type="tel" value="3301096">
</form>
<br>
Select Order Type:&nbsp; 
<select id="deliverytype" onchange="deliverytype(this)">
   <option value="pickup" selected>
      Pickup
   </option>
   <option value="delivery">
      Delivery
   </option>
</select>
<br>
<p></p>
<div id="deliverydetails" style="display:none;">
   <h3>Delivery Information</h3>
   <form id="deliveryinfo" name="deliveryinfo" style="font-size:14px">
      Delivery Contact Phone:&nbsp;
      <input maxlength="3" name="darea_code" size="3" type="tel" value="650">
      &nbsp;
      <input maxlength="7" name="dnumber" size="7" type="tel" value="3301096"><br><br>
      Delivery Address:<br><br>
      Street Number:&nbsp;
      <input maxlength="5" name="street_number" size="5" type="text" value="123">
      &nbsp;Street:&nbsp;
      <input name="street" size="20" type="text" value="Speedline Street"><br><br>
      City:&nbsp;
      <select id="city" name="city" onchange="" onfocus="">
         <option selected value="San Carlos">
            San Carlos
         </option>
         <option value="Mukilteo">
            Mukilteo
         </option>
         <option value="Los Angeles">
            Los Angeles
         </option>
      </select>
      &nbsp;&nbsp;&nbsp;&nbsp;Province:&nbsp;
      <select id="province_state" name="province_state" onchange="" onfocus="">
         <option selected value="CA">
            CA
         </option>
         <option value="WA">
            WA
         </option>
         <option value="NY">
            NY
         </option>
      </select>
      &nbsp;&nbsp;&nbsp;&nbsp;Zip:&nbsp;
      <select id="postal_zip" name="postal_zip" onchange="" onfocus="">
         <option selected value="94070">
            94070
         </option>
         <option value="90208">
            90208
         </option>
         <option value="94011">
            94011
         </option>
      </select>
      <br><br>
      Delivery Inst:&nbsp;
      <input name="delivery_instructions" size="40" type="text" value="Use front door and ring the bell on right">
   </form>
</div>
<!--End of deliverydetails--><br><br>
<div>

onclick will fire only when you click on it. You want the onchange event — Ruan Mendes, Mar 14 '14 at 17:25
onChange doesn't show up with a div in dreamweaver. Let me try it — BrownTownCoder, Mar 14 '14 at 17:26
`onclick` is simply working when you click on it. you can use `onchange` or `onselect`, which also works as their name - `onchange` works when you change something and `onselect` works when you select something. — rolory, Mar 14 '14 at 17:26
@Fallenreaper I am new to HTML and Javascript. Do you have a suggestion for a better software for HTML and Javascript coding? — BrownTownCoder, Mar 14 '14 at 17:29
@Ritwick I use NotePad++, VIM, and sometimes Visual Studios 2013 (because they made some pretty solid strides in WebDev tools) — Fallenreaper, Mar 14 '14 at 17:34

score 2 · Accepted Answer · edited May 23 '17 at 11:49

Listen for the change event. In the latest browsers, it bubbles up to the div.

document.getElementById('customer').addEventListener('change', function(e) {
    e = e || window.event
    alert('changed ' + e.target.id + ' to ' + e.target.value);
});

http://jsfiddle.net/mendesjuan/LaZgr/1/

If you need to support IE 8 and below, you can set listeners on all the fields yourself or see Does the onchange event propagate?

One of the answers there explains how to use jQuery to workaround it

// In jQuery 1.4+ the change event bubbles in all browsers, including IE.    
$('div.field_container').change(function() {
   // code here runs in all browers, including IE.
});

Onclick on a Div

1 Answers1