Function not working

JavaScript
1

Hi

Please be patient i am very new to j Query. I have been looking for a method that when a value is selected from a drop down box. based on the value selected a text field is populated with some data. I found an example which does what i need and when i tried it on the jifiddle website it worked OK. I have amended it slightly to fit in with what i am doing but it doesn’t work and i can’t with my current limited knowledge understand why. also i noticed that wehn you put a breakpoint in is highlights the entire function so you cannot seem to work through it line by line.

below is the code and html

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.1.0.min.js"></script>
    <script src="Scripts/JavaScript2.js"></script>
    <script type="text/javascript"></script>


</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="myList" runat="server">
        <asp:ListItem Text="A" Value="a" ></asp:ListItem>
        <asp:ListItem Text="B" Value="b" ></asp:ListItem>
        <asp:ListItem Text="C" Value="c" ></asp:ListItem>
        </asp:DropDownList>

        <div>
            <p><asp:TextBox runat="server" ID="foo" CssClass="foo" ></asp:TextBox></p>
            <p><asp:TextBox runat="server" ID="bar" CssClass="bar" ></asp:TextBox></p>
        </div>

    </div>
    </form>
</body>
</html>

$('#myList').change(function () {
    var myValue = $(this).val();
    switch (myValue) {
        case 'a':
            $('input[name="foo"]').val('A');
            $('input[name="bar"]').val('this is the first item');
            break;
        case 'b':
            $('input[name="foo"]').val('B');
            $('input[name="bar"]').val('this is the second item');
            break;
        case 'c':
            $('input[name="foo"]').val('C');
            $('input[name="bar"]').val('this is the third item');
            break;
    }
});

So is there something i am missing that is obvious why this is not working.

Any help would be appreciated.

Kind regards

Michael

2

Hi,

Welcome to the forums :slight_smile:

Can you post a link to the fiddle where it is working?

3

HI Pullo

Yes here is the link

Regards

Michael

4

Hi Pullo

Actually managed to solve it…

Wrapping the function in

$(document).ready(function () {

})

It started to work yippeee.

thanks for your assistance.

Regards

Michael

5

Hi,

Glad you got your problem sorted.

Ideally you can include your JS at the end of your file and avoid the need for any $(document).ready() callback.

Also, you can simplify your JS a little. I’m not the biggest fan of switch statements.

var values = {
    a: {foo: "A", bar: "this is the first item"},
    b: {foo: "B", bar: "this is the second item"},
    c: {foo: "C", bar: "this is the third item"}
};

$('#myList').change(function() {
    var selected = values[this.value];
    $('input[name="foo"]').val(selected.foo);
    $('input[name="bar"]').val(selected.bar);
});

fiddle

Hope that helps