How to create a dynamic search bar in PHP without page refresh in PHP?

Question

<div data-role="page" id="page">
    <div data-role="header">

    <h4> Page Refresh</h4>
    </div>

    <div data-role="content">       

          <div data-role="fieldcontain" data-theme="b">
            <ul data-role="listview" data-inset="true">

            <li data-role="list-divider"> List of Contractors </li>         
                <li> 
                    <label for="select-choice-1" class="select">Main Location</label>
                       <select name="main_location" id="select-choice-1">
                          <option value="NSW">NSW</option>
                          <option value="ACT">ACT</option>
                          <option value="VIC">VIC</option>
                          <option value="SA">SA</option>
                          <option value="QLD">QLD</option>
                          <option value="NT">NT</option>
                          <option value="WA">WA</option>
                          <option value="TAS">TAS</option>
                        </select>                     
              </li> <!-- Select Menus: Main Location-->  

                <li>  <h3> Company 1 in NSW  </h3>    </li>                     
                <li>  <h3> Company 2 in NSW  </h3>    </li>                     
                <li>  <h3> Company 3 in NSW  </h3>    </li>                     
                <li>  <h3> Company 4 in NSW  </h3>    </li>                                                         

          </div>       
    </div>
    <div data-role="footer">

    </div>
</div>

I have a drop down that has list of States, below it I've List of companies.

I was wondering if I can dynamically populate list of companies with out page refresh based on the value selected in Drop down.

In simple words, if the value selected NSW then the list of companies should only contain companies in NSW state.

I would appreciate if some one can explain me with an example.

Answer 1

PHP code is read by the server and then output is converted to HTML.

The only way to get PHP read again (after performing an action on the page) is to resubmit the page or be directed to a new one.

You can use JavaScript to do things on the client-side, but again, PHP code is read at the beginning only.

Here's an example of something you could do using JS:

<form name="vehicle">
    Car Make: 
    <select name="carbrand" onChange="updatecartype(this.selectedIndex)" >
    <option selected>Select A Car Brand</option>
    <option value="ford">Ford</option>
    <option value="mazda">Mazda</option>
    <option value="kia">Kia</option>
    </select>

    Car Model: 
    <select name="cartype" >
    <option value="NONE" selected>-------------------</option>
    </select>
</form>

<script type="text/javascript">

    var carbrandlist=document.vehicle.carbrand
    var cartypelist=document.vehicle.cartype

    var cartype=new Array()
    cartype[0]=""
    cartype[1]=["Focus|focus", "F-150|f150", "Taurus|taurus"]
    cartype[2]=["Protege|protege", "Tribute|tribute", "RX-8|rx8", "CX-9|cx9"]
    cartype[3]=["Rio|rio", "Sedona|sedona", "Optima|optima", "Soul|soul", "Sorento|sorento"]

    function updatecartype(selectedcar){
        cartypelist.options.length=0
        if (selectedcar>0){
            for (i=0; i<cartype[selectedcar].length; i++)
            cartypelist.options[cartypelist.options.length]=new Option(cartype[selectedcar][i].split("|")[0], cartype[selectedcar][i].split("|")[1])
        }
    }

</script>

Here's a straight-forward re-submit/2 page approach using only PHP, as requested.

//step1.php
//================

<form method='post' action='step2.php'>

Choose State <br>
<select name='state'>
<option value='MI'>Michigan</option>
<option value='IL'>Illinois</option>
</select>

<input type='submit' value='Select State'>

</form>



//step2.php
//================

<form method='post' action='step3.php'>

Choose Company <br>
<select name='company'>

<?php
$state_choice = $_POST['state'];

if ($state_choice == 'MI') {

    echo "<option value='ABC'>Company ABC</option>";
    echo "<option value='DEF'>Company DEF</option>";

}
if ($state_choice == 'IL') {

    echo "<option value='UVW'>Company UVW</option>";
    echo "<option value='XYZ'>Company XYZ</option>";

}
?>

</select>

<input type='submit' value='Select Company'>

</form>

Answer 2

This is a simple example:

• http://www.w3schools.com/php/php_ajax_database.asp