getting value from radio buttons group

@me_3Mar 18.2012

Hi all,

it might be trival for you but I am new with java and got stuck so hope you can help me with that…

I need to get average grade from each of few modules here in code, I used radio buttons and want to get the value from the group, dont know do I need to put all of them in labels or is there any other way to get value out of them and display the average than?

your help appreciated ?

THANKS!

[CODE]<p id=”one” class=”hiddenDiv” [B]form name=”semester1[/B]” action”#”> [B]can these name be usefull somehow?[/B] whats your scores in these modules?</br> Web developement: <label> <input type = “radio” name = “web” [B]labels here or just name=”web” can be used?[/B] value = “fail” /> 0-39 </label> <label> <input type = “radio” name = “web” value = “59” /> 40-59 </label> <label> <input type = “radio” name = “web” value = “75” /> 60-75 </label> <label> <input type = “radio” name = “web” value = “89” /> 76-89 </label> <label> <input type = “radio” name = “web” value = “100” /> 90-100 </label> </br></br> Programming : <label> <input type = “radio” name = “pr” value = “fail” /> 0-39 </label> <label> <input type = “radio” name = “pr” value = “59” /> 40-59 </label> <label> <input type = “radio” name = “pr” value = “75” /> 60-75 </label> <label> <input type = “radio” name = “pr” value = “89” /> 76-89 </label> <label> <input type = “radio” name = “pr” value = “100” /> 90-100 </label> </br></br> Interactive case study: <label> <input type = “radio” name = “ics” value = “fail” /> 0-39 </label> <label> <input type = “radio” name = “ics” value = “59” /> 40-59 </label> <label> <input type = “radio” name = “ics” value = “75” /> 60-75 </label> <label> <input type = “radio” name = “ics” value = “89” /> 76-89 </label> <label> <input type = “radio” name = “ics” value = “100” /> 90-100 </label> </br> <input type = “button” name = “submit” onclick=calc(average) value=”submit” name=”submit” type=”submit” [B]i need these button to do the job of getting average from all modules and let say showing average on alert…[/B]/>[/CODE]

to post a comment

JavaScript

7 Comments(s) _↴

@WolfShadeMar 19.2012 — #Is this HTML5? I've never seen a paragraph tag with FORM as an attribute. (I ask sincerely, because I've not looked at HTML5, yet, since it hasn't been standardized.)

In JavaScript, you can get the value of the selected radio buttons as such.

[CODE]
 var r1 = document.getElementById("web").value;
 var r2 = document.getElementById("pr").value;
 var r3 = document.getElementById("ics").value;
 [/CODE]

@me_3authorMar 19.2012 — # I've never seen a paragraph tag with FORM as an attribute.
[/QUOTE]
hi ?

paragraph is used for hide.show div

used FORM as the name there as well because I didnt know where to put it else...

In JavaScript, you can get the value of the selected radio buttons as such.

[CODE]
 var r1 = document.getElementById("web").value;
 var r2 = document.getElementById("pr").value;
 var r3 = document.getElementById("ics").value;
 [/CODE]

[/QUOTE]

yes! i think i tried to hard and got that errors yesterday,

now I wrote different calculate function and hide/show div works fine but function dont calculate average yet....

can someone check where I did mistake there

THANKS ?

[B]is these funcion right for gettng average grade from buttons? [/B]

[CODE]function grade (r1, r2, r3, total)  { 

 var r1 = document.getElementById("web").value;
 var r2 = document.getElementById("pr").value;
 var r3 = document.getElementById("ics").value;
 total = (  (r1 + r2 + r3) /3 )  ; 
 }[/CODE]

[B]first input text name grade is for showing total grade but it dont work at that stage[/B]

