JavaScript Forum

**webgrrl** · 06-14-2007, 02:46 PM

I have some code that validates the form fields. FYI, this is at http://willmaster.com/possibilities/...eldsCheck.html

Once it is done validating, I want it to submit the form. I am not sure how to make it submit it!

//This adds alerts if the form fields are not filled in
if(errormessage.length > 2) {
alert('NOTE:' + errormessage);
return false;
}

//This is what happens when the form fields are filled in properly
if(errormessage.length < 2) {
//I want this to submit the form, but I don't know the code
}

What do I put in the code above? submitform() is not working, which is what I have in there now. Please help!

Thanks in advance,
WebGrrl

**ADAM Web Design** · 06-14-2007, 02:49 PM

document.yourformnamehere.submit() .

**webgrrl** · 06-14-2007, 03:18 PM

I have tried that
if(errormessage.length < 2) {
document.exampleform.submit();
}

But it doesn't submit, and then status bar says "Error on Page!"

**ColdFusion** · 06-14-2007, 05:47 PM

Please post all your code

**ADAM Web Design** · 06-14-2007, 05:52 PM

Or a page where the error occurs.

**webgrrl** · 06-14-2007, 06:36 PM

The code is here. There is no error message, the form just simply does not submit when you have filled in all of the fields properly. You can do a "view source" on the page below to get all the code.

http://willmaster.com/possibilities/...eldsCheck.html

WebGrrl

**webgrrl** · 06-14-2007, 06:40 PM

Also, my code is below, with my attempt to show where I think I might be able to submit the form (see the green code). It shows the alert but I don't know the code to submit it.

WebGrrl

-----------------------

<html>
<head>



<script type="text/javascript" language="JavaScript">

</script>

</head>

<body bgcolor="#FFFFFF">
<div align="center">


<form name="exampleform" onSubmit="return CheckRequiredFields()" action="http://www.rocklin.ca.us/ASP_Output/Fee_Estimator/project_range.asp" method=post>
<BR><TABLE cellSpacing=2 cellPadding=2 border=1><TBODY>
<TR><TD><LABEL for=RES><INPUT id=RES tabIndex=1 type=radio value=Residential name=projecttype><FONT face=Tahoma size=2> Residential</FONT></LABEL></TD></TR>
<TR><TD><LABEL for=COM><INPUT id=COM tabIndex=2 type=radio value=Commercial name=projecttype><FONT face=Tahoma size=2> Commercial</FONT></LABEL></TD></TR></TBODY>
</TABLE>

<table border="1" cellpadding="9" cellspacing="0"><tr><td>

<input type="radio" name="radioOne" value="one">One<br>
<input type="radio" name="radioOne" value="two">Two<br>
<input type="radio" name="radioOne" value="three">Three
<hr width="33%">
<input type="radio" name="radioLoner" value="RRRR">Loner

</td><td>

<input type="checkbox" name="checkOne" value="one">checkOne one<br>
<input type="checkbox" name="checkOne" value="two">checkOne two<br>
<input type="checkbox" name="checkOne" value="three">checkOne three
<hr width="33%">
<input type="checkbox" name="checkLoner" value="CCCC">Loner

</td></tr><tr><td>

Some text:<br>
<input type="text" name="sometext">
<hr width="33%">
Some text in either or both:<br>
<input type="text" name="oneOrTheOther"><br>
<input type="text" name="oneOrTheOther">

</td><td>

Type something:<br>
<textarea cols="22" rows="5" name="areaName"></textarea>

</td></tr><tr><td>

<input type="file" name="FileGet" size="22">

</td><td>

<select name="dropname">
<option value="">-- Select --</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>

</td></tr><tr><td colspan="2" align="center">

<input type="submit">

</td></tr></table>

</form>

</div>
</body>
</html>

**webgrrl** · 06-17-2007, 05:33 PM

Any ideas? Please help! Thank you.

WebGrrl

**mastercomputers** · 06-19-2007, 09:42 PM

The easiest answer return true; in the function when the form is filled correctly. If it returns true, the form is submitted normally.

If still no luck, I'll actually check over the code, but that's all I noticed from the first post.

Cheers,

MC

**webgrrl** · 06-25-2007, 08:39 PM

I tried putting document.exampleform.submit() after return true; but that did not do it. I have tried so many things...I am just not familiar with Javascript syntax...

The original code is below, and it is self-contained, so when you a view source you get the whole code.

http://willmaster.com/possibilities/...eldsCheck.html

Please let me know how to make this form submit...that would rock my world.

WebGrrl

**tripy** · 06-25-2007, 09:15 PM

Quote:

I tried putting document.exampleform.submit() after return true;

That cannot work.

When a function returns a value, it exit the function at the same time.
Any commands placed after a return will be ignored.

You must either place your form submit command outside of the function (after you have catched the function result) or inside the function, but before the return statement.

**tripy** · 06-25-2007, 09:21 PM

you where just 1 step of the solution, look:

Code:

// Put field checks above this point.
if(errormessage.length >= 2) {
  alert('NOTE:' + errormessage);
  return false;
	}
else{
  document.exampleform.submit();
  return true;
}

That way, your function should be okay, but it will be tied to a specific form name.

I suggest you rather this:

Code:

function CheckRequiredFields(){
   ... do your checks here ...
    if(errormessage.length >= 2) {
     alert('NOTE:' + errormessage);
     return false;
    	}
   else{
      return true;
   }
}

var chkResult=CheckRequiredFields();
if(chkResult==true){
  document.exempleForm.submit();
}

**webgrrl** · 06-26-2007, 04:00 PM

The logic makes sense. I tried it - when you all of the fields are filled out properly the URL shows up in the status bar, but the form does not actually go to the page. Also, even when you first load the page, the status bar says there are "errors on page."

Here is a working example.

Please help....

WebGrrl

**tripy** · 06-26-2007, 05:25 PM

Well, in my FireFox, it goes ok.
I'm landing on Yahoo.com after submit.

In ie7, on the other hands, it looks like the method of access document.formName.fieldName is deprecated.
At least, editing your file on my comp locally shows that behavior.
Your functions will need to be rewrote and using the dom to achive this.

Maybe it's working on ie6, but I don't have any to test.
Anyone ?

**mastercomputers** · 11:57 PM

As I said if the validation returns true it submits the form.

What you need is to tell the form is where to submit it, usually to a processing script which will then process the information of your form. The processing script would be pointed to by the form's action.

Code:

if(errormessage.length < 2)

This part of the code is not the opposite of what you want, the opposite would be to check whether there's nothing in errormessage, rather than check if it has less than 2 characters. However the way the script is set up, if for any reason it does have errors, it will automatically return false, so anything after the script:

Code:

if(errormessage.length > 2)

Should be the part that returns true, which in the original script it does, there's no need for another check, all you need to do is:

Code:

//... What other things you'd like to happen
return true; // this will submit the form to the form's action

If there's errors on the page, it's possible that some methods/properties you use are not correct or not understood by the browser in question.

Cheers,

MC

**webgrrl** · 03:11 PM

Thank you for all of the advice, it is interesting that it works in Firefox but not in IE7. I need to work in all recent browsers, and since I am not familar with Javascript syntax, I don't really want to tackle re-writing this code to be up-to-date (not depreciated).

Maybe I should find some other code that will do the job? In my forms, I need to make sure that "if a checkboz is checked, then the text area needs to be filled out." Any suggestions?

There must be something better than what I was trying...

Thanks,

**mastercomputers** · 04:44 AM

If you can provide just the form, it'd be easier to write the script for that.

When you say text area do you mean the textarea element or you mean text inputs?

Say for instance, if I wanted someone to fill in their address if they checked a box saying they wanted information.

I could disable the textarea with javascript so that unless they checked to say they wanted information they could then fill out their address, otherwise there's no point in allowing it. When they check it, I want it to focus on the address textarea so they can fill it out too, without needing an additional click to go inside the textarea. When submitting, I'll check whether the checkbox is checked or not, if checked, I'll see if there's anything in the textarea though only a basic check on string length, so anything more than 2 characters will pass this. We could work on better means of checking but that's entirely up to you if you feel the need to get that far into it.

The code could simply be (working example):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>HTML Form with basic javascript validation</title>
		<script type="text/javascript">
		// <![CDATA[
		// disables textarea at start, enables it when checkbox is checked
		function toggleAddress() {
			var accept = document.getElementById('accept').checked;
			var address = document.getElementById('address');
			address.disabled ? address.disabled = false : address.disabled = true;
			if(accept) {
				address.focus();
			}
		}
		// ensures the checkbox is unchecked at start and page refresh
		function clearCheck() {
			document.getElementById('accept').checked = false;
		}
		// validates the form to see if checkbox is pressed and whether they filled out the mailing list
		// won't submit if checkbox is checked and there's no address
		// will submit if checkbox isn't checked
		function checkForm() {
			var errormessage = '';
			var accept = document.getElementById('accept').checked;
			if(accept) {
				var address = document.getElementsByTagName('textarea')[0];
				if(address.value.length > 2) {
					return true;
				}
				else {
					alert("A mailing address must be supplied if you want a catalogue.");
					return false;
				}
			}
			return true;
		}
		// ]]>
		</script>
	</head>
	<body onload="toggleAddress(); clearCheck();">
		<form action="?formsent=1" method="post" onsubmit="return checkForm()">
			<fieldset>
				<legend>Basic HTML Form</legend>
				<ul>
					<li><label for="accept">Would you like a catalogue sent to you? Yes</label> <input id="accept" name="accept" type="checkbox" onchange="toggleAddress();"/></li>
					<li><label for="address">Mailing Address:</label> <textarea id="address" rows="5" cols="50"></textarea></li>
				</ul>
				<input id="send" name="send" type="submit" value="Send!" />
			</fieldset>
		</form>
	</body>
