Ajax based check boxes based on drop down value selected

Vijay_T

Hi,

I am creating a module where in, based on the drop down value selected, list of its corresponding values are to be displayed in the form of check boxes and the user can select multiple check boxes and post the same to the database.

Could some one throw pointers or a sample code which would help me immensely

sana

Hi,

you can try with jQuery and ajax by which u can achieve ur task.

Regards

Sana

zypher11

http://www.w3schools.com/ajax/ajax_intro.asp

read up.

Vijay_T

Hi,

Thank you very much for the reply. With limited time constraints that I have, could you throw out a sample code so that I can derive the logic and implement the same over here.

zypher11

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

sana

Displaying a list on change of another list:

Index.php

<?php
defined('DB_SERVER')?null:define("DB_SERVER", "localhost");
defined('DB_USER')?null:define("DB_USER", "root");
defined('DB_PASS')?null:define("DB_PASS", "");
defined('DB_NAME')?null:define("DB_NAME", "contactlist");

$connection= mysql_connect(DB_SERVER, DB_USER,DB_PASS) or die("Database connection failed:".mysql_error());

$db_select=mysql_select_db(DB_NAME, $connection) or die("Database selection failed:" .mysql_error());

$sql="SELECT * FROM country";
$result=mysql_query($sql,$connection);
while($row=mysql_fetch_array($result))
{
$countries[]=$row;
}

//$countries=$contactObj->getCountries();

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="scripts/jQuery/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
            $('#country').change(update_states);
        });
        function update_states(){

            var countryId=$('#country').attr('value');
            $.get('States_1.php?countryId='+countryId, show_states);
        }
        function show_states(res){

            $('#state').html(res);
        }
    </script>
</head>
<body>
    <form action="" method="post">

        Country :<select id="country" name="country">
            <?php
            foreach ($countries as $country)
            {
                $option = "<option value='".$country['CID']."'";
                $option.=">".$country['CountryName']."</option>";
                echo $option;
            }
?>
</select><br/>
State : <select id="state" name="state" multiple>
        </select><br/>

        <input type="submit" value="Save" id="add" name="add"/>
        <input type="button" value="Cancel" id="cancel" name="cancel"/>
    </form>
</body>
</html>

States_1.php

<?php

if(isset($_GET['countryId']))
{

$countryId=$_GET['countryId'];
$sql="SELECT SID,StateName FROM states where CID=".$countryId;
$result=mysql_query($sql,$connection);
while($row=mysql_fetch_array($result))
{
    $states[]=$row;
}


if($states)
{
    foreach ($states as $state)
    {
        $states.="<option  value='".$state['SID']."'>".$state['StateName']."</option>";

    }
    echo $states;
}
else
{
    echo 'please choose a country first';
}

}