Form field checker

**TimNiceButDim** · Mar 5, 2004, 09:47

I am having a little trouble altering this script to work well on my form. You can see the form at http://www.hostcompanies.com/formtest.htm . Basically i want all fields completed before it lets the form submit. The script is working fine but in the bandwidth section i want to make it do the following.
The person should have to fill in a bandwidth number plus either selecting MB or GB - if this is not done then the forum should say "You need to enter a monthly bandwidth for this web hosting package", however if they select unlimited bandwidth - then the forum should submit without displaying any message.

Below is the javascript

Can anyone see what i have done wrong?

**rushiku** · Mar 5, 2004, 11:04

pseudocodically speaking:

Code:

if not unlimited then
  if not(bandwidth has entry) then
    no bandwidth entered error
  end if
  if mb not selected and gb not selected then
    speed not selected error
  end if
end if

**TimNiceButDim** · Mar 5, 2004, 11:08

I am sorry rushiku, i don't quite understand what you mean.

**rushiku** · Mar 5, 2004, 11:13

I editted my entry, you're too quick

**adios** · Mar 5, 2004, 11:16

Interesting way to start a page...

Code:

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<title>Untitled Document</title>

You've also got stylesheets all over the place, with HTML commenting in between; why not consolidate them and use CSS (/* ... */) comments? Same with your JS. You've referenced your form ('form1') as a global variable in your script; this only flies in MSIE. Use document.form1, or document.getElementById('form1') - with an id assigned, of course - cross-browser.

This:

Code:

<input type="radio" name="bandwidthtype" value="1" checked>
<input type="radio" name="bandwidthtype" value="2" >
<input type="radio" name="bandwidthtype" value="3" >

...ends up like this (DOM):

Code:

Radio 1: ref_to_form.bandwidthtype[0]
Radio 2: ref_to_form.bandwidthtype[1]
Radio 3: ref_to_form.bandwidthtype[2]

So:

