jquery onChange doesnt work in IE

hey folks

i have a small script that i wrote up (I'm no jQuery expert - so this probably isnt written in the best way) - but it works in Firefox, but not in IE.

i have 2 fields - a radio set and then a select. when any one is changed - a script should run and via ajax, send back the result of a calculation of the 2 fields.

i will paste the relevant code below - would be happy to hear comments in general - and why the issue doesn't seem to work in IE. I can clearly see with the alerts, that it cant pick up the value from the radio set, but i am not sure why.

thanks!
<SCRIPT LANGUAGE="JavaScript">

	function freeStuff(dinner){
			
		if(dinner > 0){
			alert('You are entitled to ' + dinner + ' reservations');
			document.getElementById('x_NumberOfSeats').value = dinner;
		}
		document.getElementById('x_NumberOfSeats').value = dinner;
		//countCheck();
	}
	
//--></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$('select#x_NumberOfSeats').change(function() {
    var val1 = $(this).val();
	var val2 = $('input#x_ContributionType:checked').val();
    alert( val1 + ', ' + val2  );
	$('#resultArea').load('dinner-calc.asp', {'x_NumberOfSeats': val1, 'x_ContributionType' : val2})
    });


	$('input#x_ContributionType').change(function() {
    var val1 = $('select#x_NumberOfSeats').val();
	var val2 = $('input#x_ContributionType:checked').val();	//$(this:checked).val();
   alert( val1 + ', ' + val2  );
	$('#resultArea').load('dinner-calc.asp', {'x_NumberOfSeats': val1, 'x_ContributionType' : val2})
    });




});


</script>




<table>
<tr>
  <td colspan="2" align="left" valign="top" class="bottomBorder"><strong>Please  select an Inscription Category:</strong><br />
    A donation of $18,000 entitles you to 10 reservations<br />
    $3000 - 4 reservations<br />
    $500 - 2 reservations<br />
    $300 - 1 reservation </td>
  <td colspan="2" align="left" class="bottomBorder"><span id="cb_x_ContributionType">
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(10);" value="47" >
      New Dormitory Room ($35000)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(10);" value="48" >
      Perpetual Scholarship ($18000)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(4);" value="49" >
      Hesder Scholarship ($10000)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(4);" value="50" >
      Full Scholarship ($5000)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(4);" value="51" >
      Tuition Scholarship ($3600)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(2);" value="52" >
      Community  Outreach ($2500)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(2);" value="53" >
      Maintenance Scholarship ($1800)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(2);" value="54" >
      Diamond ($1500)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(2);" value="55" >
      Platinum ($1000)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(2);" value="56" >
      Gold ($750)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(2);" value="57" >
      Silver ($600)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(2);" value="58" >
      Founder ($500)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  onClick="freeStuff(1);" value="59" >
      Friend ($300)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  value="60" >
      Partner ($200)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  value="61" >
      Supporter ($150)</label>
    <br />
    <label>
      <input type="radio" id="x_ContributionType" name="x_ContributionType"  value="62" >
      Donor ($100)</label>
    <br />
    </span>&nbsp;</td>
</tr>
<tr>
  <td colspan="2" align="left" valign="top" class="bottomBorder">Please spell my name in the inscription as follows:</td>
  <td colspan="2" align="left" class="bottomBorder"><input name="x_InscriptionName" type="text" id="x_InscriptionName" value="" size="30" maxlength="50" /></td>
</tr>
<tr>
  <td colspan="2" align="left" valign="top" class="bottomBorder"><p>If you would also like to place a message  (20 words, including signature)&nbsp;</p>
    <p><span> <em>Inscription deadline May 25</em></span></p></td>
  <td colspan="2" align="left" class="bottomBorder"><textarea name="x_AdUpload" cols="25" rows="4"></textarea>
    </td>
</tr>
<tr>
  <td colspan="2" align="left" class="bottomBorder"><strong>Please make the following amount of reservations:</strong></td>
  <td colspan="2" align="left" class="bottomBorder"><span id="cb_x_NumberOfSeats2">
    <select id='x_NumberOfSeats' name='x_NumberOfSeats'>
      <option value="0">I won't be able to make it</option>
      <option value="1" >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>
    </select>
    </span>&nbsp;<br />
    Couvert is $200 per person. </td>
</tr>
<tr>
  <td align="left" class="ewTableHeader">&nbsp;</td>
  <td align="left" class="ewTableAltRow">&nbsp;</td>
  <td colspan="2" align="left" class="ewTableAltRow" id="resultArea" style="font-weight: bold;">Your total is: $0.00</td>
</tr>
</table>

Open in new window

kneidelsAsked:
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.

StealthyDevCommented:
Instead of:

input#x_ContributionType:checked

use:

input#x_ContributionType:radio
0
kneidelsAuthor Commented:
Thanks - but it didnt work, it only gave me the value of the first radio button - not the one actually checked.
0
kneidelsAuthor Commented:
ok, it seems that this format works:

var val2 = $('input[name=x_ContributionType]:checked').val();

the questions is how i can short-type this using "this" - because i already have the object from the function -

$('input#x_ContributionType').change(function() {
....
});

something like
var val1 = $(this).val();

which i am using for the select or a text field.

thanks

thanks
0

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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

XorceRCommented:
The issue is that ID values should be *unique* in HTML. Having the same ID for multiple elements is not really valid and it can cause strange problems if you use those IDs as selectors.
Just work with the name selector, especially in case of radio buttons / checkboxes.


 
$('input[name=x_ContributionType]').change(function() {
   var val = $('input[name=x_ContributionType]:checked').val();
});

Open in new window

0
StealthyDevCommented:
Yes XorceR is correct, you if you have more than one element, you can alternately iterate using .each().


0
kneidelsAuthor Commented:
thanks gang
0
StealthyDevCommented:
Can you post the correct syntax?
0
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
Web Browsers

From novice to tech pro — start learning today.