SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Radio button that prints text to a text box?

    I'm working on an html assignment using javascript and I need to have two radio buttons as well as a text box. When you click on one of the radio buttons it needs to display text inside the text box.

    right now I have:
    Code:
    <form>
    	<input type="radio" name="yes" value="" onclick ="  "/> yes</br>
    	<input type="radio" name="no" value="" onclick = "   "/> no</br>
    	<input type="text" name="textbox1" value=""/><br />
    			
    </form>

    but I can't figure out what to put in the onclick = " ".

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm.......looks like you haven't done much of the assignment at all so far.

    The onclick need to call a function that writes whatever is passed to the function into the textbox.

    You haven't specified where the text to go into the textbox will come from and your post implies the same text will be written regardless of which radio button is clicked

    The onclick function needs to do the following.

    1) get a reference to the textbox object

    2) set the value of the object in 1) to whatever value was passed to the onclick function

    Short of writing the code and doing the assignment for you, I can't help much more.

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Here's an example function i wrote quickly, as Kalon said you need to refer the onclick event to a javascript function.

    Code JavaScript:
    function insertData(txt){
        var e = document.getElementsByTagName('input');
     
        for(var i=0; i<e.length; i++){
            if (e[i].name == 'textbox1'){
                e[i].value = txt;
            }
        }
    }

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there you go - SgtLegend's done the assignment for you

    if you want you can cut down the code by removing the for loop by assigning an id to the textbox as well and using getElementById() instead of getElementsByTagName().

  5. #5
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys. I figured I'd have to use a function kalon. Unfortunately, the class I'm doing this for has one of the WORST professors I've ever had we haven't gone over anything other than a function that generates a random number. So yea, I'm pretty much expected to read online and figure out how to do it, then show that I know how.

    Anyways, enough ranting.

    SgtLegend, thanks a lot for the example. I tried to implement it though and I must be doing something wrong. This is what I tried:


    Code:
    <script type = "text/javascript" >
    	function insertData(txt){
                var e = document.getElementsByTagName('input');
    		    
                 for(var i=0; i<e.length; i++){
    		        if (e[i].name == 'textbox1'){
    		            e[i].value = txt;
    		        }
    		    }
    		}
    
    	
    </script>
    	
    		
    <form>
    <input type="radio" name="yes" value="" onclick ="insertData(hi) "/> yes </br> 
    <input type="radio" name="no" value="" /> no </br>
    <input type="text" name="textbox1" value=""> </br>
    </form>
    This however isn't working. Is there something else I should have changed with your function? If not, can you explain where I'm going wrong

  6. #6
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    there you go - SgtLegend's done the assignment for you

    if you want you can cut down the code by removing the for loop by assigning an id to the textbox as well and using getElementById() instead of getElementsByTagName().
    How do I assign an id to the textbox? Sorry, but I seriously feel like I've been dropped in the ocean and then asked to swim. So I don't know a lot of the stuff I should know by the time I take on a project like this.

  7. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is another way of doing it

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript">
     
    function insertData(str) {
        document.getElementById("textbox1").value = str;
    }
     
    </script>
    
    </head>
    <body>
     
    <form>
        <input type="radio" name="yes" value="" onclick ="insertData('hi');"/> yes </br> 
        <input type="radio" name="no" value="" /> no </br>
        <input type="text" name="textbox1" id="textbox1" value="" /> </br>
    </form>
     
    </body>
    </html>
    Have a look at the w3schools tutorial on getElementById()

  8. #8
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by akondray View Post
    Unfortunately, the class I'm doing this for has one of the WORST professors I've ever had
    I hope he/she is not a refugee from sitepoint

  9. #9
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    I hope he/she is not a refugee from sitepoint
    If she is maybe she'll realize we're not paying to be told to learn on our own

    I appreciate all the help.

  10. #10
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok

    if you like, work through the other tutorials on the w3schools link I posted. sounds like you might learn more from them and they're FREE...!!!!

  11. #11
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually was able to do most of my assignment (there were other parts not involving radio buttons) simply with that small piece of advice. I even made the function better, by allowing different buttons to pass it a textbox number and then it would output text into that textbox! (helpful as I have multiple buttons and text boxes)


    Anyways, I did run into another problem. If I want to have a drop-down list is there a way to put an onclick value in them? I tried :
    Code:
    <select name = "favorite color">
    <option value= "red" onclick = "insertData('red');">red</option>
    <option value= "blue" onclick = "insertData('blue');">blue</option>
    </select>
    but that didn't work at all. I'd imagine since each value isn't a technical box I can't add an onclick option? If not, could I write a function where, at the push of a button, it would check and see what value I had in the drop-down menu? If so, when I wrote the function would tests such as :

    Code:
    var e = document.getElementById(dropdown1);
    
    if (e.value == red) {
    work?

  12. #12
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    So you want an event that shows the option you select from a drop down?

    HTML Code:
    <select onchange="alert(this.value)">
        <option value="">Something</option>
    </select>
    To show the value in the text box you do

    HTML Code:
    <select onchange="insertData(this.value)">
        <option value="something">Something</option>
    </select>

  13. #13
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in that case you need something similar to this

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript">
     
    function showValue(elem) {
        if(elem.selectedIndex != 0) {
            alert('Option selected is:     '+elem.options[elem.selectedIndex].value);
        }
    }
    </script>
     
    </head>
    <body>
     
    <select name="selMyList" onchange="showValue(this)">
        <option value="">Select an option</option>
        <option value= "red">red</option>
        <option value= "blue">blue</option>
    </select>
     
    </body>
    </html>

  14. #14
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and with both of those the "showValue(this)" will show whatever value I have selected? so if I select red it would be the same as showValue(red) ?

  15. #15
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the this in showValue(this) refers to the <select> element object itself and that is what is passed to the function.

    the function accepts the <select> object in a variable called elem.

    the <select> option elements are stored in an array called options attached to the <select> object

    the <select> object has a property called selectedIndex which is the array index of the selected option.

    elem.options[elem.selectedIndex].value outputs the value of the value attribute for the selected option.

    The IF statement just checks if the user selected "Select an option" and so the function does nothing if they did.


Bookmarks

Posting Permissions

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