Code:

} else if (form1.monthlybandwidth.value == '' &&
	(form1.bandwidthtype[0].checked || form1.bandwidthtype[1].checked))  {
		alert('You need to enter a monthly bandwidth for this web hosting package.');
		return false;

I'd do this as well:

Code:

	<input type="text" name="monthlybandwidth" size="4"  class="form" value="" onclick="bandwidthtype[0].checked=true">
                                </b></td>
                  <td><b>
                    <input type="radio" name="bandwidthtype" value="1" checked>
                                MB</b><b> 
                                <input type="radio" name="bandwidthtype" value="2" >
                                GB <img src="blank.gif" width="20" height="8">or 
                                Unlimited Bandwidth 
                                <input type="radio" name="bandwidthtype" value="3" >
                                </b></td>
                </tr>
                <tr>
                  <td colspan="3"><img src="blank.gif" width="5" height="10"></td>
                </tr>
                <tr>
                  <td><b>Disk Space :</b></td>
                  <td><b>
                    <input type="text" name="diskspace" size="4" class="form" value="" onclick="diskspaceType[0].checked=true">
                    </b></td>
                  <td><b>
                    <input type="radio" name="diskspaceType" value="1" checked>
                    MB</b><b>
                    <input type="radio" name="diskspaceType" value="2" >
                    GB <img src="blank.gif" width="20" height="8">or Unlimited
                    Bandwidth
                    <input type="radio" name="diskspaceType" value="3" >
                    </b></td>

For a long form like this, some sort of focussing on an invalid entry is helpful.

**TimNiceButDim** · Mar 5, 2004, 11:58

Thanks adios, however - i cannot change the actual form - this is going to be generated by a database and will be a lot of hassle to change it now.
It seems to work fine with just changing the script and without changing the form.
What was the reason for changing the forum? Is it important?

Also i am a little unsure of this -

You've referenced your form ('form1') as a global variable in your script; this only flies in MSIE. Use document.form1, or document.getElementById('form1') - with an id assigned, of course - cross-browser.

My javascript is poor... could you show me an example?
I do appretiate the help you have given so far.

**adios** · Mar 5, 2004, 12:11

Code:

function checkForm()
{
if (document.form1.nameofpackage.value == '') {
......

Change all these references...'form1' by itself isn't sufficient.

The change I made will check the leftmost radio button ('MB') if the user, after selecting the 'unlimited bandwith' button, changes their mind and clicks on the textfield to enter a bandwith figure. It basically restores the default check to the first button, which seems sensible. Try it (if you can).

**TimNiceButDim** · Mar 5, 2004, 12:25

Its working fine without changing the actual form. I have changed the script.
Thanks for this...
Sorry to be a pain, i figure you like a challenge.
Would this be possible?
Make it so that if they selected Unlimited bandwidth and also entered a bandwith figure i could display a message like "You have chosen to enter a bandwidth and also entered unlimited bandwith - please choose which one you want".
And i was curious if i could somehow make sure they entered numbers in the bandwidth field - so that if they entered letters - it would tell them they had made a mistake?

I uploaded the changes so far - http://www.hostcompanies.com/formtest.htm

Sorry to ask so many questions but your obviously very good at this.

**adios** · Mar 5, 2004, 13:05

Thanks for the compliment!

You could do it that way; in my experience, it's usually better to unobtrusively correct user input rather than nag the little blighters...the way I posted assumes they intend to enter a figure (why else would they click on the field) and so restores the original arrangement.

This:

Code:

} else if (document.form1.diskspace.value == '' &&
	(document.form1.diskspaceType[0].checked || document.form1.diskspaceType[1].checked))  {
		alert('You need to enter the amount of Disc Space. Also make sure you have selected either MB, GB or Unlimited Disc Space');

...(sorry, forgot to mention changing that form reference here, too!) seems a bit silly, as the code checks to see if MB/GB is selected (with the text field empty), so the second part of the prompt is overkill (imo). These are usability questions - not necessarily a 'right way' or 'wrong way' - and, as a user (I'd guess) your opinion is as good as anyone else's. Do what seems logical.

**TimNiceButDim** · Mar 5, 2004, 13:22

Hi Adios... i had already worked out how to do the discspace bit.

What i was looking to make it - so that if they selected Unlimited bandwidth and also entered a bandwith figure i could display a message like "You have chosen to enter a bandwidth and also entered unlimited bandwith - please choose which one you want".

**adios** · Mar 5, 2004, 14:28

Code:

<script type="text/javascript">

function checkForm()
{
	var f = document.form1;
	if (f.nameofpackage.value == '')
	{
		alert('You need to enter a name for this package.');
		f.nameofpackage.focus();
		return false;
	}
	else if (f.packagewebaddress.value == '')
	{
		alert('You need to enter a web address for this package.');
		f.packagewebaddress.focus();
		return false;
	}
	else if (f.description.value == '') {
		alert('You need to enter a description for this web hosting package.');
		f.description.focus();
		return false;
	}
	else if (f.monthlybandwidth.value == '' && (f.bandwidthtype[0].checked || f.bandwidthtype[1].checked))
	{
		alert('You need to enter a monthly bandwidth for this web hosting package.');
		f.monthlybandwidth.focus();
		return false;
	}
	else if (f.monthlybandwidth.value != '' && f.bandwidthtype[2].checked)
	{ 
		if (!confirm('You have selected a monthly Unlimited Bandwidth for this web hosting package. This will override any entry of MB/GB quantity. Continue?'))
		{
			f.bandwidthtype[0].checked = true;
			f.monthlybandwidth.focus();
			f.monthlybandwidth.select();
			return false;
		}
		else f.monthlybandwidth.value = '';
	}
	if (f.diskspace.value == '' && (f.diskspaceType[0].checked || f.diskspaceType[1].checked))
	{
		alert('You need to enter the amount of Disk Space.');
		f.diskspace.focus();
		return false;
	}
	else if (f.diskspace.value != '' && f.diskspaceType[2].checked)
		{
		if (!confirm('You have selected a monthly Unlimited Disk Space for this web hosting package. This will override any entry of MB/GB quantity. Continue?'))
		{
			f.diskspaceType[0].checked = true;
			f.diskspace.focus();
			f.diskspace.select();
			return false;
		}
		else f.diskspace.value = '';
	}
	if (f.monthlyfee.value == '')
	{
		alert('You need to enter a monthly fee for this package.');
		f.monthlyfee.focus();
		return false;
	}
	else if (f.currency.selectedIndex == 0)
	{
		alert('You need to select a currency type for this package.');
		f.currency.focus();
		return false;
	}
	else if (f.connectionspeed.selectedIndex == 0)
	{
		alert('You need to select a connection speed for this package.');
		f.connectionspeed.focus();
		return false;
	}
	else if (f.connectionspeed.options[f.connectionspeed.selectedIndex].text == 'Others' && 
		f.connectionother.value == '')
	{
		alert('Please enter "other" connection speed for this package.');
		f.connectionspeed.focus();
		return false;
	}
	var serveroptions = new Array('aolserver' , 'apache' , 'ntiis' , 'netscape' , 'oreilly' , 'others');
	for (var isOK = false, s = 0; s < serveroptions.length; ++s)
	{
		if (f.elements[serveroptions[s]].checked)
		{
			isOK = true;
			break;
		}
	}
	if (!isOK)
	{
		alert('You need to select a server option.');
		f.aolserver.focus();
		return false;
	}
	else if (f.others.checked && f.serverothers.value == '')
	{
		alert('You need to specify the "Other" server options.');
		f.serverothers.focus();
		return false;
	}
	else return true;
}

</script>

**TimNiceButDim** · Mar 5, 2004, 15:20

Thats great adios. One last thing... and then i can change all my forms.
I am trying to make sure they select a server, ect.
This is the code i tryed but its not working out.
This code is the same as the above apart from the last bit.

I was just testing it first on the aol server checkbox but i could not get it to work.
I really appreciate he help you have given me, its far beyond what most people would do.
If you have a website , to return the favour i can place your link on my links page (pr5 page).

**adios** · Mar 5, 2004, 19:39

You've got multiple server choices, with an optional 'others' requiring a text entry. Sound familiar? (see 'connectionspeed'). I'd put them in a drop-down, before the page gets any longer. Something like:

<font color="#333399">Server used in package</font>
<select name="server">
<option value="">Select Server</option>
<option value="aol">Aol Server</option>
<option value="apache">Apache</option>
<option value="iis">NT IIS</option>
<option value="netscape">Netscape</option>
<option value="oReilly">O'Reilly</option>
<option value="others">Others</option>
</select>
<font size="-1" color="#663300">I<i>f yo</i></font><font size="-1"><font color="#663300"><i>u
ticked others, pleased indicate the server you use below</i></font></font></b></b>
<input type="text" name="serverothers" size="40" class="form" value="">

Then:

Code:

.............
f.connectionspeed.focus();
return false;
}
else if (f.server.selectedIndex == 0)
{
alert('You need to select a server for this package.');
f.server.focus();
return false;
}
else if (f.server.options[f.server.selectedIndex].text == 'Others' && 
f.serverothers.value == '')
{
alert('You need to specify an "Other" server for this package in the text field.');
f.serverothers.focus();
return false;
}
else return true;
}

**TimNiceButDim** · Mar 5, 2004, 19:47

Problem with this is that the form is being created dynamically by a database - in fact there are several forms. I don't wish to change all the forms now since it would be difficult.
Is there not an easy way to do it in the script as the form currently is ( multiple server choices, with an optional 'others' requiring a text entry )?

**adios** · Mar 5, 2004, 20:14

Edited the above.

**TimNiceButDim** · Mar 5, 2004, 20:21

I understand what you mean but i can't change that part of the form as it is being generated dynamically from a database. The forum will stay as

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><b>Aol Server : <img src="blank.gif" width="10" height="8"></b></td>
<td>
<input type="checkbox" name="aolserver" value="1" >
</td>
</tr>
<tr>
<td><b>Apache

/b></td>
<td>
<input type="checkbox" name="apache" value="1" >
</td>
</tr>
<tr>
<td><b>NT IIS

/b></td>
<td>
<input type="checkbox" name="ntiis" value="1" >
</td>
</tr>
<tr>
<td><b>Netscape

/b></td>
<td>
<input type="checkbox" name="netscape" value="1" >
</td>
</tr>
<tr>
<td><b>O'Reilly

/b></td>
<td>
<input type="checkbox" name="oreilly" value="1" >
</td>
</tr>
<tr>
<td><b>Others : </b></td>
<td>
<input type="checkbox" name="others" value="1" >
</td>
</tr>
</table>
<p><b><b><font size="-1" color="#663300">I<i>f yo</i></font><font size="-1"><font color="#663300"><i>u
ticked others, pleased indicate the server you use below</i></font></font></b></b>
<br>
<br>
<input type="text" name="serverothers" size="40" class="form" value="">

Id like to know how to change the script so that i can make sure they select a server or type in a server if they select others.
Sorry about the misunderstanding.

**adios** · Mar 5, 2004, 22:11

...as I said:

Edited the above.

**TimNiceButDim** · Mar 6, 2004, 09:38

Oh well, i can't do it that way because like i said the form is being generated dynamically. So i can't change the form to

<font color="#333399">Server used in package</font>
<select name="server">
<option value="">Select Server</option>
<option value="aol">Aol Server</option>
<option value="apache">Apache</option>
<option value="iis">NT IIS</option>
<option value="netscape">Netscape</option>
<option value="oReilly">O'Reilly</option>
<option value="others">Others</option>
</select>
<font size="-1" color="#663300">I<i>f yo</i></font><font size="-1"><font color="#663300"><i>u
ticked others, pleased indicate the server you use below</i></font></font></b></b>
<input type="text" name="serverothers" size="40" class="form" value="">

To makes the script work.

**adios** · Mar 6, 2004, 11:38

Tim...starting to wonder if that username wasn't a joke...

[I already] Edited [including the changes] the [script that I already posted] above [to save space].

**TimNiceButDim** · Mar 6, 2004, 11:52

Ah..... i was looking at the wrong script! LOL - i guess the name isn't a good after all.
I really appreaciate the help you gave.

If you do have a website, i can place your link here - http://www.hostcompanies.com/miscellaneous.htm (pr5) - will help your search engine positions.

If you don't have a website - all i call say is.. thanks!

**adios** · Mar 6, 2004, 11:57

I do have one - but I'm laying low at the moment.

Will get back to you on it & thanks for the offer.

PM me if you need any fine-tuning (or unsolicited advice).

cheers, Rob

**TimNiceButDim** · Mar 7, 2004, 14:39

Just when you thought it was safe to go back on sitepoint...
I thought adapting the script would be straight forward, guess i was wrong. I tryed to make it so that it would also work with the platforms option. I can't see what i have done wrong - i am perplexed by this.
The script is below, as far as i can see it should work no problem.

**adios** · Mar 7, 2004, 15:30

Tim...nice job, looks OK here..works too (Opera 7, iewin, fb 0.7). What's it doing on your end?

Be sure to check Tools>Internet Options...>Advanced>Display a notification... in IE, or Tools>JavaScript Console in moz for error feedback.

**TimNiceButDim** · Mar 7, 2004, 17:19

Well here it is - http://www.hostcompanies.com/formtest3.htm.

If you will out the form but yet do not tick an operating system / platform - it should display an alert.
But it doesn't?

**adios** · Mar 7, 2004, 23:13

That's because you've got 2

of your checkForm() validator functions pasted in - one at the beginning of the form, the other, older version, without the additions, at the end. JavaScript simply overwrites the first function declaration when it gets down to the second. This is as good a reason as any to gather all your scripts - if possible (usually is) - in the <head>er of the file. Easier to see what's going on that way.

http://www.quirksmode.org/js/placejs.html

The SitePoint Forums have moved.

User Tag List

Thread: Form field checker

Thread Tools

Display

Form field checker

Bookmarks

Bookmarks

Posting Permissions