...

View Full Version : retaining input in web form



anan
03-01-2012, 09:16 AM
this is my javascript used to validate form.having problem when one selection is made and submit button is clicked.the checked button becomes unchecked.
i've to check all the radio button in order to proceed with submission.
here is the code...anyone pls help how to solve this..tq

<script type = "text/javascript">

function validate_form ( )
{
valid = true;

if ( ( document.myform.gender[0].checked == false ) && ( document.myform.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
gender.focus();
valid = false;
}

if ( ( document.myform.nationality[0].checked == false ) && ( document.myform.nationality[1].checked == false ) )
{
alert ( "Please choose your Nationality" );
nationality.focus();
valid = false;
}


if ( document.myform.age.selectedIndex == 0 )
{
alert ( "Please select your Age." );
age.focus();
valid = false;
}
return valid;
}




</script>

Philip M
03-01-2012, 09:24 AM
We need to see your HTML - <form> tag and submit button.

gender.focus(); // you cannot focus on two radio buttons at the same time, and in any case you must address it by document.formname.elementname.focus();

It is your responsibility to die() if necessary….. - PHP Manual

anan
03-01-2012, 01:11 PM
ok.this is my html code


<HTML>
<HEAD>
<H2><P ALIGN="CENTER"
<TITLE><font color="blue"> ABC:</font></TITLE><H2></P>
<H3><P ALIGN ="CENTER"><font color="ff0ff0"><font face="arial"> CDE </font></font></P></H3>
</HEAD>
<body>
<form name="myform" onSubmit="return validate_form ( );">

<table border="5" cellspacing="5" cellpadding="3" align="center" bgcolor="#FFFFFF">
<tr>
<th colspan="15" bgcolor="66FFCC"> Part A: </th>
<tr>
<td>Please select your gender:</td>
<td colspan="15"><input type="radio" name="gender" value="Male">Male <input type="radio" name="gender" value="Female">Female</td>
</tr>
<td>Nationality:</td>
<td colspan="15"><input type="radio" name="nationality" value="Malaysian">Malaysian<input type="radio" name="nationality" value="Others (please specify)">Others(please specify)<input type="text" size="30" maxlength="30" /></td>
<tr>
<td>Please select your age group:</td>
<td colspan="15">
<select name="age">
<option value="">Please Select an Option:</option>
<option value="1"><25</option>
<option value="2">25-35</option>
<option value="3">36-45</option>
<option value="4">46-55</option>
<option value="5">>56</option>
</select>
</tr>
</table><br />

<input type="submit" name="send" value="Send Details">
<input type="reset" value="Reset!">

</form>
</body>

</html>

Philip M
03-01-2012, 01:47 PM
Your form has no action attribute, so it submits to itself, that is reloads and of course wipes out the previous inputs.

Observe this with <form name="myform" onSubmit="alert ('hello'); return validate_form();">


Delete the lines
gender.focus();
nationality.focus();
age.focus();

and then it works OK.

anan
03-01-2012, 02:10 PM
<form name="myform" onSubmit="alert ('hello'); return validate_form();">
gender.focus();
nationality.focus();
age.focus();

i tried above but the problem now, all the alert box appears one by one continuosly.only with focus() there is a break between each alert for user to update selection.

Philip M
03-01-2012, 02:53 PM
Delete the two lines
valid = true;
return valid;

and change all three lines
valid = false;
to
return false;

anan
03-01-2012, 03:17 PM
thanks for your help,it works now.

Philip M
03-01-2012, 04:29 PM
Your function calculate() in the code posted at post #7 but which you have now deleted is not called anywhere.

You don't seem to have much idea of how to capture the values of selected radio buttons, still less multiple groups of radios.
Try this added to the end of your validate_form() function (don't forget to take out the final closing brace } )



var markScore = 0;

for (var i=1;i<=3;i++) { // 3 questions
var q = document["myform"]["ques"+i]; // the radio group
var len = q.length; // how many radios in this group?

for (var j =0; j<len; j++) {
if (q(j).checked) { // is this radio checked?
var val = q(j).value; // if so get checked radio value
markScore += Number(q(j).value); // add them up
}
}

}
alert ("Your score is " + markScore)
} // final closing brace to end function



Failure to check a radio button is equivalent to checking 0. If you want to calculate a percentage then you will need to do the proper arithmertic calculation on markScore.


I have the feeling that this is homework. :( If so you have had enough help!

anan
03-02-2012, 01:09 AM
thanks for your help.this is not a homework.i m voluntarily creating a quiz for standard 1 of primary school at my area with some helps from friend.this is a great task as i can improve my little knowledge of javascript.

from your code :
if (q(j).checked) { // this is to check if radio button are selected
var val = q(j).value; // here it will capture the value from selected radio button

so in order to make sure all the radio button are checked before the values passed to next line, i have to create validation line between of this 2 line.am i correct?
or
i need to add radio validation immediately after the Please select your age line..
if ( document.myform.age.selectedIndex == 0 )?

Philip M
03-02-2012, 07:35 AM
You can test whether a selection has been made in several ways, but this change to the code I gave you ought to suit:-




var chosen = false;
for (var j =0; j<len; j++) {
if (q(j).checked) { // is this radio checked?
var val = q(j).value; // if so get checked radio value
markScore += Number(q(j).value); // add them up
chosen = true; // a radio in this group has been checked
}
}

if (!chosen) { // if chosen is false
alert ("You must make a selection from each group of radio buttons");
// or if you prefer
// alert ("You have not made a selection from radio group " + i);
return false; // terminate
}

anan
03-02-2012, 08:32 AM
thank you. appreciate your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum