www.webdeveloper.com
Results 1 to 7 of 7

Thread: form validation

  1. #1
    Join Date
    Jun 2004
    Posts
    56

    form validation

    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

  2. #2
    Join Date
    Nov 2003
    Location
    Aachen, Germany
    Posts
    4,090
    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
    The perfect website, which isn't one: http://www.pit-r.de (completely re-designed)

    Bad news for many "important" members here: I am still alive.

  3. #3
    Join Date
    Jun 2004
    Location
    MN USA
    Posts
    63
    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>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td><strong class="greenTitleText">OR</strong></td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</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">&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    <input type="Submit" value="Submit">
    </form>

    </body>
    </html>

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

  4. #4
    Join Date
    Mar 2004
    Location
    TN, United States
    Posts
    250
    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

  5. #5
    Join Date
    Jun 2004
    Posts
    56
    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

  6. #6
    Join Date
    Mar 2004
    Location
    TN, United States
    Posts
    250
    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

  7. #7
    Join Date
    Jun 2004
    Posts
    56
    oops, forgot to change the text next to the field

    cheers for noticing

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles