Javascript Forms in Firefox

[dja989]

Ok I have this javscript for a form and it works fine in Internet Explorer, and some of it works in Firefox, but not all of it.

Here is the javascript:


function erasetext(value)
{
if (mapform.cityinput.value=="") mapform.cityinput.value="City";
if (mapform.stateinput.value=="") mapform.stateinput.value="State";
if (mapform.zipinput.value=="") mapform.zipinput.value="Zip Code";
if (mapform.streetinput.value=="") mapform.streetinput.value="Street Address";
fieldnumber = value;
switch(fieldnumber)
{
case 1: if (mapform.cityinput.value=="City") mapform.cityinput.value=""; break;
case 2: if (mapform.stateinput.value == "State") mapform.stateinput.value = ""; break;
case 3: if (mapform.zipinput.value == "Zip Code") mapform.zipinput.value = ""; break;
case 4: if (mapform.streetinput.value == "Street Address") mapform.streetinput.value = ""; break;
}
}
function submitmap(form)
{
if (form.streetinput.value=="Street Address") form.streetinput.value="";
if (form.cityinput.value=="City") form.cityinput.value="";
if (form.stateinput.value=="State") form.stateinput.value="";
if (form.zipinput.value=="Zip Code") form.zipinput.value="";

}

function checkentries(event,form)
{
if (event && event.which == 13 || event.keyCode==13)
{
if (form.stateinput.value=="State" || form.stateinput.value=="")
{
if (form.zipinput.value=="Zip Code" || form.zipinput.value=="")
{
alert('Please enter a State or Zip Code');
}
else submitmap(mapform);
}
else submitmap(mapform);
}
}
function submitclick(form)
{
if(form.stateinput.value=="State" || form.stateinput.value=="")
{
if (form.zipinput.value=="Zip Code" || form.zipinput.value=="")
{
alert('Please enter a State or Zip Code');
}
else submitmap(mapform);
}
else submitmap(mapform);
}


Now here is the html:


<form name="mapform" action="" method="get">
<input type="text" name="streetinput" value="Street Address" onclick="erasetext(4)" size="20" onkeypress="checkentries(event,this.form)">
<input type="text" name="cityinput" value="City" onclick="erasetext(1)" size="20" onkeypress="checkentries(event,this.form)">&nbsp;&nbsp;
<input type="text" name="stateinput" value="State" onclick="erasetext(2)" size="20" onkeypress="checkentries(event,this.form)">&nbsp;&nbsp;
<input type="text" name="zipinput" value="Zip Code" onclick="erasetext(3)" size="20" onkeypress="checkentries(event,this.form)"><br>
<input type="button" name="start" value="Submit" onclick="submitclick(this.form)">
</form>


I thought it used to work in firefox but now it does not.

Any help is greatly appreciated.

[mwinter]

You're assuming, in several places, that a global variable with the name of the form element should exist, containing a reference to said form. That assumption is very much flawed. You also seem to be overdoing your validation, attempting to capture submission in a variety of ways, rather than the simplest: the submit event.

Before I suggest an alternative, there are a few things that I'd prefer to address.

The first is your use of default input values, and the script code surrounding that. Playing with values in that way isn't a particularly good idea. Moreover, based on the markup you presented, these default values are the only way for the user to know what they're supposed to enter, and where. I sincerely hope that you just chose to omit labels for the sake of berevity.

The second is that you seem to want to submit the form using client-side scripting, as the button with the label 'Submit' is a plain button. If this is true, don't. Ever! Always use a proper submit button.


So, on to the alternative:



function isEmpty(string) {
return !/\S+/.test(string);
}

function validate(form) {
var controls = form.elements;

/* Requiring only one of either state or zip code seemed
* rather odd (though I'm not an American, admittedly), so
* the code below doesn't follow the original logic.
*/
if (isEmpty(controls.state.value)) {
alert('Please enter a state.');
return false;
}
if (isEmpty(controls.zip.value)) {
alert('Please enter a zip code.');
return false;
}
return true;
}




<form action="..." onsubmit="return validate(this);">
<table>
<tr>
<th><label for="street">Street</label>:</th>
<td><input id="street" name="street" value=""></td>
</tr>
<tr>
<th><label for="city">City</label>:</th>
<td><input id="city" name="city" value=""></td>
</tr>
<tr>
<th><label for="state">State</label>:</th>
<td><input id="state" name="state" value=""></td>
</tr>
<tr>
<th><label for="zip-code">Zip code</label>:</th>
<td><input id="zip-code" name="zip" value=""></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
Simple.

If you really want the previous behaviour, then I can suggest a better implementation of it, but I'd really rather not.

Mike

[dja989]

Thanks for the help, I got it to work right.