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&#160;&#160; </option>
          <option value="189">Deer Set - 189.00&#160;&#160; </option>
          <option value="35">Sheep - 35.00&#160;&#160;</option>
          <option value="35">Cow - 35.00&#160;&#160;</option>
          <option value="35">Donkey - 35.00&#160;&#160;</option>
          <option value="35">Goat - 35.00&#160;&#160;</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>
crescueAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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.
crescueAuthor Commented:
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 HansenCommented:
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

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

crescueAuthor Commented:
Yes, but I want to trigger the action ONLY when a NUMERIC INPUT has changed cause I have several other inputs
Tnx
Julian HansenCommented:
Ok, then just take out the select selector.
$('form input[type="numeric"]').change(function() {
  console.log('changed');
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
crescueAuthor Commented:
Thank for all your help.
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.