Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

checked checkbox makes textfield required 2

Status
Not open for further replies.

berkshirea

Technical User
Mar 22, 2009
97
GB
hi guys,

i've been trying to solve this but no joy so far. the code is below.

the first textfield is required and is working. the 2 checkboxes are not required but when the user checks them the textfield opposite them becomes a required field.

would you give some suggestions please.

thanks

Code:
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript"><!--
function VF_form1(){ //v2.5
<!--start_of_saved_settings-->
<!--type,text,name,textfield,required,true,errMsg,txtfiled1-->
<!--end_of_saved_settings-->
	var theForm = document.forms['form1'];
	var errMsg = "";
	var setfocus = "";
	
	var fName = document.getElementById('textfield2').value;
                var chkBox = document.getElementById('checkbox');
                var isDataValid = true;   				
		
	if (theForm['textfield'].value == ""){
		errMsg = "txtfiled1";
		setfocus = "['textfield']";
	}
	if (errMsg != ""){
		alert(errMsg);
		eval("theForm" + setfocus + ".focus()");
	}
	else theForm.submit();
}//-->
</script>
</head>

<body>
<form action="" method="post" name="form1" id="form1" onsubmit="VF_form1();return false;">
  <label>
  <input type="text" name="textfield" />
  </label>
  <p>
    <input type="checkbox" name="checkbox" value="checkbox" />
    <label>
    <input type="text" name="textfield2" />
    </label>
  </p>
  <p>
    <input type="checkbox" name="checkbox2" value="checkbox" />
    <input type="text" name="textfield3" />
  </p>
  <p>
    <label>
    <input type="submit" name="Submit" value="Submit" />
    </label>
  </p>
</form>
</body>
</html>
 
Hi

Note that there you are
[ul]
[li]trying to [tt]getElementById()[/tt] for some nonexistent [tt]id[/tt]s[/li]
[li]using pointless [tt]eval()[/tt] which is better to be avoided[/li]
[/ul]
JavaScript:
[b]function[/b] [COLOR=darkgoldenrod]VF_form1[/color][teal]()[/teal]
[teal]{[/teal] [gray]//v2.5[/gray]
    [b]var[/b] theForm [teal]=[/teal] document[teal].[/teal]forms[teal][[/teal][green][i]'form1'[/i][/green][teal]];[/teal]
    [b]var[/b] errMsg [teal]=[/teal] [green][i]""[/i][/green][teal];[/teal]
    [b]var[/b] setfocus [teal]=[/teal] [green][i]""[/i][/green][teal];[/teal]

    [b]if[/b] [teal]([/teal]theForm[teal][[/teal][green][i]'textfield'[/i][/green][teal]].[/teal]value [teal]==[/teal] [green][i]""[/i][/green][teal])[/teal] [teal]{[/teal]
        errMsg [teal]=[/teal] [green][i]"[/i][/green][lime][i]\n[/i][/lime][green][i]- Field 1 is required"[/i][/green][teal];[/teal]
        setfocus [teal]=[/teal] [green][i]'textfield'[/i][/green][teal];[/teal]
    [teal]}[/teal]
    [b]if[/b] [teal]([/teal]theForm[teal][[/teal][green][i]'checkbox'[/i][/green][teal]].[/teal]checked [teal]&&[/teal] theForm[teal][[/teal][green][i]'textfield2'[/i][/green][teal]].[/teal]value [teal]==[/teal] [green][i]""[/i][/green][teal])[/teal] [teal]{[/teal]
        errMsg [teal]+=[/teal] [green][i]"[/i][/green][lime][i]\n[/i][/lime][green][i]- Field 2 is required"[/i][/green][teal];[/teal]
        setfocus [teal]=[/teal] setfocus [teal]||[/teal] [green][i]'textfield2'[/i][/green][teal];[/teal]
    [teal]}[/teal]
    [b]if[/b] [teal]([/teal]theForm[teal][[/teal][green][i]'checkbox2'[/i][/green][teal]].[/teal]checked [teal]&&[/teal] theForm[teal][[/teal][green][i]'textfield3'[/i][/green][teal]].[/teal]value [teal]==[/teal] [green][i]""[/i][/green][teal])[/teal] [teal]{[/teal]
        errMsg [teal]+=[/teal] [green][i]"[/i][/green][lime][i]\n[/i][/lime][green][i]- Field 3 is required"[/i][/green][teal];[/teal]
        setfocus [teal]=[/teal] setfocus [teal]||[/teal] [green][i]'textfield3'[/i][/green][teal];[/teal]
    [teal]}[/teal]
    [b]if[/b] [teal]([/teal]errMsg [teal]!=[/teal] [green][i]""[/i][/green][teal])[/teal] [teal]{[/teal]
        [COLOR=darkgoldenrod]alert[/color][teal]([/teal][green][i]'The following errors occured :'[/i][/green][teal]+[/teal]errMsg[teal]);[/teal]
        theForm[teal][[/teal]setfocus[teal]].[/teal][COLOR=darkgoldenrod]focus[/color][teal]();[/teal]
    [teal]}[/teal]
    [b]return[/b] errMsg [teal]==[/teal] [green][i]''[/i][/green][teal];[/teal]
[teal]}[/teal]
Regarding the function call, better [tt]return[/tt] its return value :
Code:
[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][green][i]""[/i][/green] [maroon]method[/maroon][teal]=[/teal][green][i]"post"[/i][/green] [maroon]name[/maroon][teal]=[/teal][green][i]"form1"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"form1"[/i][/green] [maroon]onsubmit[/maroon][teal]=[/teal][green][i]"[highlight]return[/highlight] VF_form1()"[/i][/green][b]>[/b]

Feherke.
 
Thanks very much feherke.

That's is awesome!!! Worked like magic.

I can't thank you enough. Have a nice day!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top