SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Parts of form not working

    Good day everyone!

    I have an HTML select list that is populated when a user click on radio buttons.

    That part seem to be working fine.

    The problem is, I also need a message to appear in a textfield which is in another form. So say when a user click checkbox 1, some text are displayed in a textfield. Example: You click checkbox 1.

    I just can't get that part to work.

    Here is the complete code:

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    
    <script type="text/javascript">
    window.onload = function() {
    var aObj = document.getElementsByName('fav');
    var i = aObj.length; 
    while(i--) { 
        aObj[i].onclick = function() {
    		fillSelect(this.nextSibling.data);
    	}
        }
    }
    var color = ['red','green','blue'];
    var car = ['ford','toyota','mazda'];
    var genre = ['horror','scifi','comedy'];
    
    function fillSelect(arrayName) {
    var f = document.myform;
    f.list.options.length = null;
    for(var i=0; i<window[arrayName].length; i++) {
    	f.list.options[i]=new Option(window[arrayName][i], window[arrayName][i]); 
        }    
    }
    
    /*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
    function displayMsg(text) {
    	var msgVar = document.getElementById("msgBox");
    		if (msgVar.elements.length > 0) {
    			switch(text)
    				{
    				case 0: msgVar.elements[0].value="Type of colors";
    				break;
    				case 1: msgVar.elements[0].value="Type of car";
    				break;
    				case 2: msgVar.elements[0].value="Type of movies";
    				break;
    				}
    			}
    		}	
    </script>
    
    <style type="text/css">
    label {display:block;}
    </style>
    
    </head>
    <body>
    <!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
    <form action="javascript:void(0)" id="msgBox">
    	<label for="textBox">Radio button selected</label>
        <input type="text" id="textBox" name="textBox" />
    </form>
    
    <br />
    <br />
    
    <form action="#" name="myform">
        <select name="list">
        </select>
        <label><input type="radio" name="fav" onclick="displayMsg(0);">color</label>
        <label><input type="radio" name="fav" onclick="displayMsg(1);" checked>car</label>
        <label><input type="radio" name="fav" onclick="displayMsg(2);">genre</label>
    </form>
    </body>
    Thanks very much everyone!


    Nov

  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)
    You are replacing the

    Code:
     
    onclick="displayMsg(0);"
    with a new onclick in your window.onload

    Code:
     
        aObj[i].onclick = function() {
             fillSelect(this.nextSibling.data);
        }
    and so displayMsg() is never called when you click a radio button.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    You are replacing the

    Code:
     
    onclick="displayMsg(0);"
    with a new onclick in your window.onload

    Code:
     
        aObj[i].onclick = function() {
             fillSelect(this.nextSibling.data);
        }
    and so displayMsg() is never called when you click a radio button.

    I tried switching everything around but for some reason I can only get one part of the code to work at a time.

    I am still working on it but wouldn't mind a suggestion.

    Any ideas?

    Nov

  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)
    One way to do it is

    Code:
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript">
    
    window.onload = function() {
    var aObj = document.getElementsByName('fav');  
    
    for(i=0; i < aObj.length; i++) { 
            aObj[i].msgNum = i;
            aObj[i].onclick = function() {
            fillSelect(this.nextSibling.data);
            displayMsg(this.msgNum);
         } //end of onclick
        } //end of for loop
    } //end of onload
     
    var color = ['red','green','blue'];
    var car = ['ford','toyota','mazda'];
    var genre = ['horror','scifi','comedy'];
     
    function fillSelect(arrayName) {
        var f = document.myform;
        f.list.options.length = null;
        for(var i=0; i<window[arrayName].length; i++) {
            f.list.options[i]=new Option(window[arrayName][i], window[arrayName][i]); 
        }    
    }
    /*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
    function displayMsg(msgNum) {
     var msgVar = document.getElementById("textBox");
       switch(msgNum) {
        case 0: msgVar.value="Type of colors";
        break;
        case 1: msgVar.value="Type of car";
        break;
        case 2: msgVar.value="Type of movies";
        break;
        }
      } 
    </script> 
     
    <style type="text/css">
    label {display:block;}
    </style>
    </head>
    <body>
    <!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
    <form action="javascript:void(0)" id="msgBox">
     <label for="textBox">Radio button selected</label>
        <input type="text" id="textBox" name="textBox" />
    </form>
     
    <br />
    <br />
     
    <form action="#" name="myform">
        <select name="list">
        </select>
        <label><input type="radio" name="fav" >color</label>
        <label><input type="radio" name="fav" checked>car</label>
        <label><input type="radio" name="fav" >genre</label>
    </form>
    </body>

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    One way to do it is

    Code:
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript">
    
    window.onload = function() {
    var aObj = document.getElementsByName('fav');  
    
    for(i=0; i < aObj.length; i++) { 
            aObj[i].msgNum = i;
            aObj[i].onclick = function() {
            fillSelect(this.nextSibling.data);
            displayMsg(this.msgNum);
         } //end of onclick
        } //end of for loop
    } //end of onload
     
    var color = ['red','green','blue'];
    var car = ['ford','toyota','mazda'];
    var genre = ['horror','scifi','comedy'];
     
    function fillSelect(arrayName) {
        var f = document.myform;
        f.list.options.length = null;
        for(var i=0; i<window[arrayName].length; i++) {
            f.list.options[i]=new Option(window[arrayName][i], window[arrayName][i]); 
        }    
    }
    /*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
    function displayMsg(msgNum) {
     var msgVar = document.getElementById("textBox");
       switch(msgNum) {
        case 0: msgVar.value="Type of colors";
        break;
        case 1: msgVar.value="Type of car";
        break;
        case 2: msgVar.value="Type of movies";
        break;
        }
      } 
    </script> 
     
    <style type="text/css">
    label {display:block;}
    </style>
    </head>
    <body>
    <!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
    <form action="javascript:void(0)" id="msgBox">
     <label for="textBox">Radio button selected</label>
        <input type="text" id="textBox" name="textBox" />
    </form>
     
    <br />
    <br />
     
    <form action="#" name="myform">
        <select name="list">
        </select>
        <label><input type="radio" name="fav" >color</label>
        <label><input type="radio" name="fav" checked>car</label>
        <label><input type="radio" name="fav" >genre</label>
    </form>
    </body>
    Thanks a million, your way worked.

    However, if you want to, can you provide me some explanation as to what you did and why? You don't have to but it will make me learn better.

    Thanks again!

    Nov

  6. #6
    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 Novice2010 View Post
    Thanks a million, your way worked.

    However, if you want to, can you provide me some explanation as to what you did and why? You don't have to but it will make me learn better.

    Thanks again!

    Nov
    Basically I did the following:

    1) removed the onclick function in your html and included it in your onload function.

    2) assigned a property called msgNum to your radio buttons and gave it the current value of i and passed it to your
    displayMsg() function.

    3) changed the output element in your switch() to be the textbox in the form.

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    Basically I did the following:

    1) removed the onclick function in your html and included it in your onload function.

    2) assigned a property called msgNum to your radio buttons and gave it the current value of i and passed it to your
    displayMsg() function.

    3) changed the output element in your switch() to be the textbox in the form.
    Hello Kalon,

    Thanks for all your help!

    I noticed something funny going on with the labels. Maybe it is something I wrote that is sending everything out of spin.

    The radio buttons will only work if you have them wrapped in a label tag.

    Example:
    Code:
    <label><input type="radio" name="radioBtn" />colors</label>
    If you use for, it does not work.


    Never seen something like this before, also the labels must carry the same name as the array, example: color. If the radio is different from the array, it does not work.


    Not sure whats going on.


    Nov

  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)
    The <label> means that clicking the text next to the radio button is the same as clickig the button itself.

    I didn't look at the other part of your code, but if you want to remove the lables and streamline your code a bit, I would put the data arrays and the text for the textbox into a 2 dimensional array similar to this.

    Code:
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript">
     
    var color = ['red','green','blue'];
    var car = ['ford','toyota','mazda'];
    var genre = ['horror','scifi','comedy'];
     
    var selFillArrays = [[color,"Type of colors"],[car,"Type of car"],[genre,"Type of movies"]];
     
    window.onload = function() {
    var aObj = document.getElementsByName('fav');  
    for(i=0; i < aObj.length; i++) { 
            aObj[i].msgNum = i;
            aObj[i].onclick = function() {
            fillSelect(selFillArrays[this.msgNum][0]);
            displayMsg(this.msgNum);
         } //end of onclick
        } //end of for loop
    } //end of onload
     
    function fillSelect(arrayName) {
         var f = document.myform;
         f.list.options.length = null;
         for(var i=0; i<arrayName.length; i++) {
              f.list.options[i]=new Option(arrayName[i], arrayName[i]); 
        }    
    }
     
    /*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
    function displayMsg(msgNum) {
     var msgVar = document.getElementById("textBox");
    
       switch(msgNum) {
        case 0: msgVar.value=selFillArrays[msgNum][1];
        break;
        case 1: msgVar.value=selFillArrays[msgNum][1];
        break;
        case 2: msgVar.value=selFillArrays[msgNum][1];
        break;
        }
      } 
    
    </script>
    <style type="text/css">
    label {display:block;}
    </style>
    </head>
    <body>
    <!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
    <form action="javascript:void(0)" id="msgBox">
     <label for="textBox">Radio button selected</label>
        <input type="text" id="textBox" name="textBox" />
    </form>
    <br />
    <br />
    <form action="#" name="myform">
        <select name="list">
        </select>
        <input type="radio" name="fav" >color
        <input type="radio" name="fav" checked>car
        <input type="radio" name="fav" >genre
    </form>
    </body>

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    The <label> means that clicking the text next to the radio button is the same as clickig the button itself.

    I didn't look at the other part of your code, but if you want to remove the lables and streamline your code a bit, I would put the data arrays and the text for the textbox into a 2 dimensional array similar to this.

    Code:
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript">
     
    var color = ['red','green','blue'];
    var car = ['ford','toyota','mazda'];
    var genre = ['horror','scifi','comedy'];
     
    var selFillArrays = [[color,"Type of colors"],[car,"Type of car"],[genre,"Type of movies"]];
     
    window.onload = function() {
    var aObj = document.getElementsByName('fav');  
    for(i=0; i < aObj.length; i++) { 
            aObj[i].msgNum = i;
            aObj[i].onclick = function() {
            fillSelect(selFillArrays[this.msgNum][0]);
            displayMsg(this.msgNum);
         } //end of onclick
        } //end of for loop
    } //end of onload
     
    function fillSelect(arrayName) {
         var f = document.myform;
         f.list.options.length = null;
         for(var i=0; i<arrayName.length; i++) {
              f.list.options[i]=new Option(arrayName[i], arrayName[i]); 
        }    
    }
     
    /*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
    function displayMsg(msgNum) {
     var msgVar = document.getElementById("textBox");
    
       switch(msgNum) {
        case 0: msgVar.value=selFillArrays[msgNum][1];
        break;
        case 1: msgVar.value=selFillArrays[msgNum][1];
        break;
        case 2: msgVar.value=selFillArrays[msgNum][1];
        break;
        }
      } 
    
    </script>
    <style type="text/css">
    label {display:block;}
    </style>
    </head>
    <body>
    <!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
    <form action="javascript:void(0)" id="msgBox">
     <label for="textBox">Radio button selected</label>
        <input type="text" id="textBox" name="textBox" />
    </form>
    <br />
    <br />
    <form action="#" name="myform">
        <select name="list">
        </select>
        <input type="radio" name="fav" >color
        <input type="radio" name="fav" checked>car
        <input type="radio" name="fav" >genre
    </form>
    </body>
    Thanks for all the advise time and help! I owe you one.

    All seem to be working so far, I'll keep you posted if there are any changes as to how the code is functioning.

    Nov

  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)
    That's ok

    I realised yesterday after the edit button for my post disappeared that you would probably want the <select> populated with the options associated with the default checked radio button.

    Also, since the texts for the textbox are now in an array you don't really need the swirch() anymore since the code for each case is now the same.

    Below is your code streamlined a little further with the above edits in case it is of use to you.

    Code:
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript">
     
    var color = ['red','green','blue'];
    var car = ['ford','toyota','mazda'];
    var genre = ['horror','scifi','comedy'];
     
    var selFillArrays = [[color,"Type of colors"],[car,"Type of car"],[genre,"Type of movies"]];
     
    window.onload = function() {
    var aObj = document.getElementsByName('fav');  
    for(i=0; i < aObj.length; i++) { 
           if(aObj[i].checked) { //populate the <select> with default options
                fillSelect(selFillArrays[i][0]);
            }
            aObj[i].msgNum = i;
            aObj[i].onclick = function() {
            fillSelect(selFillArrays[this.msgNum][0]);
            displayMsg(this.msgNum);
         } //end of onclick
        } //end of for loop
    } //end of onload
     
    function fillSelect(arrayName) {
         var f = document.myform;
         f.list.options.length = null;
         for(var i=0; i<arrayName.length; i++) {
              f.list.options[i]=new Option(arrayName[i], arrayName[i]); 
        }    
    }
     
    /*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
    function displayMsg(msgNum) {
     var msgVar = document.getElementById("textBox");
     msgVar.value=selFillArrays[msgNum][1];
    } 
    </script>
     
    <style type="text/css">
    label {display:block;}
    </style>
    </head>
    <body>
     
    <!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
    <form action="javascript:void(0)" id="msgBox">
     <label for="textBox">Radio button selected</label>
        <input type="text" id="textBox" name="textBox" />
    </form>
    <br />
    <br />
     
    <form action="#" name="myform">
        <select name="list">
        </select>
        <input type="radio" name="fav" >color
        <input type="radio" name="fav" checked>car
        <input type="radio" name="fav" >genre
    </form>
    </body>

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    That's ok

    I realised yesterday after the edit button for my post disappeared that you would probably want the <select> populated with the options associated with the default checked radio button.

    Also, since the texts for the textbox are now in an array you don't really need the swirch() anymore since the code for each case is now the same.

    Below is your code streamlined a little further with the above edits in case it is of use to you.

    Code:
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript">
     
    var color = ['red','green','blue'];
    var car = ['ford','toyota','mazda'];
    var genre = ['horror','scifi','comedy'];
     
    var selFillArrays = [[color,"Type of colors"],[car,"Type of car"],[genre,"Type of movies"]];
     
    window.onload = function() {
    var aObj = document.getElementsByName('fav');  
    for(i=0; i < aObj.length; i++) { 
           if(aObj[i].checked) { //populate the <select> with default options
                fillSelect(selFillArrays[i][0]);
            }
            aObj[i].msgNum = i;
            aObj[i].onclick = function() {
            fillSelect(selFillArrays[this.msgNum][0]);
            displayMsg(this.msgNum);
         } //end of onclick
        } //end of for loop
    } //end of onload
     
    function fillSelect(arrayName) {
         var f = document.myform;
         f.list.options.length = null;
         for(var i=0; i<arrayName.length; i++) {
              f.list.options[i]=new Option(arrayName[i], arrayName[i]); 
        }    
    }
     
    /*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
    function displayMsg(msgNum) {
     var msgVar = document.getElementById("textBox");
     msgVar.value=selFillArrays[msgNum][1];
    } 
    </script>
     
    <style type="text/css">
    label {display:block;}
    </style>
    </head>
    <body>
     
    <!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
    <form action="javascript:void(0)" id="msgBox">
     <label for="textBox">Radio button selected</label>
        <input type="text" id="textBox" name="textBox" />
    </form>
    <br />
    <br />
     
    <form action="#" name="myform">
        <select name="list">
        </select>
        <input type="radio" name="fav" >color
        <input type="radio" name="fav" checked>car
        <input type="radio" name="fav" >genre
    </form>
    </body>
    Thanks very much, you have been a great resource!

    Someday I hope to acquire some of your knowledge.

    Have a great weekend.

    Nov

  12. #12
    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 Novice2010 View Post
    Thanks very much, you have been a great resource!

    Someday I hope to acquire some of your knowledge.

    Have a great weekend.

    Nov
    That's ok - the bill's in the mail

    Have a good one


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
  •