Question

i have a form containing inputs for times (specifically, an opening and closing time). when the submit button is pressed, it goes to a php page where these inputs are added to a database. i want to check a few things before allowing the form to submit. for example, i want to make sure that the start time is earlier than (less than) the end time. here’s the form:

            Opens:
            <select name="starthour1">
                <option value="00">12</option>
                <option value="01">1</option>
                <option value="02">2</option>
                <option value="03">3</option>
                <option value="04">4</option>
                <option value="05">5</option>
                <option value="06">6</option>
                <option value="07">7</option>
                <option value="08">8</option>
                <option value="09">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
            </select> : 
            <select name="startminute1">
                <option value="00">00</option>
                <option value="15">15</option>
                <option value="30">30</option>
                <option value="45">45</option>
                <option value="59">59</option>
            </select> 
            <select name="startwhen1">
                <option value="am">am</option>
                <option value="pm">pm</option>
            </select>

            Closes:
            <select name="endhour1">
                <option value="00">12</option>
                <option value="01">1</option>
                <option value="02">2</option>
                <option value="03">3</option>
                <option value="04">4</option>
                <option value="05">5</option>
                <option value="06">6</option>
                <option value="07">7</option>
                <option value="08">8</option>
                <option value="09">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
            </select> : 
            <select name="endminute1">
                <option value="00">00</option>
                <option value="15">15</option>
                <option value="30">30</option>
                <option value="45">45</option>
                <option value="59">59</option>
            </select> 
            <select name="endwhen1">
                <option value="am">am</option>
                <option value="pm">pm</option>
            </select>

i found javascript code for how to check individual form elements, but i can’t figure out how i could combine multiple without submitting. in my php page, i have the following code:

$starthour1=$_POST['starthour1'];
$startminute1=$_POST['startminute1'];
$startwhen1=$_POST['startwhen1'];
$endhour1=$_POST['endhour1'];
$endminute1=$_POST['endminute1'];
$endwhen1=$_POST['endwhen1'];

$start_time1=$end_time1="";

    if($startwhen1=="pm"){
        $starthour1=$starthour1+12;
    }
    if($endwhen1=="pm"){
        $endhour1=$endhour1+12;
    }
    $start_time1=$starthour1.":".$startminute1.":00";
    $end_time1=$endhour1.":".$endminute1.":00";
    if($end_time1=="00:00:00"){
        $end_time1="23:59:00";
    }

echo "<br>start time is ".$start_time1;
echo "<br>end time is ".$end_time1;

$startnum=str_replace(":", "", $start_time1);
$endnum=str_replace(":", "", $end_time1);
if($endnum<$startnum){
    echo "<br>start time can't be later than end time!";
}
else{
   //add to database
}

however, checking this stuff after submitting doesn’t make sense. i suppose i could redirect back to the initial page if the error was found, but that doesn’t seem efficient.

also, i was thinking maybe i could have some php on the page with the form that checks for validity. if it validates, it then posts to the php page that inserts stuff into the database. does this make sense and is it possible?

is there a better solution? i imagine there is something i could do with javascript but i haven’t been able to figure it out.

additionally i’d like to inform the user of invalid inputs with text that appears next to the input box. i should be able to figure this out once the rest is working though.

thanks.

Answer 1

Have the onSubmit() or action of the form call a JavaScript function, like this:

<form id="form" onSubmit="return doSubmit();" action="#">

Then, in doSubmit() you can actually perform any of the validations (and only actually submit the form if they pass)

function doSubmit(){       
    if (validationsPass()) {
         $('#form').submit();
    }
}

To inform users of invalid input next to the actual form field, you can have hidden divs or spans next to each field, and use Javascript to un-hide them if they fail some sort of validation.

if(!fieldNotValid){
     $('#field-error').show(); //Or use effects like .highlight()
}