Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    New Zealand
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    need help with JS arrays in storing input frm form into array + displaying result

    hello

    need urgent help with javascript arrays. I need to store the checked value of the radiobutton into an array and then display the result from that array....

    below is the code I have so far...I have created an empty array to store the input from the textbox of the form using the JS insert() function and then used show() function to display the result... but I am unable to display which option the user has selected from the radiobutton...please help.

    Code:
    <html>
    <head> 
    <script language="JavaScript" type="text/javascript">
    
    function checkForm()
    {
    
     	if (document.registerform.studentname.value == "")
      	{
       	alert("Please enter your name");
        	document.registerform.studentname.focus();
        	return false;
     	}
    
          	if ((document.registerform.selectgender[0].checked == false) && (document.registerform.selectgender[1].checked == false))
    	{ alert("Please choose your gender");
    	return false;
    
    	}
    }
    	
    
    //declare an empty array to store the input from the form
    
     var inputarray = new Array();
    
                function insert(val){
                    inputarray[inputarray.length]=val;
    									}           
    
                function show() {
                  var string="<b>All Elements of the Array:</b><br>";
                  for(i = 0; i < inputarray.length; i++) {
                      string =string+inputarray[i]+"<br>";
                   }
                 if(inputarray.length > 0)
                   document.getElementById('paraid').innerHTML = string;
              }
    
    </script>
    </head> 
    
    <body>   
    	
    <form name = "registerform" action="" method="POST">
    
    	<TABLE border="0" width="210">
    
    	<TR>
       	<TH width="58">Name</TH><TD width="136"><input type="text" name="studentname" id="studentname" size="20"></TD>
    	</TR>
    
    	<TR>
       	<TH width="58">Gender</TH><TD width="136"><INPUT TYPE=RADIO NAME="selectgender" VALUE="male">Male<INPUT TYPE=RADIO NAME="selectgender" VALUE="female">Female</TD>
    	</TR>
    
    	</TABLE>
    
    <br />
    
    <input type="button" value="Submit" name="submitform" " onclick="inputarray = new Array(); insert(registerform.studentname.value);insert(registerform.selectgender.checked);show();"/>
    
    </form>
    <hr>
    
    <p id='paraid'></p>
    
    </form>
    
    </body> 
    </html>

    if you look at it in the browser, and type in a name in the name textbox and click submit....it displays the result (which was stored in the inputarray) but the radiobutton doesnt work...gives.."undefined" and should give either Male or Female, depending on what the user selects.

    Would appreciate some help.

    Thank You

    namu

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Your code is a bit confused, but:-

    .......

    Code:
    function getVal() {
    var gender = "None";
    for (var i =0; i <document.registerform.selectgender.length; i ++) {
    if (document.registerform.selectgender[i].checked) {
    gender = document.registerform.selectgender[i].value; 
    }
    document.registerform.mfgender.value = gender;
    }
    }
    </script>
    </head> 
    
    <body>   
    	
    <form name = "registerform" action="" method="POST">
    <input type = "hidden" name= "mfgender" id = "gender" value = "None">
    
    	<TABLE border="0" width="210">
    
    	<TR>
       	<TH width="58">Name</TH><TD width="136"><input type="text" name="studentname" id="studentname" size="20"></TD>
    	</TR>
    
    	<TR>
       	<TH width="58">Gender</TH><TD width="136"><INPUT TYPE=RADIO NAME="selectgender" VALUE="male" onclick = "getVal()">Male<INPUT TYPE=RADIO NAME="selectgender" VALUE="female" onclick = "getVal()">Female</TD>
    	</TR>
    
    	</TABLE>
    
    <br />
    
    <input type="button" value="Submit" name="submitform" " onclick="inputarray = new Array(); insert(registerform.studentname.value);insert(registerform.gender.value);show();"/>
    
    
    </form>
    <hr>
    
    <p id='paraid'></p>
    
    </form>

    "A man would do nothing, if he waited until he could do it so well that no one at all would find fault with what he has done." - Cardinal Newman
    Last edited by Philip M; 03-18-2009 at 02:28 PM.

  • #3
    New Coder
    Join Date
    Mar 2009
    Location
    New Zealand
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question help with JS arrays...

    Thanks heaps Philip. that worked and I understand the code completely.

    I am now trying to display the elements of the array (which contains the input from the HTML form) into the textarea, when the user hits the submit button. (rather than show the line of code: All elements of the array... in the function show() )

    This time I want to display the elements of the array in the textarea with a message like: Hello <name> (the name inputed in the 'studentname' textbox of the form)..so basically I want to extract that name entered by the user and display that in the textbox along with the rest of the input from the form. So for.e.g

    in the textarea:

    Hello Matt.
    Name: Matt
    Phone:123456
    Gender: Male

    Currently from the code below you can see that the function show() displays the input from the array but not in the textarea. How do I go about displaying in the textarea when the user clicks submit.

    Do I change the function show() somehow for this to happen?


    Code:
    <html>
    <head>     
    <script language="JavaScript" type="text/javascript">
    
    function checkForm()
    {
    
     	if (document.registerform.studentname.value == "")
      	{
       		alert("Please enter your name");
        		document.registerform.studentname.focus();
        	      return false;
          }
    
    
    	if (document.registerform.studentphone.value == "")
    	{	
     		alert("Please enter your phone numnber");
     		document.registerform.studentphone.focus();
    		return false;
    	}
    
    
          if ((document.registerform.selectgender[0].checked == false) && (document.registerform.selectgender[1].checked == false))
    	{ 		
    		alert("Please choose your gender");
    		return false;
    
    	}
    
    }
    
    function getVal() 
    {
    
      var gender = "None";
      for (var i =0; i <document.registerform.selectgender.length; i ++) 
    {
    	if (document.registerform.selectgender[i].checked) 
    {
          gender = document.registerform.selectgender[i].value; 
    	}
          document.registerform.mfgender.value = gender;
    	}
    
    } 
    
    //declare empty array to store input from form into array
    var inputarray = new Array();
    
    function insert(val)
    {
             inputarray[inputarray.length]=val;
    													
    }
    
    function show() 
    {
    
             var string="<b>All Element of the Array :</b><br>";
             for(i = 0; i < inputarray.length; i++) 
           {
             string =string+inputarray[i]+"<br>";
            }
             
             if(inputarray.length > 0)
             document.getElementById('paraid').innerHTML = string;
              
    }
    
    
    </script>
    </head> 
    
    <body>   
    
    <form name = "registerform" onsubmit="return checkForm();" action="" method="POST">
    
    Name: <input type="text" name="studentname" id="studentname" size="20">
    <br />
    
    Phone: <input type="text" name="studentphone" id="studentphone" size="20">
    <br />
    	
    Gender:<INPUT TYPE=RADIO NAME="selectgender" VALUE="male" onclick = "getVal()">Male<INPUT TYPE=RADIO NAME="selectgender" VALUE="female" onclick = "getVal()">Female
    <br />
    
    <input type = "hidden" name= "mfgender" id = "gender" value = "">
    <br />
    
    <input type="submit" value="Submit" name="submitform" " onclick="inputarray = new Array(); insert(registerform.studentname.value);insert(registerform.studentphone.value);insert(registerform.gender.value);show();"/>
    
    </form>
    
    <p id='paraid'></p>
    
    
    <!--second form-->
    
    <form name = "view" method="POST" action="">
    
    <textarea rows="12" cols="70" name="textarea"></textarea>
    
    </form>
    
    </body> 
    </html>


  •  

    Posting Permissions

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