Jquery - Read input from Text Field

Question

I have a form which will populate a select box "city" based on the selections of another select box "suburb". This works for my data.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
$(document).ready(function()
{
    $("#suburb").change(function(){
        var suburb = $(this).val();//get select value
        $.ajax({
            url: "get.php",
            type: "post",
            data: { suburb: $(this).val() },
            success: function( responce ){
                $("#city").html( responce );
            }
        });
    });
});
</script>
Suburb:

<select id="suburb">
    <option id="Williamstown">Williamstown</option>
    <option id="Altona">altona</option>
    <option id="Newport">newport</option>
 </select> 
 <select id="city"></select>

Instead of having the <select id="suburb"> box I would like to make it a text input <input type="text" name="suburb"> and use the value in the input text field to populate the city select box.

I have tried changing it to

<script>
$(document).ready(function(){
    $("#suburb").keyup(function(){
        var suburb = $("#suburb").val(); //get select value
        $.ajax({
             url: "get.php",
             type: "post",
             data: { suburb: $("#suburb").val() },
             success: function( responce ){
                  $("#city").html( responce );
             }
        });
    });
});
</script>
Suburb:

 <input type="text" name="suburb">
 <select id="city"></select>

But this doesn't return anything. Im sure Im not reading the input in the "suburb" field correctly

If you add console.log(suburb); between the var and $.ajax lines, what do you see in the console? — Paul
– Paul, Commented Apr 9, 2014 at 5:37
What should happen if the suburb name the user enters isn't available in the select box? — David Thomas
– David Thomas, Commented Apr 9, 2014 at 5:38
Please post the PHP code in get.php that answers the ajax requests. — Paul
– Paul, Commented Apr 9, 2014 at 5:40
Do you realize that the code initializes var suburb = ... but never uses it? Felix shows how to use it so the code doesn't repeat itself. — Paul
– Paul, Commented Apr 9, 2014 at 5:44

Felix · Accepted Answer · 2014-04-09 05:34:23Z

1

Since you give your input name attribute, you can target it by name instead of id:

$(document).ready(function () {
    $('input[name=suburb]').keyup(function () {
        var suburb = $(this).val(); //get select value
        $.ajax({
            url: "get.php",
            type: "post",
            data: {
                suburb: suburb
            },
            success: function (responce) {
                $("#city").html(responce);
            }
        });
    });
});

answered Apr 9, 2014 at 5:34

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

seek.estate Over a year ago

seek.estate Over a year ago

ok thanks this works.. I have to wait 5 minutes to accept your answer

Dheeraj Yadav · Accepted Answer · 2014-04-09 05:38:43Z

0

try this

<script>
$(document).ready(function()
{
$("#suburb").blur(function()
   {
     var suburb = $("#suburb").val();//get select value
     $.ajax(
     {
     url:"get.php",
     type:"post",
     data:{suburb:$("#suburb").val()},
     success:function(responce)
    { $("#city").html(responce);}
    });
    });
  });
</script>
Suburb:

<input type="text" name="suburb">
<select id="city"></select>

answered Apr 9, 2014 at 5:38

Dheeraj Yadav

1301 silver badge9 bronze badges

Collectives™ on Stack Overflow

Jquery - Read input from Text Field

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related