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

namu

03-18-2009, 09:25 AM

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.

<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

Philip M

03-18-2009, 01:15 PM

Your code is a bit confused, but:-

.......

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

namu

03-19-2009, 01:20 AM

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?

<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.g ender.value);show();"/>

</form>

<p id='paraid'></p>



<form name = "view" method="POST" action="">

<textarea rows="12" cols="70" name="textarea"></textarea>

</form>

</body>
</html>