1

Okay, after messing around with this for numerous days, and reading through countless help pages, it's time to ask for help. This code has no problems. Whatever text I enter into the form will show in the popup box. Good.

<script>
function yesorno1(){
 var form = document.getElementById('escalation');
 if(form.value != "")
  alert("You entered: " + form.value)
 else
  alert("There is some problem")  
}
</script>
<input type='text' id='escalation' />
<input type='button' onclick='yesorno1()' value='Submit' />

If I change the HTML from a form to a radio button or drop-down selector, the popup box will always only display the value from the first radio or first drop down option in the list. For example, in the below code, the first radio option is "yes" and the second radio option is "no." Regardless if I radio yes or no, the popup box always gives "yes."

<script>
function yesorno2(){
 var rad = document.getElementById('escalation2');
 if(rad.value != "")
  alert("You entered: " + rad.value)
 else
  alert("There is some problem")  
}
</script>

Is this an escalation?<br>
<input type='radio' id='escalation2' value='yes'> Yes<br>
<input type='radio' id='escalation2' value='no'> No<br><br>
<input type='button' onclick='yesorno2()' value='Submit' />

Does anyone know of a way to code this so that radio yes will give popup message "yes" and radio no will give popup message no?

Robert Siemer
  • 32,405
  • 11
  • 84
  • 94
JeremyCanfield
  • 633
  • 11
  • 24
  • It already asked.please look here http://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button – Shaiful Islam Nov 03 '14 at 00:50
  • No two elements in HTML can have the same ID on the same page. It will always only find the first one. Also the first one always has a value of `yes` doesn't mean its checked – OJay Nov 03 '14 at 00:51
  • Here you go. A working jsfiddle: http://jsfiddle.net/ianhazzard/vj1o3xcq/ – Ian Hazzard Nov 03 '14 at 01:03
  • Thanks for all the help guys, I really appreciate it. And thank you for teaching me what I was doing wrong. I'm all set now. Thank a lot! – JeremyCanfield Nov 04 '14 at 00:01

1 Answers1

1

<script>
function yesorno2(){
 var rad = document.getElementById('theForm').elements['escalation2'];
 if(rad.value != "")
  alert("You entered: " + rad.value)
 else
  alert("There is some problem")  
}
</script>
<form id='theForm'>
Is this an escalation?<br>
<input type='radio' name='escalation2' value='yes'> Yes<br>
<input type='radio' name='escalation2' value='no'> No<br><br>
<input type='button' onclick='yesorno2()' value='Submit'>
</form>

You made two mistakes:

  • the common attribute on the radio buttons is name, not id
  • don’t “grab” the radio button, go for the form element: it contains an array (elements) which gives you direct access to the radio buttons “as a group”. There you find the value.

Note: If using Firefox, you need version 33 (released 2014-10-14) or above. RadioNodeList finally reached Firefox.

Robert Siemer
  • 32,405
  • 11
  • 84
  • 94
  • Man, thanks so much. This works like a charm. And thank you also for teaching me the concept, I really appreciate the help! – JeremyCanfield Nov 03 '14 at 23:59
  • Hey Robert, sorry for taking such a long time for the up vote. I'm not a frequent user, so it's taken me a while to get enough reputation and to figure out how things work here on Stack Overflow, but I wanted to make this right since you helped me out on this one :) – JeremyCanfield Mar 28 '15 at 03:48