Search jQuery

jQuery Forum

Getting Started

shall42

newbie getting onchange in an ajax to fire from a SELECT statement

in Getting Started • 9 years ago

I have a web page with multiple dropdown lists. The dropdown list ( in real example will

be coming from database) in this example comes from ajax.

How can I get the the ONCHANGE to fire from a select statement from a drop down list?

And How do I get the value of what was selected?

I have spent hours on this.I want the onchange to fire checkCity and get value in checkCity function.

<%
''' testGetCity.asp
strcc=request.querystring("cc")
If Len(trim(strcc))=0 THEN strcc="1"
If strcc="1" THEN
   response.write("<select name=""listcity"" idname=""listcity"" ")
   response.write(" onchange=""checkCity(this)"">")
   response.write "<option value=""CA_FRESNO"">Fresno</option>"
   response.write "<option value=""CA_LOS_ANGELES"">Los_Angeles</option>"
   response.write "<option value=""CA_SACRAMENTO"">Sacramento</option>"
   response.write("</select>")
END IF
If strcc="2" THEN
   response.write("<select name=""listcity"" idname=""listcity"" ")
   response.write(" onchange=""checkCity(this)"">")
   response.write "<option value=""TX_AUSTIN"">Austin</option>"
   response.write "<option value=""TX_DALLAS"">Dallas</option>"
   response.write "<option value=""TX_HOUSTON"">Houston</option>"
   response.write("</select>")
END IF
%>
''''''''' Below is test_AjaxCity
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test_AjaxCity</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<div id="listcity01">California</div>
<div id="listcity02">Texas</div>
</div>
<script type="text/javascript">
function checkCity(what){
alert("Inside_checkCity option chosen is=");
}
$(document).ready(function()
{
function runRequest(num){
    if (num > 2){
    return;
    }
    if (eval(num) ==1){
       var mssg="testGetCity.asp?cc=1";
    }
    if (eval(num) ==2){
       var mssg="testGetCity.asp?cc=2";
    }
    $.ajax
    ({
    type: "POST",
    url: mssg,
    async: false,
    data: "" ,
    success: function(msg){
         if (eval(num) ==1){
            $("#listcity01").append(msg);
         }
         if (eval(num) ==2){
            $("#listcity02").append(msg);
         }
    }
    });
}
var intjs;
for(intjs=1;intjs<3;intjs++){
    runRequest(intjs);
}
});
</script>

</body>
</html>

Any suggestions?

TIA

shall42

Replies(5)

dsvick

Re: newbie getting onchange in an ajax to fire from a SELECT statement

9 years ago

It isn't exactly clear from what you posted what is happening where. You want the change handler for the select lists returned by testGetCity.asp to call the checkCity function - correct?

The elements created and returned in testGetCity have an attribute "idname", that's not a valid attribute. To make use of jQuery give it name or an id (an id is better) that you can use to identify it.

The problem you have is that you're adding the elements dynamically after the ready handler has run. What you'll need to do is use on (http://api.jquery.com/on/ ) and delegates to bind the change event for those select lists. Since you didn't post the markup for the page I'll just use the body as delegate...

$("body").on("change", "#idOfElement", function() {
alert("the selected value is:" + $(this).val());
});

shall42

Re: newbie getting onchange in an ajax to fire from a SELECT statement

9 years ago

So I added

$("body").on("change", "#listcity01", function() {
alert("the selected value is:" + $(this).val());

});

I can see the message, however, I just have a BLANK for the value.

shall42

Re: newbie getting onchange in an ajax to fire from a SELECT statement-SOLVED

9 years ago

SOLVED------So after working with it, it WORKS!!!!

Below is the revised code. Hopefully it will help someone else.

Here is what I added

$("body").on("change", "#listcity01", function() {
var selected_value = $("#listcity01 option:selected").val();
alert("the selected value is: " + selected_value);
});

I have spent several hours on this maybe it will save someone else some time.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test_AjaxCity</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<div id="listcity01">California</div>
<div id="listcity02">Texas</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("body").on("change", "#listcity01", function() {
      var selected_value = $("#listcity01 option:selected").val();
      alert("the selected value is: " + selected_value);
});
$("body").on("change", "#listcity02", function() {
var selected_value = $("#listcity02 option:selected").val();
alert("the selected value is: " + selected_value);
});
function runRequest(num){
    if (num > 2){
    return;
    }
    if (eval(num) ==1){
       var mssg="testGetCity.asp?cc=1";
    }
    if (eval(num) ==2){
       var mssg="testGetCity.asp?cc=2";
    }
    $.ajax
    ({
    type: "POST",
    url: mssg,
    async: false,
    data: "" ,
    success: function(msg){
         if (eval(num) ==1){
            $("#listcity01").append(msg);
         }
         if (eval(num) ==2){
            $("#listcity02").append(msg);
         }
    }
    });
}
var intjs;
for(intjs=1;intjs<3;intjs++){
    runRequest(intjs);
}
});
</script>

</body>
</html>

dsvick

Re: newbie getting onchange in an ajax to fire from a SELECT statement

9 years ago

Glad you got it figured out.

Are listcity01 and listcity02 the IDs of the select elements being added? I see they are also the ID of some divs you have in the markup. If they are also the ID of the added elements that's why you were having issues with it - IDs have to be unique.

If they aren't the ID of the added elements then put in the correct ID to the call to on and it should work for you. What you have now $("#listcity02 option:selected").val() is essentially getting the value of the first selected option it finds that is descended from an element with an ID of listcity02. Which is fine if you only have one select element in there but could lead to problems down the road.

Dave

shall42

Re: newbie getting onchange in an ajax to fire from a SELECT statement

9 years ago

I found a better solution for multiple select statements on one page.

$("body").on("change", "#listcity01,#listcity02", function(selected) {
      var strCity
      strCity=$(':selected',this).attr('value');
      alert("A_the selected value is: " + strCity);
});

Below is the code for the page. I just wished someone had given a full page instead of

snippets when i was doing my research on this. Maybe I did not do enough searching...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test_AjaxCity</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<div id="listcity01">California</div>
<div id="listcity02">Texas</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("body").on("change", "#listcity01,#listcity02", function(selected) {
      var strCity
      strCity=$(':selected',this).attr('value');
      alert("A_the selected value is: " + strCity);
});
function runRequest(num){
    if (num > 2){
    return;
    }
    if (eval(num) ==1){
       var mssg="testGetCity.asp?cc=1";
    }
    if (eval(num) ==2){
       var mssg="testGetCity.asp?cc=2";
    }
    $.ajax
    ({
    type: "POST",
    url: mssg,
    async: false,
    data: "" ,
    success: function(msg){
         if (eval(num) ==1){
            $("#listcity01").append(msg);
         }
         if (eval(num) ==2){
            $("#listcity02").append(msg);
         }
    }
    });
}
var intjs;
for(intjs=1;intjs<3;intjs++){
    runRequest(intjs);
}
});
</script>

</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

newbie getting onchange in an ajax to fire from a SELECT statement

Replies(5)

Re: newbie getting onchange in an ajax to fire from a SELECT statement

Re: newbie getting onchange in an ajax to fire from a SELECT statement

Re: newbie getting onchange in an ajax to fire from a SELECT statement-SOLVED

Re: newbie getting onchange in an ajax to fire from a SELECT statement

Re: newbie getting onchange in an ajax to fire from a SELECT statement

Statistics

Tags

Actions