get selected text from combobox usuing AJAX

Question

Can anyone help me out to convert the PHP code to Ajax?

HTML Code:

  <form method="POST" >
    <label for="Manufacturer"> Manufacturer : </label>
      <select id="cmbMake" name="Make"     onchange="document.getElementById('selected_text').value=this.options[this.selectedIndex].text">
         <option value="0">Select Manufacturer</option>
         <option value="1">--Any--</option>
         <option value="2">Toyota</option>
         <option value="3">Nissan</option>
    </select>
    <input type="hidden" name="selected_text" id="selected_text" value="" />
    <input type="submit" name="search" value="Search"/>
    </form>

PHP Code:

 <?php

if(isset($_POST['search']))
{
    $makerValue = $_POST['Make']; // make value
    $maker = $_POST['selected_text']; // get the selected text
    echo $maker;
}
 ?>

Source:

1. PHP code to get selected text of a combo box

Answer 1

You have to trigger the button submit and prevent it to reload the page, see code below

 $('#btn-search').click(function(e) {
      e.preventDefault()
       $.ajax({
         url:"url to your search php function",
         method:"POST",
         data:{
           selected_text: $('#selected_text').val(),
           Make: $('#cmbMake').val()
         },
         success:function(data)
         {
             //success code here
         }
    });
 })

put an ID to you submit button

in your php, just remove your if condition and make a function like this one

public function search() {
    $makerValue = $_POST['Make']; // make value
    $maker = $_POST['selected_text']; // get the selected text
    echo $maker;
}