[CODE]<body>
 <input type="text" name="grade" id="grade" value="" size="2" readonly="readonly">
 hello student1
 <form id="FormName" action="blah.php" method="get" name="FormName">
 <select name="selectName" size="1" onchange="showDiv(this.value);">
 <option value="">Choose semester</option>
 <option value="one">first</option>
 <option value="two">second</option>
 </select>
 </form>
 <p id="one" class="hiddenDiv" form name="semester1" action"#"> 
 whats your scores in these modules?</br>
 Web developement:
 <label> <input type = "radio"  name = "web" 

 value = "fail"  /> 0-39 </label>
 <label> <input type = "radio"  name = "web" 

 value = "59" /> 40-59 </label>
 <label> <input type = "radio"  name = "web" 

 value = "75" /> 60-75 </label>
 <label> <input type = "radio"  name = "web" 

 value = "89" /> 76-89 </label>
 <label> <input type = "radio"  name = "web" 

 value = "100" /> 90-100 </label>
 </br></br>
 Programming: <label> <input type = "radio"  name = "pr" 

 value = "fail"  /> 0-39 </label>
 <label> <input type = "radio"  name = "pr" 

 value = "59" /> 40-59 </label>
 <label> <input type = "radio"  name = "pr" 

 value = "75" /> 60-75 </label>
 <label> <input type = "radio"  name = "pr" 

 value = "89" /> 76-89 </label>
 <label> <input type = "radio"  name = "pr" 

 value = "100" /> 90-100 </label>
 </br></br>
 Interactive case study: <label> <input type = "radio"  name = "ics" 

 value = "fail" /> 0-39 </label>
 <label> <input type = "radio"  name = "ics" 

 value = "59" /> 40-59 </label>
 <label> <input type = "radio"  name = "ics" 

 value = "75" /> 60-75 </label>
 <label> <input type = "radio"  name = "ics" 

 value = "89" /> 76-89 </label>
 <label> <input type = "radio"  name = "ics" 

 value = "100" /> 90-100 </label>		</br>
 <input type = "button"  name = "submit" 

 onclick="grade(total)" value="submit" name="submit" type="submit" />	[/CODE]

[B]on click here button should display total grade on the readonly box above[/B]

[B]THANK YOU FOR SUGGESTIONS ![/B]

@WolfShadeMar 19.2012 — #Sorry. I was really tired when I posted my last response.

You can't get direct value from a radio or checkbox; you have to get the index of the selected radio and get that value of that.

Also, you had originally set the function to accept parameters, then tried to overwrite those parameters.

Also, all form elements need to be contained within the form tags.

The radio buttons needed an ID, as well. And you really should NOT name a submit button "submit" as it conflicts with JavaScripts ".submit()" function. I renamed it "submitBtn", and it does not actually submit the form, it just calls the function.

Try this:

[CODE]
 <body>
 <form id="FormName" action="blah.php" method="get" name="FormName">
 <input type="text" name="avgGrade" id="avgGrade" value="" size="3" readonly="readonly">
 hello student1
 <select name="selectName" size="1" onchange="showDiv(this.value);">
 <option value="">Choose semester</option>
 <option value="one">first</option>
 <option value="two">second</option>
 </select>
 <p id="one" class="hiddenDiv"> 
 whats your scores in these modules?</br>
 Web developement:
 <input type = "radio"  name = "web" id="web"  value = "0"  /> 0-39 
 <input type = "radio"  name = "web" id="web"  value = "59" /> 40-59 
 <input type = "radio"  name = "web" id="web"  value = "75" /> 60-75 
 <input type = "radio"  name = "web" id="web"  value = "89" /> 76-89 
 <input type = "radio"  name = "web" id="web"  value = "100" /> 90-100 
 </br></br>
 Programming:  <input type = "radio"  name = "pr" id="pr"  value = "0"  /> 0-39 
 <input type = "radio"  name = "pr" id="pr"  value = "59" /> 40-59 
 <input type = "radio"  name = "pr" id="pr"  value = "75" /> 60-75 
 <input type = "radio"  name = "pr" id="pr"  value = "89" /> 76-89 
 <input type = "radio"  name = "pr" id="pr"  value = "100" /> 90-100 
 </br></br>
 Interactive case study:  <input type = "radio"  name = "ics" id="ics"  value = "0" /> 0-39 
 <input type = "radio"  name = "ics" id="ics"  value = "59" /> 40-59 
 <input type = "radio"  name = "ics" id="ics"  value = "75" /> 60-75 
 <input type = "radio"  name = "ics" id="ics"  value = "89" /> 76-89 
 <input type = "radio"  name = "ics" id="ics"  value = "100" /> 90-100 		</br>
 <input type = "button" onclick="grade();" value="submit" name="submitBtn" /></p>
 </form>
 <script type="text/javascript">
 function grade() { 

 var r1 = document.forms["FormName"].web;
 var r2 = document.forms["FormName"].pr;
 var r3 = document.forms["FormName"].ics;
 var v1 = getSelectedRadio(r1);
 var v2 = getSelectedRadio(r2);
 var v3 = getSelectedRadio(r3);
 var z1 = r1[v1].value;
 var z2 = r2[v2].value;
 var z3 = r3[v3].value;
 var avgGrade = document.getElementById("avgGrade");
 var total = ((parseInt(z1) + parseInt(z2) + parseInt(z3))/3).toFixed(0);
 avgGrade.value = total;
 }
 function getSelectedRadio(btnGroup) {
 if(btnGroup[0]) {
 for(var i=0; i<btnGroup.length; i++) {
 if(btnGroup[i].checked) { return i; }
 }
 }
 else {
 if(btnGroup.checked) { return 0; }
 }
 return -1;
 }
 </script>
 </body>
 [/CODE]

