0

i'm trying to show/hid various divs based on a user input from a select drop down box. actually, to begin with, i'm trying to directly implement the code shown in jQuery dropdown hide show div based on value, however i'm missing something simple which prevents it from working at http://www.intertwineimages.com/form2.html here is my complete code, can anyone point me in the right direction?

<html>

<script type="text/javascript">
hideAllDivs = function () {
    $("#hourly").hide();
    $("#per_diem").hide();
    $("#fixed").hide();
};

handleNewSelection = function () {

    hideAllDivs();

    switch ($(this).val()) {
        case '1':
            $("#hourly").show();
        break;
        case '2':
            $("#per_diem").show();
        break;
        case '3':
            $("#fixed").show();
        break;
    }
};

$(document).ready(function() {

    $("#project_billing_code_id").change(handleNewSelection);

    // Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#project_billing_code_id"));

});
</script>
<select id="project_billing_code_id">
    <option value="">Pick one</option>
    <option value="1">1-Hourly</option>
    <option value="2">2-Per Diem</option>
    <option value="3">3-Fixed</option>
</select>

<div id="hourly">Hourly</div>
<div id="per_diem">Per Diem</div>
<div id="fixed">Fixed</div>

</html>

EDIT: corrected code

<html>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
hideAllDivs = function () {
    $("#hourly").hide();
    $("#per_diem").hide();
    $("#fixed").hide();
};

handleNewSelection = function () {

    hideAllDivs();

    switch ($(this).val()) {
        case '1':
            $("#hourly").show();
        break;
        case '2':
            $("#per_diem").show();
        break;
        case '3':
            $("#fixed").show();
        break;
    }
};

$(document).ready(function() {

    $("#project_billing_code_id").change(handleNewSelection);

    // Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#project_billing_code_id"));

});
</script>
<select id="project_billing_code_id">
    <option value="">Pick one</option>
    <option value="1">1-Hourly</option>
    <option value="2">2-Per Diem</option>
    <option value="3">3-Fixed</option>
</select>

<div id="hourly">Hourly</div>
<div id="per_diem">Per Diem</div>
<div id="fixed">Fixed</div>

</html>
Community
  • 1
  • 1
Constantino
  • 2,243
  • 2
  • 24
  • 41
  • Well it seems to work. Demo at http://jsfiddle.net/qzSu6/. BTW have you included the jquery js file ? – Clyde Lobo Aug 09 '12 at 13:36
  • Right, it does work on jsfiddle, but I can't get it to work on my server (http://www.intertwineimages.com/form2.html), wondering why it wont. – Constantino Aug 09 '12 at 13:37
  • My advice to you is to completely ditch jQuery and learn how to use real JavaScript. – John Aug 09 '12 at 13:38
  • 1
    include jquery. its not setup – mikevoermans Aug 09 '12 at 13:38
  • You are missing the reference to jquery. – John Koerner Aug 09 '12 at 13:39
  • Seconded, your example works fine http://jsfiddle.net/VVZGM/, you mustn't be including jquery file as said... or maybe you have a browser extension that's causing it to fail? Have you tried debug mode (F12 in IE, CTRL+SHIFT+J in Chrome) to see what script errors you have? – Paul Aldred-Bann Aug 09 '12 at 13:41

1 Answers1

2

Its because you have not included the jquery file for http://www.intertwineimages.com/form2.html

Clyde Lobo
  • 9,126
  • 7
  • 34
  • 61
  • ah! that's the simple thing i was missing. could you show me how exactly to do this or elucidate on this issue? – Constantino Aug 09 '12 at 13:40
  • Its pretty simple. I have firebug installed on my firefox. When I opened the url I got an error in firebug saying `$ is not defined`. – Clyde Lobo Aug 09 '12 at 13:41
  • great thanks, got it! original post has been modified to show correct answer for those interested. – Constantino Aug 09 '12 at 13:49