Redirect to 3 pages depending of selected option with validation

Question

I'm trying to redirect to a page based on the selected option, but with javascript validation.

I have this form:

<form action="verify.php" method="post">

<label for="class_year" class="inner_text">Year Range</label>
<select id="class_year" name="year">
    <option value="a">50</option>
    <option value="b">60</option>
    <option value="c">70</option>
    <option value="c">80</option>
    <option value="c">90</option>
</select>

<label for="dob" class="inner_text">Date of Birth (YY-MM-DD)</label>
<input name="dob" type="text" class="false" id="dob" maxlength="10">

</form>

Now I have this verify.php file that redirect for example to a.html if you choose 1950:

<?php

header('Location: '.$_POST['year'].'.php');

?>

What I want to do is to verify what my visitors choose. For example if you write 51-02-28 in text box, that mean you must choose 1950, so you will be redirected to a.html; if you write for example 61-02-28 but you choosed 1950 then you can't submit the form an a alert will show. And if you write anything else for example 41-02-29, then you will be alerted too and the form will not be submited. The first 2 option redirect to a.html and b.html, the last 3 options redirect to the same page c.html .

In conclusion I need to validate only the first number from the text box. I don't know how to do that with javascript!

I apreciate any and all comments, thank you.

Answer 1

You can go ahead with validation by using normal javascript and while redirecting you can use something like this instead of PHP redirect

Your code should be something like this:

    <form action="verify.php" method="post" id="mainForm">

    <label for="class_year" class="inner_text">Year Range</label>
    <select id="class_year" name="year">
        <option value="50">50</option>
        <option value="60">60</option>
        <option value="70">70</option>
        <option value="80">80</option>
        <option value="90">90</option>
    </select>

    <label for="dob" class="inner_text">Date of Birth (YY-MM-DD)</label>
    <input name="dob" type="text" class="false" id="dob" maxlength="10">

    </form>
<script type="text/javascript">
$("#mainForm").submit(function(){
    var yearVal = $("#dob").val().split("-")[0];
    var redirectObj= [
        ['50','a'],
        ['60','b'],
        ['70','c'],
        ['80','c'],
        ['90','c']
    ];
    if(parseInt(yearVal)>parseInt($("#class_year").val()) && parseInt(yearVal)<(parseInt($("#class_year").val())+10))
    {
    var redirectPage = "";
    redirectObj.forEach(function(entry) {
       if(parseInt(entry[0])==(Math.round(parseInt(yearVal)/10))*10)
    {
    redirectPage = entry[1];
    }
    });
        window.location = redirectPage+".php";
}
else
{
alert("you have entered invalid value");
return false;
}
});

In case you want to redirect it to the first letter of the textbox you can use something like this

window.location = $("#dob").val().charAt(0)+".php";

You may check the working code at http://jsfiddle.net/amanchhabra1990/Uy78a/

Please let me know if this helps you.