Run Function on every change in an input element: JQuery

Question

I have a form called "wizard". Everytime any input element is changed, I want a Javascript function to run and calculate something. I have the following:

// update hidden field "channels" in wizard based on servers/cores
$('form#wizard select[name=servers], form#wizard select[name=cores]').change(function() {
 var channels = parseInt($('form#wizard select[name=servers]').val()) * parseInt($('form#wizard select[name=cores]').val());
 $('#yellow').val(channels);
 $('#yellow').change();
 alert(channels);
});

The above is wrapped around:

$(document).ready(function() {

The above does not seem to do what I want. Do I have to specifically have to have each input field with an onchnage action??

Thanks all

EDIT

Sorry I meant select elements.

<form id="wizard">
Number of server(s) you are thinking of purchasing licenses for:
<select style="margin-left: 10px; font-size:15px; padding:1px;" name="servers" id="servers"><option value="1" selected="">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option></select>
server(s) <br/><br/> Each server will have: <select  style="font-size:15px; padding:1px;" name="cores" id="cores"><option style="margin-left: 10px;" value="115">a single core CPU</option><option value="230" selected="">a dual core CPU</option><option value="500">a quad core CPU</option><option value="960">an octo core CPU</option></select><br/><br/> And will be running: <select style="margin-left: 10px; font-size:15px; padding:1px; margin-right: 10px;" name="app" id="app"><option value="Asterisk" selected="">Asterisk®</option><option value="FreeSWITCH">FreeSWITCH</option></select> On
<select style="margin-left: 10px; font-size:15px; padding:1px;" name="cores" id="cores"><option value="Linux">Linux</option><option value="Solaris 10">Solaris 10</option><option value="OpenSolaris">OpenSolaris</option></select>
<br /><br />
</form>

EDIT2

Is it a problem if this form is in a div that is hidden? I am grabbing at straws here, i have no idea how to fix this!

When I remove from display:none, it for some reason works! Btw, I am using this with fancybox jquery plugin.

http://fancybox.net/js/fancybox/jquery.fancybox-1.2.1.js

Well for one it's clear that you're using an id as well as a name on the elements. Since you're already referring to the input elements by name, you might as well refer to them by id since it's faster (apparently). — Hooray Im Helping
– Hooray Im Helping, Commented Oct 10, 2009 at 23:42
Sorry, I am a little slow. But will this solve the problem or is this a suggestion for faster execution? Thanks — Abs
– Abs, Commented Oct 10, 2009 at 23:45
I made that change and it didn't get the damn thing to change! — Abs
– Abs, Commented Oct 11, 2009 at 0:19

Jojo · Accepted Answer · 2009-10-11 00:02:37Z

3

What is "#yellow"?

$('form#wizard select').change(function() {
  var channels = (parseInt($('form#wizard select[name=servers]').val(), 10) *
    parseInt($('form#wizard select[name=cores]:first').val(), 10));
  $('#yellow').val(channels);
  $('#yellow').change();
  alert(channels);
});

You have two select's with a name and ID of cores, that may be the problem. I added the 10 to parseInt as generally that is what people want and parseInt can do strange things without it. Does "#yellow" also have a change event attached to it? if not you dont need to trigger the change, even then, setting its value should evoke the change event.

answered Oct 11, 2009 at 0:02

Jojo

3481 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abs Over a year ago

Yellow is just a span element that is highlighted yellow. I am just trying to get the calculation to show up on there, no it doesn't have a change event on it. Will test your suggestion.

Abs Over a year ago

Ok, I changed the ID, but this hasn't got the alert to appear. :(

Jojo Over a year ago

Can you get the values of servers and cores without computing them? I.E. alert($('form#wizard select[name=servers]').val()); alert($('form#wizard select[name=cores]').val());

Collectives™ on Stack Overflow

Run Function on every change in an input element: JQuery

EDIT

EDIT2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

EDIT2

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related