</html>

Tested and verified it works in IE7 and FF2, I don't have IE6 to test.

Cheers,

MC

**webgrrl** · 06-28-2007, 03:37 PM

*smile* This is working very well! *sigh* of relief...

Yes, actually I need text inputs, not text areas.

I like the disable feature, but I notice that after you sucessfully submit, and then hit the "back button on your browser" the text field is still disabled, even after you hit "refresh" on your browser the text is still disabled. Is there a way to make it so that the text field is enabled whenever the checkbox is checked?

Here is a form. The idea: If you check the checkbox, then you must enter a numeric valuation (where one is required). The last three checkboxes on the form require a valuation (the first three do not require a valuation).

Code:

<FORM name=ProjectFocus action=estimate.asp method=post>
<FIELDSET><LEGEND>I want to do...</LEGEND>
<TABLE cellpadding="4" cellspacing="0">
<TR><TD colspan="2"><LABEL for=ELEC"><INPUT TYPE="checkbox" id=ELEC tabIndex=1 NAME=ProjectFocus0 VALUE="Electrical_Service_Upgrade"><FONT face=Tahoma size=2> Electrical Service Upgrade</FONT></LABEL></TD></TR>
<TR><TD colspan="2" bgcolor="#eeeeee"><LABEL for=HEAT"><INPUT TYPE="checkbox" id=HEAT tabIndex=2 NAME=ProjectFocus1 VALUE="HVAC_Replacement"><FONT face=Tahoma size=2> Heating, Ventilation & Air Conditioning Replacement (like for like)</FONT></LABEL></TD></TR>
<TR><TD colspan="2"><LABEL for=WATER"><INPUT TYPE="checkbox" id=WATER tabIndex=3 NAME=ProjectFocus2 VALUE="Water_Heater_Replacement"><FONT face=Tahoma size=2> Water Heater Replacement (like for like)</FONT></LABEL></TD></TR>
<TR><TD colspan="2">&nbsp;</TD></TR>
<TR><TD colspan="2" bgcolor="#eeeeee"><LABEL for=WINDOW"><INPUT TYPE="checkbox" id=WINDOW tabIndex=4 NAME=ProjectFocus3 VALUE="Window_Replacement"><FONT face=Tahoma size=2> Window Replacement (enlargement, reduction and/or new windows)</FONT></LABEL></TD></TR>
<TR><TD width="30%" bgcolor="#eeeeee"></TD><TD bgcolor="#eeeeee"><FONT face=Tahoma size=2>Enter Valuation:&nbsp;</FONT><input type=text id=WINDOWVALUATION tabIndex=5 name=Window_Replacement_Valuation></TD></TR>
<TR><TD colspan="2">
<LABEL for=REFOOF"><INPUT TYPE="checkbox" id=REROOF tabIndex=6 NAME=ProjectFocus4 VALUE="Re_Roofing"><FONT face=Tahoma size=2> Re-Roofing</FONT></LABEL></TD></TR>
<TR><TD></TD><TD><LABEL for=REROOFMAT><FONT face=Tahoma size=2>Re-Roofing Materials</FONT></LABEL>
<SELECT id=REROOFMAT tabIndex=7 NAME="Re_Roofing_Materials" SIZE="1">
<OPTION value="ReHYPHENRoofing_CompositeFSLASHShake"><FONT face=Tahoma size=2>Composite/Shake</FONT>
<OPTION value="ReHYPHENRoofing_MetalFSLASHTile"><FONT face=Tahoma size=2>Metal/Tile</FONT>
</SELECT></TD></TR>
<TR><TD></TD><TD><FONT face=Tahoma size=2>Enter Valuation:&nbsp;</FONT><input type=text id=REROOFVALUATION tabIndex=8 name=Re_Roofing_Valuation></TD></TR>

<TR><TD colspan="2" bgcolor="#eeeeee"><LABEL for=RESIDE"><INPUT TYPE="checkbox" id=RESIDE tabIndex=9 NAME=ProjectFocus5 VALUE="Re_Siding"><FONT face=Tahoma size=2> Re-Siding</FONT></LABEL></TD></TR>
<TR><TD bgcolor="#eeeeee"></TD><TD bgcolor="#eeeeee"><FONT face=Tahoma size=2>Enter Valuation:&nbsp;</FONT><input type=text id=RESIDEVALUATION tabIndex=9 name=Re_Siding_Valuation></TD></TR>
</TABLE>
</FIELDSET>
</FORM>

You are awesome...

Thanks,
WebGrrl

**mastercomputers** · 07-05-2007, 05:07 AM

Hey WebGrrl,

I haven't forgotten about this, just been a bit busy lately, thanks for bringing up that problem with IE, I've added a small solution for it (quick fix really), but it wasn't apparent in FF at all.

I'll start working on this form and come up with the solution later.

Cheers,

MC

**mastercomputers** · 06:49 AM

OK here's a do-hickory hack of the above form, not the idealist way to go about it but I rushed it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>HTML Form with basic javascript validation</title>
		<script type="text/javascript">
		// <![CDATA[
		function init() {
			var inputs = document.getElementsByTagName('input');
			for(i in inputs) {
				switch(inputs[i].type) {
					case 'checkbox':
						inputs[i].checked = false;
						break;
					case 'text':
						inputs[i].disabled = true;
						break
					default:
						break;
				}
			}
		}
		function enableInput(el) {
			document.getElementById(el.id + 'valuation').disabled = (document.getElementById(el.id + 'valuation').disabled) ? false : true;
		}
		function validateForm() {
			var errormsg = '';
			var inputs = new Array(document.getElementById('window'),document.getElementById('reroof'),document.getElementById('reside'));
			for(i in inputs) {
				if(inputs[i].checked) {
					if((document.getElementById(inputs[i].id + 'valuation').value.length < 2) || isNaN(document.getElementById(inputs[i].id + 'valuation').value)) {
						errormsg += inputs[i].id + ": Requires a valid number of certain length.\n";
					}
				}
			}
			if(errormsg.length < 2) {
				return true;
			}
			alert(errormsg);
			return false;
		}
		// ]]>
		</script>
	</head>
	<body onload="init();">
		<form action="?estimate=1" method="post" onsubmit="return validateForm();">
			<fieldset>
				<legend>I want to do&hellip;</legend>
				<ul>
					<li><input id="elec" name="ProjectFocus0" tabindex="1" value="Electrical_Service_Upgrade" type="checkbox" /> <label for="elec">Electrical Service Upgrade</label></li>
					<li><input id="heat" name="ProjectFocus1" tabindex="2" value="HVAC_Replacement" type="checkbox" /> <label for="heat">Heating, Ventilation &amp; Air Conditioning Replacement (of similar type)</label></li>
					<li><input id="water" name="ProjectFocus2" tabindex="3" value="Water_Heater_Replacement" type="checkbox" /> <label for="water">Water Heater Replacement (of similar type)</label></li>
					<li><input id="window" name="ProjectFocus3" tabindex="4" value="Window_Replacement" type="checkbox" onchange="enableInput(this);" /> <label for="window">Window Replacement (enlargement, reduction and/or new windows)</label></li>
					<li><label for="windowvaluation">Window valuation:</label> <input id="windowvaluation" name="Window_Replacement_Valuation" tabindex="5" type="text" /></li>
					<li><input id="reroof" name="ProjectFocus4" tabindex="6" value="Re_Roofing" type="checkbox" onchange="enableInput(this);" /> <label for="reroof">Re-Roofing</label></li>
					<li><label for="reroofmat">Re-Roofing Materials</label>
						<select id="reroofmat" name="Re_Roofing_Materials" tabindex="7">
							<option label="Composite/Shake" value="ReHYPHENRoofing_CompositeFSLASHShake">Composite/Shake</option>
							<option label="Metal/Tile" value="ReHYPHENRoofing_MetalFSLASHTile">Metal/Tile</option>
						</select></li>
					<li><label for="reroofvaluation">Re-Roof Valuation:</label> <input id="reroofvaluation" name="Re_Roofing_Valuation" tabindex="8" type="text" /></li>
					<li><input id="reside" name="ProjectFocus5" tabindex="9" value="Re_Siding" type="checkbox" onchange="enableInput(this);" /> <label for="reside">Re-Siding</label></li>
					<li><label for="residevaluation">Reside Valuation:</label> <input id="residevaluation" name="Re_Siding_Valuation" tabindex="9" type="text" /></li>
				</ul>
				<input id="send" name="send" value="Send!" type="submit" />
			</fieldset>
		</form>
	</body>
</html>

I could have spent more time cleaning up the script, but this should hopefully help you out.

Cheers,

MC