CODEWITHSUNDEEP
phpjqueryajaxhtml
Vg.
Vg.

Reputation: 133

read value from dropdown and send it to same page using jquery and ajax

I want solution for reading a value from dropdown list and send it to the same page usng GET method. I think ajax and jquery will fulfill this.

if i select 'Inpatient' from dropdown list then it automatically available on same page. 

<div id="div_for_patienttype">
Choose patient type:<select id="select_patient_id"name="patient_type">
                    <option >Select patient type</option>
                    <option value="InPatient">InPatient</option>
                    <option value="OutPatient">OutPatient</option>
                </select>
</div>

I coded this and working fine but one problem is when I selects patient type the page gets refreshed and value in dropdown is 'Select patient type'.I actually wants value of dropdown remains same i.e selected.

code:

 $(document).ready(function(){
 $("#select_patient_id").change(function(){
 var selected_patient=$(this).val();
 sendType(selected_patient);
 });
 });
 function sendType(type)
 {
 $.ajax({
 type:"GET",
 url:"dispres.php",
 data:({patientType:type}),
 success:function(success)
 {
    window.location.href="dispres.php?patientType="+type;
 }
 });
 }

And how can I optimize this jquery and ajax code?

Upvotes: 0

Views: 3320

Answers (3)

Anuj Yadav
Anuj Yadav

Reputation: 990

Not sure what you actually want. I believe on change of dropdown selection you want to call a web method(service).

//Code has not been tested

$(document).ready(function(){
    $("select[name=patient_type]").change(function(){
        var selected_patient = $("select[name=patient_type]").val();
        $.ajax({
            type: "GET",
            url: "process-request.php?patient="+selected_patient
        }).done(function(data){
           //do something
        });
    });
});

or you can write

$(document).ready(function(){
        $("select[name=patient_type]").change(function(){
            var selected_patient = $("select[name=patient_type]").val();
            $.ajax({
                type: "GET",
                url: "process-request.php",
                data:{patient:selected_patient}
            }).done(function(data){
               //do something
            });
        });
    });

On PHP side based upon the framework you are using just fetch querystring value

Upvotes: 1

ste-fu
ste-fu

Reputation: 7434

Assuming you are trying to make a GET request with the option value as a parameter

$('select[name="patient_type"]').on('change', function(){

    var selected = $('select[name="patient_type"]').find(':selected').val();

    $.ajax({
        url: window.location.href + '?' + selected,
        type: 'GET'
        success:function(data) {
           handleData(data);
        }
    });        
}); 

function  handleData(data){

    // do something here with the data obtained from your get request

}

Upvotes: 0

Jay Blanchard
Jay Blanchard

Reputation: 34416

Basic jQuery to read the drop-down value:

var patient_type = $('select[name="patient_type"]').val(); // value on submit

Basic get request:

$.get( "my_page.php", { patient_type : patient_type } );

Upvotes: 3

Related Questions