jquery - Javascript - Function is not defined (onChange doesn't work)

I am calling a function called getPrice() in javascript file by using onChange() mand in tag in HTML file, but no matter what I do or fix, it still doesnt show the price. I have done a lot of research but cant seem to find any correct solutions. Helps will be greatly appreciated.

Here is my HTML code:

    <body>
            <form action="#" name="ITSbookform" id="ITSform">
                    <fieldset>
                    <legend>Into The Storm Booking</legend>
                    <label>Choose your cinema</label><br>
                    <select id="selectedCinema">
                    <option>--Select--</option>
                    <option value="maximaCinema">Maxima Cinema</option> 
                    <option value="rivolaCinema">Rivola Cinema</option> 
                    </select><br>
                    <label>Select day and time</label>

                    <select id="dayAndTime">

                    </select>
                    <br>
                    <label>Select Seat</label>
                    <select id="selectedSeat" onchange="getPrice()">

                    </select>
                    <p id="total">Total Price: </p>


            </form>
    </fieldset>

    </body>

and the Javascipt part:

    function getPrice(){
    var totalPrice = 0;
    if(document.getElementById("selectedCinema").value == "maximaCinema"){
        if(document.getElementById("dayAndTime").value == "9pmMonday" || document.getElementById("dayAndTime").value == "9pmTuesday"){
            seatPrice["full"] = 12;
            seatPrice["conc"] = 10;
            seatPrice["child"] = 8;
            seatPrice["FirstClass-Adult"] = 25;
            seatPrice["FirstClass-Child"] = 20;
            seatPrice["beanbag"] = 20;
        }
        else{
            seatPrice["full"] = 18;
            seatPrice["conc"] = 15;
            seatPrice["child"] = 12;
            seatPrice["FirstClass-Adult"] = 30;
            seatPrice["FirstClass-Child"] = 25;
            seatPrice["beanbag"] = 30;
        }
    }
    else{
        seatPrice["adult"] = 18;
        seatPrice["conc"] = 15;
        seatPrice["child"] = 12;
    }

    var seat = theForm.elements["selectedSeat"];
    totalPrice = seatPrice[seat.value];
    document.getElementById("total").innerHTML = "$" + totalPrice;
}

and here is the full version of the code in JSFiddle: /

Thank you.

Here is my HTML code:

    <body>
            <form action="#" name="ITSbookform" id="ITSform">
                    <fieldset>
                    <legend>Into The Storm Booking</legend>
                    <label>Choose your cinema</label><br>
                    <select id="selectedCinema">
                    <option>--Select--</option>
                    <option value="maximaCinema">Maxima Cinema</option> 
                    <option value="rivolaCinema">Rivola Cinema</option> 
                    </select><br>
                    <label>Select day and time</label>

                    <select id="dayAndTime">

                    </select>
                    <br>
                    <label>Select Seat</label>
                    <select id="selectedSeat" onchange="getPrice()">

                    </select>
                    <p id="total">Total Price: </p>


            </form>
    </fieldset>

    </body>

and the Javascipt part:

    function getPrice(){
    var totalPrice = 0;
    if(document.getElementById("selectedCinema").value == "maximaCinema"){
        if(document.getElementById("dayAndTime").value == "9pmMonday" || document.getElementById("dayAndTime").value == "9pmTuesday"){
            seatPrice["full"] = 12;
            seatPrice["conc"] = 10;
            seatPrice["child"] = 8;
            seatPrice["FirstClass-Adult"] = 25;
            seatPrice["FirstClass-Child"] = 20;
            seatPrice["beanbag"] = 20;
        }
        else{
            seatPrice["full"] = 18;
            seatPrice["conc"] = 15;
            seatPrice["child"] = 12;
            seatPrice["FirstClass-Adult"] = 30;
            seatPrice["FirstClass-Child"] = 25;
            seatPrice["beanbag"] = 30;
        }
    }
    else{
        seatPrice["adult"] = 18;
        seatPrice["conc"] = 15;
        seatPrice["child"] = 12;
    }

    var seat = theForm.elements["selectedSeat"];
    totalPrice = seatPrice[seat.value];
    document.getElementById("total").innerHTML = "$" + totalPrice;
}

and here is the full version of the code in JSFiddle: http://jsfiddle/stb0v5Ln/

Thank you.

Share Improve this question edited Oct 6, 2014 at 5:37 Bhushan Kawadkar 28.5k5 gold badges39 silver badges60 bronze badges asked Oct 6, 2014 at 5:32 Earthy thebear 31 gold badge1 silver badge2 bronze badges

invalid html for fieldset is closing after form – Govind Singh Commented Oct 6, 2014 at 5:34
You don't have any options available in select box., so how will change event will occur and call getPrice() function? – Bhushan Kawadkar Commented Oct 6, 2014 at 5:38
@BhushanKawadkar He's injecting them dynamically. – T J Commented Oct 6, 2014 at 5:47

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

use jQuery consistently, your error is using theForm instead of accessing the form again or accessing the form field by ID
change the fiddle to head instead of onload

FIDDLE

var seat = $("#selectedSeat");
totalPrice = seatPrice[seat.val()];
$("#total").html("$" + totalPrice);

Also remove the onchange from the tag and add

$("#selectedSeat").change(getPrice);

to the ready

ps: remove all head and body tags when creating a fiddle

First of all the fiddle is set to run onload - so it'll wrap your code in an onload handler - so the function getPrice() will not be available globally.

Which will cause the error:

Uncaught ReferenceError: getPrice is not defined

Setting the fiddle to no-wrap will fix this issue.

Other than that, JavaScript has function level scope - You've declared the variable var theForm = document.forms["ITSform"]; inside ready() function and you're trying to access it out side in getPrice() function. Which will cause:

Uncaught ReferenceError: theForm is not defined

Either make the variable global or move the function getPrice() inside ready()

Updated Fiddle

Simply checking for errors in browser console will help you solve these kind of issues.

Js Fiddle

removed <fieldset> which was not closing proper

and moved the theForm variable inside getPrice() because it was not getting the variable function and fixed

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Javascript - Function is not defined (onChange doesn't work) - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)