CODEWITHSUNDEEP
phpjquerymysqlsql
fishmong3r
fishmong3r

Reputation: 1434

Run SQL query and update form on drop-down selection

So I have two drop-down lists Category and Sub-category. Sub-category has to be populated by an SQL query once a Category is selected.

I know how to populate from an SQL query:

<?php
mysql_connect('localhost', 'user', 'pw');
mysql_select_db('db');

$sql = "SELECT col FROM table";
$result = mysql_query($sql);

echo "<select name='col'>";
while ($row = mysql_fetch_array($result)) {
    echo "<option value='" . $row['col'] . "'>" . $row['col'] . "</option>";
}
echo "</select>";
?>

But I don't know how to run the query and update list in jQuery:

function updateList(){
//QUERY&fill based on selection//
.val($('select[name="category"] option:selected').val());
}

I spent an hour or so on google and couldn't manage to solve this.

Upvotes: 0

Views: 1377

Answers (2)

Nithyanandhan M
Nithyanandhan M

Reputation: 1554

you have to create onchange function in selecting main category and pass it to either jquery or javascript ajax request response to get value from another file having subcategory output with sql where condition as main category value.

echo "<select name='col' onchange='loadXMLDoc()'>";

the above of main cat drop down and its ajax javascript reqest response whould be as below

<script>
function loadXMLDoc()
var maincat=document.getElementByName("col").val();
{
var xmlhttp;
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("POST","demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("maincat_var=maincat");
}

Create a div with id as myDiv in your main page. and the other page should have

<?php
mysql_connect('localhost', 'user', 'pw');
mysql_select_db('db');

$sql = "SELECT col FROM table where main_cat=$_POST['maincat_var']";
$result = mysql_query($sql);

echo "<select name='col2'>";
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row['col'] . "'>" . $row['col'] . "</option>";
}
echo "</select>";
?>

Upvotes: 1

Phani
Phani

Reputation: 559

You can try using jquery and ajax to load values of subcategory .

Try modifying and using the below code. This code may guide you..

    $(document).ready(function(){
        $('#submit').click(function() {
            $.ajax(
            {
                url:"subcat.php?id='something'", // Here you can write php variableto pass to next page
                success:function(result){
                    $("#div1").html(result);
                }
            });
            return false;
        });
    });

onclicking the main category some page will be executed and its output will be displayed in a html element.

Upvotes: 0

Related Questions