Populate Lable with jQuery

Form contains a panel with an editbox, a button, a label and a link.  EditBox and button is contained in a hidden panel.  On click of link panel becomes visible.  On click of button makes ajax call that returns a value that i use to populate the label.  Everything works but after the ajax call, i see it populate my label but then the panel becomes hidden again and my label value is gone.  What am I missing?


$(document).ready(function () {

            var zip = $("#edtzipcode");
            $("#changelocation").click(function () {
                $(".panel").slideToggle("slow");
            });

            $("#cmdgo").click(function (event) {
                var bool = validateZip(zip);
                if (bool) {
                    OnLookup();
                }
                else {
                    alert("Zip Code is Invalid");
                    return false;
                }
            });

            function validateZip(obj) {
                var regexp = /^([0-9a-zA-Z])+$/;
                if (!(regexp.test(obj.val()))) {
                    return false;
                } else {
                    return true;
                }
            }

            function OnLookup() {
                $.ajax({
                    type: "POST",
                    url: "http://<%=HttpContext.Current.Request.Url.Host%>/services/LocationService.asmx/ChangeLocation",
                    data: "{zipcode : '" +$('#edtzipcode').val()+"'}",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function OnLookupComplete(result) {
                        data = result.d;
                        $("#curlocation").text(data.City + "," + data.State);
                        $("#edtzipcode").val("");
                    },
                });
            }

        });
ikeyserAsked:
Who is Participating?
 
ikeyserConnect With a Mentor Author Commented:
I found the resolution, my button did not have a button type so it was always submitting the form on click.  I changed the button type to button and my code works.
0
 
VeganBenConnect With a Mentor Commented:
Hard to know exactly without seeing the whole page.

As the success function takes the event as a parameter, though, you might want to cancel the event. This might help.
Oh, and you don't need to name the function either, so your success function can look like this:


success: function (result) {
    data = result.d;
    $("#curlocation").text(data.City + "," + data.State);
    $("#edtzipcode").val("");
    return false;
},

Open in new window

0
 
VeganBenCommented:
yeah. You were submitting the form.
"return false" stops that from happening.
Don't mention it.
0
 
VeganBenCommented:
very decent of you.
Sorry for reopening it. I was having a bad day :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.