0

For some reason this code doesn't work in Safari anyone have any clue to why? The first radio box is fine but as soon as I check the second radio box it doesn't calculate. http://jsfiddle.net/njyEP/

Thanks

Javascript: 

$("input[type=radio][name=radio],select").change(function() {

var radio = parseFloat($('#radio:checked').attr("tvalue")); 
var select = parseFloat($('#select').val());

$('#Total').text((select * radio)); 

});

html 

<form method="post" action="">
<select name="select" id="select" name="select"><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>
</select>

<div id="radioButtons"><input type="radio" class="multi" name="radio" id="radio" ivalue="1" tvalue="275" value="1185">Earlybird 1 Day Registration  $275<br>
<input type="radio" class="multi" name="radio" id="radio" ivalue="2" tvalue="475" value="1186">Earlybird 2 Day Registration  $475<br>
<input type="radio" class="multi" name="radio" id="radio" ivalue="3" tvalue="625" value="1187">Earlybird 3 Day Registration (all three days)  $625<br>
</div><div id="checkBoxes">

<br><label id="Total"></label><br></form>
Emil
  • 7,220
  • 17
  • 76
  • 135
momoterraw
  • 165
  • 2
  • 6
  • 15
  • 2
    For non-standard HTML attributes you should use the data-XXXXX notation like `data-tvalue` – devnull69 Nov 14 '12 at 09:29
  • Strange thing is this works in firefox and chrome. I wrote other part of the script using this method so I hope I don't need to re-write everything again... – momoterraw Nov 14 '12 at 09:39

2 Answers2

0

Your main issue is that every id attribute on a page can only appear once. It is semantically illegal to provide the same id attribute to multiple elements

devnull69
  • 16,402
  • 8
  • 50
  • 61
0

You shouldn't define multiple elements with the same id. To make your example work in Safari, change your second javascript line to

var radio = parseFloat($('input[type=radio]:checked').attr("tvalue"));

http://jsfiddle.net/2TCGp/

(Or, if you follow devnull69's advice and use data-tvalue, you can use jQuery's .data() method).

Ryan Madsen
  • 1,187
  • 1
  • 8
  • 14