Page 1 of 2

{Solved}:i need help in javascript function :S !

Posted: Tue May 15, 2012 7:04 am
by mekha
i need help in javascript function :S !
---------------------------------------------
hi guys,
i need help in this thing :
i have 2 '<select></select>'

1 for the main category | and | 1 to sub category

how can i allow automatic refresh and change to the sub category if i choose a main category ?

Re: i need help in javascript function :S !

Posted: Tue May 15, 2012 7:52 am
by Gopesh
Hi,Try like this

Code: Select all

$(function() {
$('#maincategory').change(function() {
var id= $(this).val();
$.ajax({  
                type: "POST",
	       url:'url of the php page', 
	       data: "id of main category="+id+,   
               success: function(data) {
			    if(data){
					  
		           jQuery("#childcategory").html(data) ;
				       }
                }  
            });  

});
Html

Code: Select all

<select id="maincategory">
<option value="1">Category1</option>
<option value="2">Category2</option>
<option value="3">Category3</option>
</select>

<select id="childcategory">
</select>
And in the php page u take the id that passes from here and do a sql operation to get all the corresponding values.Like this

Code: Select all

 echo '<option value='.$val1.' >'.$get['val''].'</option>';
Hope it helps..

Re: i need help in javascript function :S !

Posted: Tue May 15, 2012 11:12 am
by pickle
Google "chained select"

Re: i need help in javascript function :S !

Posted: Tue May 15, 2012 2:51 pm
by mekha
i dont know what query to use in the php page :\

Re: i need help in javascript function :S !

Posted: Tue May 15, 2012 2:52 pm
by mekha
this is my code :

Code: Select all

<?php
require_once("conn.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){


$(function() {
$('#maincategory').change(function() {
var id= $(this).val();
$.ajax({  
                type: "POST",
               url:'subcat.php', 
               data: "aid="+id+,   
               success: function(data) {
                            if(data){
                                          
                           jQuery("#childcategory").html(data) ;
                                       }
                }  
            });  

});


})
</script>
 </head>

 <body>
  

<form action="" method="post">
<?php
								mysql_query("SET NAMES 'utf8'");
							$result2 = mysql_query("SELECT Id as value,category_name as title FROM categories");
							while($row = mysql_fetch_assoc($result2)){
								extract($row);					
								?>
								<option value="<?=$value?>"><?=$title?></option>
								<?php
							}
							?>
</select>

<select id="childcategory">
</select>

</form>
 

 </body>
</html>

...what to put into the php page (subcat.php)

Re: i need help in javascript function :S !

Posted: Tue May 15, 2012 3:16 pm
by Celauran
You'll want a query that returns subcategories with category matching $_POST['aid'].

Re: i need help in javascript function :S !

Posted: Tue May 15, 2012 3:32 pm
by mekha
this is my php code:

Code: Select all

<?php
include 'base2.php';
$cat =mysql_real_escape_string($_POST['aid']);
                                                                mysql_query("SET NAMES 'utf8'");
                                                        $result22 = mysql_query("SELECT sub_id as value2,sub_name as title2 FROM sub_categories WHERE category_full=".$cat);
                                                        while($row2 = mysql_fetch_assoc($result22)){
                                                                extract($row2);                                  
                                                                ?>
                                                                <option value="<?=$value2?>"><?=$title2?></option>
                                                                <?php
                                                        }
                                                        ?>
and this is the html:

Code: Select all


<?php
require_once("base2.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){



$('#maincategory').change(function() {
var id= $(this).val();
$.ajax({  
                type: "POST",
               url:'subcat.php', 
               data: "aid="+id+,   
               success: function(data) {
                            if(data){
                                          
                           jQuery("#childcategory").html(data) ;
                                       }
                }  
            });  




})
</script>
 </head>

 <body>
  

<form action="" method="post">
<select id="maincategory">
<?php
                                                                mysql_query("SET NAMES 'utf8'");
                                                        $result2 = mysql_query("SELECT Id as value,category_name as title FROM categories");
                                                        while($row = mysql_fetch_assoc($result2)){
                                                                extract($row);                                  
                                                                ?>
                                                                <option value="<?=$value?>"><?=$title?></option>
                                                                <?php
                                                        }
                                                        ?>
</select>

<select id="childcategory">

</select>

</form>
 

 </body>
</html>
[/syntax]

Re: i need help in javascript function :S !

Posted: Wed May 16, 2012 2:27 am
by mekha
i dont see any errors in my code :S ... can u help me to find it please ?

Re: i need help in javascript function :S !

Posted: Wed May 16, 2012 3:50 am
by Gopesh
Hi,U should do like this on ur php page(page that u mentioned in the ajax url).

Code: Select all

if(isset($_POST['valaue from ajax call'])){
$val=$_POST['valaue from ajax call'];
$link = mysql_connect('localhost', 'root', ''); //change the configuration if required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('your db_name');

$query="SELECT  value,tittle  FROM table_name WHERE field_in table= '$val'";
$result=mysql_query($query);

$row = mysql_fetch_array($result);

 //echo $add1= $row['name'];
// echo $add2= $row['id'];
echo '<option value='.$row['value'].'>'.$row['title'].'</option>';



}

Change the code according to ur needs..

Re: i need help in javascript function :S !

Posted: Wed May 16, 2012 4:11 am
by mekha
still not working:
there are nothing sent to the subcat.php file.....

this is the html:

Code: Select all

<?php
require_once("functions.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

$('#maincategory').change(function() {
var id= $(this).val();
$.ajax({  
                type: "POST",
               url:'subcat.php', 
               data: "aid="+id+,   
               success: function(data) {
                            if(data){
                                          
                           jQuery("#childcategory").html(data) ;
                                       }
                }  
            }); 









});










})




</script>
 </head>

 <body>
  

<form action="" method="post">
<select id="maincategory">
<option value="">--</option>
<?php
                                                                mysql_query("SET NAMES 'utf8'");
                                                        $result2 = mysql_query("SELECT Id as value,category_name as title FROM categories");
                                                        while($row = mysql_fetch_assoc($result2)){
                                                                extract($row);                                  
                                                                ?>
                                                                <option value="<?=$value?>"><?=$title?></option>
                                                                <?php
                                                        }
                                                        ?>
</select>

<select id="childcategory">

</select>

</form>
 

 </body>
</html>
and this is the php:

Code: Select all

<?php
if(isset($_POST['aid'])){
$val=$_POST['aid'];
$link = mysql_connect('localhost', 'root', ''); //change the configuration if required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('yad2');

$query="SELECT sub_id,sub_name FROM sub_categories WHERE category_full= '$val'";
$result=mysql_query($query);

$row = mysql_fetch_array($result);

 //echo $add1= $row['name'];
// echo $add2= $row['id'];
echo '<option value='.$row['sub_id'].'>'.$row['sub_name'].'</option>';



}


                                                        ?>

Re: i need help in javascript function :S !

Posted: Wed May 16, 2012 7:13 am
by Gopesh
Hi,can u debug what the value is comming when choose an option from main category.Eg: alert the value of id after the change() function.

Re: i need help in javascript function :S !

Posted: Wed May 16, 2012 7:48 am
by mekha

Code: Select all

$('#maincategory').change(function() {
var id= $(this).val();
alert(id);
i get nothing in alert....there are no alert

Re: i need help in javascript function :S !

Posted: Wed May 16, 2012 7:51 am
by Gopesh
ok..Are u using firefox? if yes, press Ctrl + shift +J to see any errors..Hope that u have options in main category select list

Re: i need help in javascript function :S !

Posted: Wed May 16, 2012 7:56 am
by mekha
this is my print screen:
Image

Re: i need help in javascript function :S !

Posted: Wed May 16, 2012 8:02 am
by Gopesh
can u try it with any other browser? which version of firefox are u using?