www.webdeveloper.com
Results 1 to 8 of 8

Thread: getting value from radio buttons group

  1. #1
    Join Date
    Mar 2012
    Posts
    23

    getting value from radio buttons group

    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" form name="semester1" action"#"> can these name be usefull somehow?
    		whats your scores in these modules?</br>
    		Web developement:
    		<label> <input type = "radio"  name = "web"  labels here or just name="web" can be used?
                           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" i need these button to do the job of getting average from all modules and let say showing average on alert.../>

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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;
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Mar 2012
    Posts
    23
    Quote Originally Posted by WolfShade View Post
    I've never seen a paragraph tag with FORM as an attribute.
    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...

    Quote Originally Posted by WolfShade View Post
    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;
    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
    is these funcion right for gettng average grade from buttons?
    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 )  ; 
    }
    first input text name grade is for showing total grade but it dont work at that stage
    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" />
    on click here button should display total grade on the readonly box above

    THANK YOU FOR SUGGESTIONS !
    Last edited by me.; 03-19-2012 at 06:17 AM.

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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>
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  5. #5
    Join Date
    Mar 2012
    Posts
    23
    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 function grade to show some pictures or pass/failed box can you point where/what should I do/use

    THANK YOU! You've been really helpful!

  6. #6
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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>
    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"; }
               ... blah blah blah
            elseif(total >= 95) { imgName = "grade_a.jpg"; }
            imageDiv = document.getElementById("thisImage");
            imageDiv.innerHTML = "<img src=\"" + imgName + "\"/>";
    	}
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  7. #7
    Join Date
    Mar 2012
    Posts
    23
    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!

  8. #8
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles