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.