@me_3authorMar 27.2012 — #WolfShade dont know how to thank you for your help!

I just have a lot to learn, and think to start with functions ? so if can recommend any good book/tutorials about ....

...the code is great thank you for it!

what if I want to use the result of [B] function grade[/B] to show some pictures or pass/failed box can you point where/what should I do/use

THANK YOU! You've been really helpful!

@WolfShadeMar 27.2012 — #Well, if you wanted to display a picture based upon the value, I'd create a div and give it an id, height, and width, and populate it with a non-breaking space (&nbsp? so that it will take up space.

Then in the grade function, use a if/else to decide which image to use, and populate the div with the <img> tag.

Something like:

[CODE]
 <div id="thisImage" style="height:200px; width:300px;">&nbsp;</div>
 [/CODE]

And modify the grade function:

[CODE]
 function grade() { 

 var r1 = document.forms["FormName"].web;
 var r2 = document.forms["FormName"].pr;
 var r3 = document.forms["FormName"].ics;
 var v1 = getSelectedRadio(r1);
 var v2 = getSelectedRadio(r2);
 var v3 = getSelectedRadio(r3);
 var z1 = r1[v1].value;
 var z2 = r2[v2].value;
 var z3 = r3[v3].value;
 var avgGrade = document.getElementById("avgGrade");
 var total = ((parseInt(z1) + parseInt(z2) + parseInt(z3))/3).toFixed(0);
 avgGrade.value = total;
 if(total < 70) { imgName = "failed.jpg"; }
 elseif((total >= 70) && (total <= 75)) { imgName = "grade_d.jpg"; }
 ... [I]blah blah blah[/I]
 elseif(total >= 95) { imgName = "grade_a.jpg"; }
 imageDiv = document.getElementById("thisImage");
 imageDiv.innerHTML = "<img src="" + imgName + ""/>";
 }
 [/CODE]

@me_3authorMar 28.2012 — #Thats definitelly will do the job!Thank you WolfShade!

Returning to second part of previous question...any recommended tutorials or books (easy read) would you recommend?

Best of Luck!

@WolfShadeMar 28.2012 — #ANYthing by O'Reilly. I'm not a fan of online tutorials, but this forum is an excellent place to ask questions, and it's my primary source when I have a question. The best way to learn is to think of what you want to do, and just PLAY with it. Tweak it. Add to it. Modify it. Everything will be a learning opportunity.

Also in #JavaScript _↴

block script How to Stop Page Reload ?PIN Entry to a webpage

Success!

Help @me_3 spread the word by sharing this article on Twitter...

Tweet This

getting value from radio buttons group

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

getting value from radio buttons group

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