CODEWITHSUNDEEP
jqueryajaxselect
Elaine Marley
Elaine Marley

Reputation: 2213

Getting value from select on change

I have the following form that has 2 selects:

<form id="form" class="form_visitar" method="post" action="ajax/selects.php">
    <select name="select-local" class="select-index">
            <option value="">'.$select_visitar_tipo.'</option>
        <option value="1">'.$select_visitar_rest.'</option>
    <option value="2">'.$select_visitar_bar.'</option>
    <option value="3">'.$select_visitar_cafe.'</option>
</select>
<select name="select-precio" class="select-index">
    <option value="">'.$select_visitar_precio.'</option>
    <option value="1">'.$select_visitar_p1.'</option>
    <option value="2">'.$select_visitar_p2.'</option>
    <option value="3">'.$select_visitar_p3.'</option>
</select>                       
</form>

What I want to happen is: after I select something from the dropdowns (right after clicking them I have no submit button) I want to get the value to make a query via ajax. I'm very new to using the ajax function and I feel I might not get it as much as I'd want to. This is my ajax function so far (selects.php right now is just a message that will show in a div for testing):

<script type="text/javascript">
    $(".form_visitar").click(function() {
    $.ajax({
        type: "POST",
        url: $(this).attr("action"),
        data: $(this).serialize(),
        success: function(data) {
            $("#result").html(data);
        }
    })        
    return false;
}); 
</script>

Upvotes: 2

Views: 3237

Answers (2)

Grooveek
Grooveek

Reputation: 10094

use 

<script type="text/javascript">
    $(".select-precio").change(function() {
    var form = $("#form");
    $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form.serialize(),
        success: function(data) {
            $("#result").html(data);
        }
    })        
    return false;
}); 
</script>

Upvotes: 0

Vivin Paliath
Vivin Paliath

Reputation: 95488

You need to bind to the change event on the select elements, and not to the click event on the form.

$(".select-local, .select-precio").change(function() {
  $.ajax({
      type: "POST",
      url: $(".form_visitar").attr("action"),
      data: $(".form_visitar").serialize(),
      success: function(data) {
          $("#result").html(data);
      }
  });
});

This will bind the change handler to the select elements with class-names select-local and select-precio. If you want to just target a specific select, just change the selector:

$(".select-precio").change(function() {
   ...
});

If you're sending just the value of the select, then you probable don't need to serialize the entire form. You could do something like this:

$(".select-local, .select-precio").change(function() {
  var value = $(this).val();
  $.ajax({
      type: "POST",
      url: $(".form_visitar").attr("action"),
      data: "value=" + value,
      success: function(data) {
          $("#result").html(data);
      }
  });
});

Upvotes: 3

Related Questions