CODEWITHSUNDEEP
javascriptjqueryvalidation
user1093513
user1093513

Reputation: 127

Javascript Validation Not Working

The validation Of Budget Range is not working in the below code. It Brings Different Results at different point of time.

<table>
    <tr>
        <td>
            Budget Range
        </td>
        <td>
            <select id="start">
                <option value="">---Select---</option>
                <option value="0">0</option>
                <option value="1000000">10 Lakhs</option>
                <option value="2500000">25 Lakhs</option>
                <option value="5000000">50 Lakhs</option>
                <option value="7500000">75 Lakhs</option>
                <option value="10000000">1 Crore</option>
                <option value="12500000">1 Crore 25 Lakhs</option>
                <option value="15000000">1 Crore 50 Lakhs</option>
                <option value="17500000">1 Crore 75 Lakhs</option>
                <option value="20000000">2 Crore</option>
                <option value="25000000">2 Crore 50 Lakhs</option>
                <option value="30000000">3 Crore</option>
                <option value="35000000">3 Crore 50 Lakhs</option>
                <option value="40000000">4 Crore</option>
                <option value="45000000">4 Crore 50 Lakhs</option>
            </select>
            to
            <select id="end" onchange="selectRange()">
                <option value="0">---Select---</option>
                <option value="1000000">10 Lakhs</option>
                <option value="2500000">25 Lakhs</option>
                <option value="5000000">50 Lakhs</option>
                <option value="7500000">75 Lakhs</option>
                <option value="10000000">1 Crore</option>
                <option value="12500000">1 Crore 25 Lakhs</option>
                <option value="15000000">1 Crore 50 Lakhs</option>
                <option value="17500000">1 Crore 75 Lakhs</option>
                <option value="20000000">2 Crore</option>
                <option value="25000000">2 Crore 50 Lakhs</option>
                <option value="30000000">3 Crore</option>
                <option value="35000000">3 Crore 50 Lakhs</option>
                <option value="40000000">4 Crore</option>
                <option value="45000000">4 Crore 50 Lakhs</option>
            </select>
        </td>
    </tr>
</table>
<script>

    function selectRange() {
        $startRange = document.getElementById('start').value;
        $endRange = document.getElementById('end').value;

        alert($startRange);
        alert($endRange);

        alert($startRange > $endRange);

        if ($startRange > $endRange) {
            alert('The Budget End Should be Greater than Budget Start');
            $endRange = document.getElementById('end').value = 0;
            return false
        }
    }
</script>

The validation Of Budget Range is not working in the above code. It Brings Different Results at different point of time.

Upvotes: 0

Views: 190

Answers (2)

Bergi
Bergi

Reputation: 665455

The value property of select elements returns a string on getting. When you compare them, they will be compared alphabetically, i.e. "5000000" > "45000000". Convert them to numbers before by using parseInt() or by implicit conversion with +.

if (+$startRange > +$endRange)

Btw, JavaScript variables do not need to start with $.

Upvotes: 0

Yograj Gupta
Yograj Gupta

Reputation: 9869

when you are getting value these are coming as string or your comparison is based on string value, so it is producing wrong result. cast them to number will help. just replace these line of code 

$startRange = document.getElementById('start').value;
$endRange = document.getElementById('end').value;

to

$startRange = parseInt(document.getElementById('start').value,10);
$endRange = parseInt(document.getElementById('end').value, 10);

or 

$startRange = Number(document.getElementById('start').value);
$endRange = Number(document.getElementById('end').value);

and check this jsfiddle http://jsfiddle.net/QWLEW/2/ using parseInt function

or check this http://jsfiddle.net/QWLEW/3/ using Number function

Upvotes: 2

Related Questions