How to send data in ajax with dependent drop-down

Question

I Have already set the first value from the first combo-box now i need to send the second variable from second combo-box and receive it in the same php file here is the Ajax:

$(document).ready(function(){
   $(".rutas").change(function(){
     var id=$(this).val();
     var dataString = 'id='+ id;
     $.ajax({
       type: "POST",
       url: "asientos.php",
       data: dataString,
       cache: false,
       success: function(html){
          $(".asientos").html(html);}  
       }); 
   }); 
});
</script>

Here is the first html combo-box this is functioning perfectly:

<select name="rutas" class="rutas" >
   <option value="">Seleccione Ruta</option>;
   <?php   include 'rutas.php';   ?>
</select>

Here is the second html combo-box that i want to get the value from and send it to the same php file as the first:

Clase: <select name="clase" class="clase">
   <option value="A">Clase Ejecutiva</option>;
   <option value="B">Clase Media</option>;
   <option value="C">Clase Economico</option>;
</select>

Any help would be appreciated, Thank you!

Mohit Tanwani · Accepted Answer · 2016-10-01T17:48:23.260

1

Send multiple values to ajax use object

var data = {field1: "value1", field2: "value2"};

In your case, you should use form

<form id="myForm">
<select id="select1"></select>
<select id="select2"></select>
</form>

JavaScript code.

$(document).ready(function(){
  $('#myForm').submit(function(event){
     event.preventDefault();
     var data = {field1: $("#select1").val(), field2: $("#select2").val()};

     //Ajax code should be here
     $.ajax({
         type: "POST",
         url: "asientos.php",
         data: data,
         cache: false,
         success: function(html){
            $(".asientos").html(html);}  
         }); 
     }); 
   });
});

Edit : As per the comments

function ajaxCall(url, data){

     //Ajax code should be here
     $.ajax({
         type: "POST",
         url: url,
         data: data,
         cache: false,
         success: function(html){
            $(".asientos").html(html);}  
         }); 
     }); 
}

On each select change method you can call this ajax function and populate your drop-down.

$(".rutas").change(function(){
    ajaxCall('demo.php', '10');
});

edited Oct 01 '16 at 17:48

answered Oct 01 '16 at 17:13

Mohit Tanwani

6,608
2
14
32

I've updated my answer, and shown you a way how to use form to submit multiple data. – Mohit Tanwani Oct 01 '16 at 17:17
Did you check and understand what I wrote ? – Mohit Tanwani Oct 01 '16 at 17:23
I have the in a form with other components i need the event to be onchange for the combos – Josh Hernandez Oct 01 '16 at 17:30
Great, you can also see the example in this answer as well. http://stackoverflow.com/a/39808999/6608101 – Mohit Tanwani Oct 01 '16 at 17:33
When i click the first combo it fills the second combo now I need when i click the second combo it fills the third combo using the value from the first and value from the second because i am retrieving data from a database on each change of the combo. – Josh Hernandez Oct 01 '16 at 17:39
You can create a function for ajax call only, and then call that function with argument on each combo change. – Mohit Tanwani Oct 01 '16 at 17:42
I am just getting into the world of jquery i really need help! – Josh Hernandez Oct 01 '16 at 17:45
@JoshHernandez No problem, see my updated answer that will show you a way. – Mohit Tanwani Oct 01 '16 at 17:48
i am going to give it a try – Josh Hernandez Oct 01 '16 at 17:52
I really dont understand – Josh Hernandez Oct 01 '16 at 17:56
I just upvote your question that gives you +5.. same way you can click on up button near my answer and accept it with a tick green color – Mohit Tanwani Oct 01 '16 at 17:57
Done but please i need your help. – Josh Hernandez Oct 01 '16 at 18:15
You can try as I shown, and post your comments here.. whenever I will available I will get back to you. – Mohit Tanwani Oct 01 '16 at 18:16
Is everything ok ? – Mohit Tanwani Oct 02 '16 at 10:03
i am having problems still – Josh Hernandez Oct 02 '16 at 15:59
Can you update your full code in question and show me what's the problem ? – Mohit Tanwani Oct 02 '16 at 16:00
I just found he problem Loading! Thank yo for you help I analyzed your answer top to bottom and i fould where i was wrong! – Josh Hernandez Oct 02 '16 at 16:17

How to send data in ajax with dependent drop-down

1 Answers1

Linked