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

JavaScript and client side scripting.

Moderator: General Moderators

mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

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

Post 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 ?
Last edited by mekha on Wed May 16, 2012 9:14 am, edited 1 time in total.
Gopesh
Forum Contributor
Posts: 143
Joined: Fri Dec 24, 2010 12:48 am
Location: India

Re: i need help in javascript function :S !

Post 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..
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: i need help in javascript function :S !

Post by pickle »

Google "chained select"
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

Re: i need help in javascript function :S !

Post by mekha »

i dont know what query to use in the php page :\
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

Re: i need help in javascript function :S !

Post 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)
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: i need help in javascript function :S !

Post by Celauran »

You'll want a query that returns subcategories with category matching $_POST['aid'].
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

Re: i need help in javascript function :S !

Post 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]
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

Re: i need help in javascript function :S !

Post by mekha »

i dont see any errors in my code :S ... can u help me to find it please ?
Gopesh
Forum Contributor
Posts: 143
Joined: Fri Dec 24, 2010 12:48 am
Location: India

Re: i need help in javascript function :S !

Post 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..
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

Re: i need help in javascript function :S !

Post 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>';



}


                                                        ?>
Gopesh
Forum Contributor
Posts: 143
Joined: Fri Dec 24, 2010 12:48 am
Location: India

Re: i need help in javascript function :S !

Post 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.
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

Re: i need help in javascript function :S !

Post by mekha »

Code: Select all

$('#maincategory').change(function() {
var id= $(this).val();
alert(id);
i get nothing in alert....there are no alert
Gopesh
Forum Contributor
Posts: 143
Joined: Fri Dec 24, 2010 12:48 am
Location: India

Re: i need help in javascript function :S !

Post 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
mekha
Forum Contributor
Posts: 112
Joined: Sat Mar 31, 2012 6:50 am

Re: i need help in javascript function :S !

Post by mekha »

this is my print screen:
Image
Gopesh
Forum Contributor
Posts: 143
Joined: Fri Dec 24, 2010 12:48 am
Location: India

Re: i need help in javascript function :S !

Post by Gopesh »

can u try it with any other browser? which version of firefox are u using?
Post Reply