Radio changing DIV example?

Discussion in 'JavaScript' started by amaze, Jul 12, 2007.

0
  1. #1
    Hi,

    I am looking for an example of when someone changes a radio button (onChange) it changes the price of a product (DIV?). This will be dynamically created server-side and it could be one radio to say 10 radios. It will be more likely be 1-5 radios max...

    Thanks :)
     
    amaze, Jul 12, 2007 IP
  2. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #2
    IMO it's simpler with a select. Example:
    
<html>
<body>
  <select size="1" name="cboItem1" onchange="document.getElementById('idPrice').value = this.value;">
    <option value="" selected="yes">None</option>
    <option value="1.0">Women Suit</option>
    <option value="2.5">Men Suit</option>
    <option value="3.7">Men Hat</option>
  </select>
  <input id="idPrice" type="text" name="txtItem1UnitPrice" size="7" value=""/>
</body>
</html>
    Code (markup):
     
    ajsa52, Jul 12, 2007 IP
  3. amaze

    amaze Active Member

    Messages:
    594
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Thanks for your time... :)

    We can't use a select for "design" reasons.

    Also the value="" isn't the value we need to display we need to store the price in a seperate JS var(s). Also we need to display the price as "HTML" not in a select box.

    As a token gesture I will send the first person to do a robust and clean solution (works on all browsers) $10 by PP as my way of saying thanks! :) I am sure it will take a JS developer 3 minutes.. :p
     
    amaze, Jul 12, 2007 IP
  4. nabil_kadimi

    nabil_kadimi Well-Known Member

    Messages:
    1,065
    Likes Received:
    69
    Best Answers:
    0
    Trophy Points:
    195
    #4
    Hi i'm not a JS/AJAX specialist, but I currently learning javascript, so I cannot apply for this job, LOL

    I hope this example wil help:

    <head>
<script type="text/javascript">
function checkedButton(radioButtons){
	for(index=0;index<radioButtons.length;index++){
		if(radioButtons[index].checked== true )
			return index;
	}
}
function myFunction(){
	document.getElementById("mySpan").innerHTML=document.myForm.myRadio[checkedButton(document.myForm.myRadio)].value;
}
</script>
</head>
<body>
<form name="myForm">
0<input type="radio" name="myRadio" value="1" onchange="myFunction()"/><br />
1<input type="radio" name="myRadio" value="Two" onchange="myFunction()"/><br />
2<input type="radio" name="myRadio" value="III" onchange="myFunction()"/><br />
</form>
<span id="mySpan">Change This</span>
</body>
    HTML:
     
    nabil_kadimi, Jul 12, 2007 IP
  5. amaze

    amaze Active Member

    Messages:
    594
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Nabil: Thanks! All I need to do is have the "prices" (values) stored in a different var as the value of the radio button needs to be the productID if that makes sense? :)

    That looks to work great in Firefox btw! Your learning quickly by the looks of it!! :)
     
    amaze, Jul 12, 2007 IP
  6. nabil_kadimi

    nabil_kadimi Well-Known Member

    Messages:
    1,065
    Likes Received:
    69
    Best Answers:
    0
    Trophy Points:
    195
    #6
    You can try to change:
    0<input type="radio" name="myRadio" value="1" onchange="myFunction()"/><br />
    to:
    0<input type="radio" name="myRadio" value="1" onchange="myFunction('$5')"/><br />

    and
    function myFunction(){
document.getElementById("mySpan").innerHTML=document.myForm.myRadio[checkedButton(document.myForm.myRadio)].value;
}
    HTML:
    to 
    function myFunction(price){
document.getElementById("mySpan").innerHTML=price;
}
    HTML:
    So you have this 
    
<head>
<script type="text/javascript">
<!--
function myFunction(price){
    document.getElementById("mySpan").innerHTML=price;
}
//-->
</script>
</head>
<body>
<form name="myForm">
0<input type="radio" name="myRadio" value="1" onchange="myFunction('$1')"/><br />
1<input type="radio" name="myRadio" value="2" onchange="myFunction('$2.55')"/><br />
2<input type="radio" name="myRadio" value="3" onchange="myFunction('$3.99')"/><br />
</form>
<span id="mySpan">Change This</span>
</body>
    HTML:
    Note: I added also <!-- and //--> that I forgot on the previous reply, this tells browser that do not support javascript to skip it
     
    nabil_kadimi, Jul 12, 2007 IP
  7. amaze

    amaze Active Member

    Messages:
    594
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #7
    Excellent. Do you think this will work in all browsers (well say all main stream browsers)? If so let me know your PP address and I will send you $10! :)
     
    amaze, Jul 12, 2007 IP
  8. nabil_kadimi

    nabil_kadimi Well-Known Member

    Messages:
    1,065
    Likes Received:
    69
    Best Answers:
    0
    Trophy Points:
    195
    #8
    This is blocked by IE.
    I'll try to fix it
     
    nabil_kadimi, Jul 12, 2007 IP
  9. nabil_kadimi

    nabil_kadimi Well-Known Member

    Messages:
    1,065
    Likes Received:
    69
    Best Answers:
    0
    Trophy Points:
    195
    #9
    I tested this one on FF2 and IE6
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript</title>
<script type="text/javascript">
<!--
function myFunction(price){
	if(this.checked=true)
    document.getElementById("mySpan").innerHTML=price;
}
//-->
</script>
</head>

<body>
<form name="myForm">
0<input type="radio" name="myRadio" value="1" onclick="myFunction('$1')"/><br />
1<input type="radio" name="myRadio" value="2" onclick="myFunction('$2.55')"/><br />
2<input type="radio" name="myRadio" value="3" onclick="myFunction('$3.99')"/><br />
</form>
<span id="mySpan">Change This</span>
</body>
</html>
    HTML:
     
    nabil_kadimi, Jul 12, 2007 IP