form validation

**Ashcrapper** · 06-18-2004 08:37 AM

Is it possible to validate a form so that if a tickbox is ticked, the user must fill in two text fields too.

Basically the form is for inputting potential vacancies to a database and has a section on the job type. this being either full or part time. depending which option they choose they need to fill in two other fields relating to their choice:

Full Time Option
- Weekly Hours
- Salary Per Annum

Part Time Option
- Weekly Hours
- Salary Per Hour

Ive currently got this set up like:

http://www.n2nmagazine.co.uk/develop...ecruitment.htm

Thanks in advance
Ash

**Pittimann** · 06-18-2004 10:09 AM

Hi!

Wouldn't it be much easier to only use two input boxes instead of four and use two radio buttons instead of checkboxes?

The script receiving the form data could the write the stuff to the database depending on the value, it receives for the checked radio button.

Cheers - Pit

**Bhanu** · 06-18-2004 10:17 AM

try this

Bhanu
-------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<script language="JavaScript">
function checkCheckBox(){
if(document.all['fullTime'].checked==true){
if(document.all['FTweeklyHours'].value==""){alert("Enter value for FTweeklyHours"); return false;}
if(document.all['department'].value==""){alert("Enter value for department"); return false;}
}
if(document.all['partTime'].checked==true){
if(document.all['PTweeklyHours'].value==""){alert("Enter value for PTweeklyHours"); return false;}
if(document.all['Salary'].value==""){alert("Enter value for Salary"); return false;}
}
return true;
}
</script>
<body >
<form action="" onsubmit=" return checkCheckBox();">
<table >
<tr>
<td colspan="2" class="bottomBorder"><span class="largeText">Job Type</span></td>
</tr>
<tr>
<td colspan="2">Please select the relevant option and fill in the details </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>Full Time:</strong></td>
<td>
<input name="fullTime" type="checkbox" id="fullTime" value="checkbox" />
</td>
</tr>
<tr>
<td><strong>Weekly Hours:</strong></td>
<td>
<input name="FTweeklyHours" type="text" class="inputs" id="FTweeklyHours" value="" size="30" />
</td>
</tr>
<tr>
<td><strong>Salary p.a</strong></td>
<td>
<input name="department" type="text" class="inputs" id="department" value="" size="30" />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong class="greenTitleText">OR</strong></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>Part time: </strong></td>
<td>
<input name="partTime" type="checkbox" id="partTime" value="checkbox" />
</td>
</tr>
<tr>
<td><strong>Weekly Hours:</strong></td>
<td>
<input name="PTweeklyHours" type="text" class="inputs" id="PTweeklyHours" value="" size="30" />
</td>
</tr>
<tr>
<td><strong>Salary p.h</strong></td>
<td>
<input name="Salary" type="text" class="inputs" id="Salary" value="" size="30" />
</td>
</tr>
<tr>
<td colspan="2" class="bottomBorder"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<input type="Submit" value="Submit">
</form>

</body>
</html>

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

**Tage** · 06-18-2004 11:44 AM

I'm not trying to be offensive, but that code is Internet Explorer-only. So try this one if you want it to span more web browsers.

Note: Pittimann's suggestion used.

PHP Code:


<html>

<head>

<title>Form Validation</title>

</head>

<script type="text/javascript">

<!--

function validateForm(){

    var counter=0;

    if(document.theForm.hours.value==""){

        counter++}

    if(document.theForm.salary.value==""){

        counter+=2}

    if(counter==1){

        alert("Please enter a value for \"Weekly Hours\"");

        return false}

    else if(counter==2){

        alert("Please enter a value for \"Salary Per Hour\"");

        return false}

    else if(counter==3){

        alert("Please enter values for \"Weekly Hours\" and \"Salary Per Hour\"");

        return false}

    return true}

//-->

</script>

<body>

<form name="theForm" onSubmit="return validateForm()">

Part Time:<input type="radio" name="time" checked> Full Time:<input type="radio" name="time"><br>

Weekly Hours: <input type="text" name="hours"><br>

Salary Per Hour: <input type="text" name="salary"><br>

<input type="submit" value="Submit">

</body>

</html>

Tage

**Ashcrapper** · 06-22-2004 06:54 AM

Hi

Thanks for the help, decided to change the form slightly to make it a bit easier using a couple of drop down menus. Seems more logical now:

http://www.n2nmagazine.co.uk/develop...acancyForm.asp

ive not added any validation in just yet, was just getting the form to work properly passing the values from page to page.

Cheers
Ash

**Tage** · 06-22-2004 09:52 PM

Yah, and you might want to rename "Full Time:" to something else because the options "Full Time" and "Part Time" don't really answer the question of "Full Time?" if that made sense. It's hard to convey ideas sometimes. =|

Tage

**Ashcrapper** · 06-23-2004 02:35 AM

oops, forgot to change the text next to the field

cheers for noticing

Thread: form validation

Thread Tools

Display

form validation

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions