onchange() on dropdown not calling the function

Question

Below is my HTML code:

I want the script to run when an option is selected. I think the code I have written in correct. console.log() is not printing anything on the console so this means the function is not invoked. Can anybody help me? This is very basic code but I don't know whats wrong in it.

<div class="form-group required">
    <label for="InputLastName">For how many hours ? <sup>*</sup> </label>
    <select name="serviceHours" id="hours" onchange="getHours(this.value)">
    <option value="" selected>---------</option>
    <option value="1">1 Hour</option>
    <option value="2">2 Hours</option>
    <option value="3">3 Hours</option>
    <option value="4">4 Hours</option>
    <option value="5">5 Hours</option>
    <option value="6">6 Hours</option>
    <option value="7">7 Hours</option>
    <option value="8">8 Hours</option>
    <option value="9">9 Hours</option>
    <option value="10">10 Hours</option>
    <option value="11">11 Hours</option>
    <option value="12">12 Hours</option>
    </select>
    <script type="text/javascript">
        function getHours(value){
            var hours = value;
            console.log(hours+ " hello");
        }
    </script>
</div>

If I change the function name the console is not giving an error undefined functions or function not found .

if I replace onchange="getHours(this.value)" with onchange="alert(this.value);" it is not working then also.

Can anyone tell the jquery way of doing this ??

Working pluner http://plnkr.co/edit/I8kk9PzF0GYYsIkJQ6eS?p=preview — squiroid, Jul 01 '15 at 07:16
Buddy its working fine check this fiddle https://jsfiddle.net/5528y6zo/ — Santhucool, Jul 01 '15 at 07:16
Everithing it's working fine. See here console.log behavior: http://stackoverflow.com/questions/4539253/what-is-console-log — Negom, Jul 01 '15 at 07:19
Can you check whether some code is removing the onchange event from select or if there is a code which returns false? — K K, Jul 01 '15 at 07:47
remove the inline js and use the jquery on method for binding change event. Example: http://jsfiddle.net/GCu2D/757/ — K K, Jul 01 '15 at 07:56
Thanks a lot @KK, your code is working on fiddle but it is still not working on my page. something is wrong in my page. :/ — S7H, Jul 01 '15 at 08:08
Can you share complete code? It will help you in getting a solution. There might be something in your page which is breaking the scripts — K K, Jul 01 '15 at 08:09
here is the link to the file http://textuploader.com/39yx , it is django template so please ignore the {% %} and {{ }} tags. — S7H, Jul 01 '15 at 08:18

score 0 · Answer 1 · answered Jul 01 '15 at 07:30

0

your answer seems correct.

the only change I made was separating the js into another file, and making the function in the manner I write it.

From:

<script type="text/javascript">
    function getHours(value){
        var hours = value;
        console.log(hours+ " hello");
    }
</script>

To:

var getHours = function (value) {
    var hours = value;
    alert(hours + " hello");
};

This syntax change shouldn't make a difference.

answered Jul 01 '15 at 07:30

JoeCrash

532
2
9

not even onchange="alert(this.value);" is working on my page. It is like the function onchange() is not getting invoked. I have tried it in chrome and firefox and i am not getting any errors. the same code is working on fiddle and plunker. – S7H Jul 01 '15 at 07:43

score 0 · Answer 2 · answered Jul 01 '15 at 07:38

<!DOCTYPE html>
<html lang="en-US">
<head>

    <meta charset="UTF-8">

    <title>
        Exp
    </title>


</head>

<body>

<div class="form-group required">
    <label for="InputLastName">For how many hours ? <sup>*</sup> </label>
    <select name="serviceHours" id="hours" onChange="getHours()">
    <option value="" selected>---------</option>
    <option value="1">1 Hour</option>
    <option value="2">2 Hours</option>
    <option value="3">3 Hours</option>
    <option value="4">4 Hours</option>
    <option value="5">5 Hours</option>
    <option value="6">6 Hours</option>
    <option value="7">7 Hours</option>
    <option value="8">8 Hours</option>
    <option value="9">9 Hours</option>
    <option value="10">10 Hours</option>
    <option value="11">11 Hours</option>
    <option value="12">12 Hours</option>
    </select>



</div>

<script type="text/javascript">
        function getHours(){
            var hours = document.getElementById("hours").value;
            alert(hours);
        }
   </script>

</body>

</html>

The above code alerts with the number of hours. Maybe this will help.

on my page onchange="alert(this.value);" is also not working. — S7H, Jul 01 '15 at 07:41
That is funny. Its working here. Try - onChange = "alert(this.value);" — Akshaj Dave, Jul 01 '15 at 07:46
I have tried everything. onchange or onChange nothing is invoking anything. — S7H, Jul 01 '15 at 07:50
Okay first just try and get a simple alert as the output. onchange="getOutput()" — Akshaj Dave, Jul 01 '15 at 08:10

score 0 · Answer 3 · answered Feb 09 '21 at 16:40

0

Finally got the reason behind the error. Thanks to Chrome INSPECT Some words are reserved in js. You should not use names like value,class for the variable name in the function. Try changing the name to something like "hijk" and it will work.

answered Feb 09 '21 at 16:40

Sunil Gautam

41
3

onchange() on dropdown not calling the function

3 Answers3