asked on

add event listener to php form

Hi experts, I am using bootstrap 3
I have a page with 4 dropdown options and 4 number INPUT with different ids (see dropdown 1 below)
How can I add an eventlistener to either the dropdown or number input changes its value ?
What I am trying to accomplish is calculate the price on the fly (ajax and php)
P.S. I can calculate the price IF THE USER CLICKS A BUTTON, but I want to do the same calculations WITHOUT THE USER CLICK THE CALCULATE PRICE BUTTON

Tnx for any help or suggestions

<div class="form-row">
<div class="form-group col-sm-5">
<label for="sel1" class="control-label">Select list :</label>
<select class="input-large" id="sel1">
<option value="399">Nativity Set - 399.00   </option>
<option value="189">Deer Set - 189.00   </option>
<option value="35">Sheep - 35.00  </option>
<option value="35">Cow - 35.00  </option>
<option value="35">Donkey - 35.00  </option>
<option value="35">Goat - 35.00  </option>
</select>
</div>

<div class="form-group">
<label for="iQ1" class="col-sm-2 control-label">Quantity</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="iQ1" value="1">
</div>
</div>
</div>

Julian Hansen

You can do this (assuming your code is in a form - if not chose some other container that wraps the controls you want to monitor

$('form select, form input').change(function() {
  console.log('changed');
});

Open in new window

This code will monitor any changes on select and input controls - when it fires simple do your Price update in the callback.

crescue

ASKER

Great, it works as a charm

Can I specify the type of input, for example I want to run the function ONLY if a NUMERIC input has been changed

Tnx 4 ur help

Julian Hansen

Yes you can just add the attribute selector to input like this

$('form select, form input[type="numeric"]').change(function() {
  console.log('changed');
});

Open in new window

crescue

ASKER

Yes, but I want to trigger the action ONLY when a NUMERIC INPUT has changed cause I have several other inputs
Tnx

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

crescue

ASKER

Thank for all your help.

Julian Hansen

You are welcome.