I have two tables in my database:
Table 1: Country => countryid(primary),countryname and
Table 2: State => stateid(primary),countryid(foreign),state
Now I want to make a drop down list. For example:
Country India (dropdown 1) should show States Goa, UP and MP (dropdown 2)
Country Pakistan (dropdown 1) should show States Lahore and Karachi (dropdown 2)
I have populated both tables with these values.
Here I am including my code files. I am able to get the first menu working but no values in the second menu. I want the second menu to change instantly when the value selected in the first menu is changed (not just when the page is loaded).
index.php
<?php
include('config.php');
$query_parent = mysql_query("SELECT * FROM country") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#countryname").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?countryid=' + $(this).val(), function(data) {
$("#stateid").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="countryname" id="countryname">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['countryid']; ?>"><?php echo $row['countryname']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Sub Category</label>
<select name="state" id="stateid"></select>
</form>
</body>
</html>
config.php
<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('login');
?>
loadsubcat.php
<?php
include('config.php');
$countryid = $_GET['countryid'];
$query = mysql_query("SELECT * FROM state WHERE countryid = {$countryid}");
while($row = mysql_fetch_array($query)) {
echo "<option value='$row['stateid']'>$row['state']</option>";
}
?>
I am not able to figure out my problem. Also I have not done PHP before. This is the first time I am learning and that too with this project, so forgive me if I made disastrous mistakes.
Here you are sending the country id with key name countryname:
$.get('loadsubcat.php?countryname=' + $(this).val(), function(data) {
But on your PHP file, you are trying to get the value by using countryid:
$countryid = $_GET['countryid'];
Change and make it same for both. It will work!
UPDATE:
$("#state").html(data);
Here you are referring state but on your HTML, you are using stateid.
<select name="state" id="stateid"></select>
What Muhammad Sumon Molla Selim said is correct and there is one more mistake in loadsubcat.php
you need to change, echoing options statement
From:
echo "<option value='$row['stateid']'>$row['state']</option>";
To:
echo "<option value=".$row['stateid'].">".$row['statename']."</option>";
Then second dropdown will get states based on change in coutries dropdown.
when I excecuted your code in my local machine I was not getting data. The mistake you did was you are not concatinating the strings and variables properly.
Related
I have problem how to put seach box inside in a dropbox, I had already a code using some javascript but It didn't work can you please help me about it?
Here's my code
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
here's my select tag codes:
<?php
$sql = mysql_query("SELECT * FROM barangay");
?>
<select class="js-example-basic-single" name="barangay_ID" style='width:160px;height:38px;border-radius:8px;border-color:#D7D7D7;margin-left:55px;' autofocus required>
<option disabled selected hidden>← Please select →</option>
<?php
while ($row = mysql_fetch_array($sql)){
echo "<option value='".$row['barangay_ID']."'>".$row['barangay_name']."</option>";
}
echo "</select>";
?>
Don't know why it doesn't work please help mean example
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
this is a index.php page where i have dropdown list
when i select the value from dropdown list i wont display that value in user.php page i use javascript onchange
<html>
<head>
<title>Test Selected Dropdown Value</title>
<script type="text/javascript">
function selected_region(){
var vr = document.getElementById("region").value;
alert("Selected region is: "+vr);
}
</script>
</head>
<body>
<form name="selected_region_form" method="POST" action="user.php">
<?php ?>
<select name="region" id="region" onchange="selected_region();">
<label for="region">Odaberite zupaniju:</label>
<option>
<?php
$region_data = all_regions();
while($region = mysqli_fetch_array($region_data)){
$id_region = $region['zupanija_id'];
$name_region = $region['naziv'];
?>
<option value="<?php $id_region; ?>"><?php echo $name_region; ?></option>
<?php
}
?>
</option>
</select>
<input type="submit" name="send" value="Send"/>
</form>
</body>
</table>
</body>
</html>
this is the user.php script
under in td tag-s i wont display selected value from index.php
<?php
include('connect.php');
include('functions.php');
?>
<html>
<head>
<title>User</title>
</head>
<body>
<h1>User</h1>
<h2>selected region:</h2>
<table border="1">
<tr>
<td> <!-- here i need display a selected region --> <td>
</tr>
</table>
</body>
Back
</html>
functions.php script where a fatch my query:
<?php
function confirm_query($result_set){
if(!$result_set){
die("Query data faild!");
}
}
function all_regions(){
global $db_connection;
$query = "SELECT `zupanija_id`,`naziv` ";
$query .= "FROM `zupanija` ";
$query .= "ORDER BY `zupanija_id` ASC";
$zupanije_data = mysqli_query($db_connection, $query);
confirm_query($zupanije_data);
return $zupanije_data;
}
?>
connection script:
<?php
$connect_error = 'Connection faild!';
$select_db_error = 'Database not found!';
$db_connection = mysqli_connect('localhost', 'iwa_2013', 'foi2013') or die($connect_error);
$db_select = mysqli_select_db($db_connection, 'iwa_2013_sk_projekt') or die($select_db_error);
//setup charset to utf-8
mysqli_set_charset($db_connection, 'utf8');
?>
I think the best way to do this is to attach an onchange event handler to your select element, then have it fire off an AJAX request to your PHP script every time the user selects something.
sending a value from drop down box to another page
Your form is actually submitted to the kreiran_zahtjev.php page via the post method so the element you clicked on will be available via the $_POST variable on kreiran_zahtjev.php
Essentially, if you want to access the clicked element, all you have to do is:
$_POST['zupanija']
Also, you shouldn't use the mysql_ extension of PHP, it's insecure and deprecated. You should use either PDO or mysqli.
I try to use pop up to calling my form, it works but every time I pick a value on combo box (onchange action), the form won't keep open so I have to click that pop up again (the value is retain though)
any idea?
here's the code:
<head>
<title>JQuery Popup | JQuery Slide Popup | Demo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div id="wrapper">
<div id="overlay" class="overlay"></div>
<a onclick="openOffersDialog();">Click Here To See The PopUp</a>
<div id="boxpopup" class="box">
<a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Info Tarif</title>
</head>
<?php include('connection.php'); ?>
<body>
<?php
$query = "SELECT distinct (kota_kabupaten) FROM `ongkirjne` order by kota_kabupaten ASC ";
$result = mysql_query($query);
?>
<form name="satu" method=GET action="index.php" openOffersDialog();>
Pilih Daerah Tujuan :
<select name="kota" onChange='this.form.submit();'>
<option value="">-Pilih Kota/Kabupaten-</option>;
<?php while ($row = mysql_fetch_assoc($result)) { ?>
<option <?php if($_REQUEST['kota'] == $row['kota_kabupaten']) echo "selected" ?> ><?php echo $row['kota_kabupaten']; ?></option>
<?php } ?>
</select>
<br>
Pilih Kecamatan :
<select name='kec' class='nama' Method='GET'>
<?php
echo"<option value>-Pilih Kecamatan-</option>";
$city= $_GET['kota'];
if (isset($_GET['kota']))
{
$query = "SELECT * FROM `ongkirjne` where kota_kabupaten like '%$city%'";
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {?>
<option <?php if($_REQUEST['kec'] == $row['kecamatan']) echo "selected" ?> >
<?php echo $row['kecamatan']; ?></option>
<?php } ?>
<?php } ?>
</select> Berat : <input type="text" name="berat" value="<?php echo htmlspecialchars($_GET['berat']); ?>"/>
<?php
echo " <input type='submit' name='hitung' value='hitung' onclick='hitung()'/>";
my desire result are:
1. when I click the pop up link, the form shows (ok)
2. when I pick the value on first combo box, the form retain (fail) -> using on change action.
3. when I pick the value on first combo box, the value retain (ok)
4. when I click submit button(hitung), the value retain and the function works (ok)
I want all of them on the same page.
thank you
If I understand what your problem is I believe it can be fixed by just not having any code that hides the form.
Are you using the .toggle function? If so, change that to .show
If you'd like the form to be hidden again after it's submitted then that will be done automatically when the page refreshes (given you're not using AJAX). You can set the action to "#" for the page to redirect to itself instead of another file.
I try to integrate a PHP Site with a "depending dropdown List" (using Javascript) into my Wordpress site. When I run the PHP Site "outside" Wordpress (which means the whole URL like: "www.xxx.com/wp-content/themes/lawyerplus/upload.php") then everything works as expected - which means the "dependend dropdown lists" will be filled, but when I run the same page within wordpress: www.xxx.com/upload/ then the javascript will not run, and so the lists will not be filled.
So the Question will be: How can I tell Wordpress, that it should run the Javascript files inside the PHP Files which will be integrated using the Wordpress Plugin "MaGiKS Proper PHP Include"?
Here is the part in upload.php where the Rubrik(Category) will be called. This is working, so the Category (Rubrik) will be showed.
<tr>
<td>Rubrik*</td>
<td><? include "test.php"; ?></td>
</tr
Here is the content of test.php
<?php include('config.php');
mysql_query("SET CHARACTER SET 'utf8'");
$query_parent = mysql_query("SELECT DISTINCT cat_id, category FROM category order by category asc") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="http://austrianweddingaward.at/wp-content/themes/lawyerplus/js/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#parent_cat").change(function() {
jQuery(this).after('<div id="loader"><img src="http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/img/loading.gif" alt="loading subcategory" /></div>');
jQuery.get('http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/loadsubcat.php?parent_cat=' + jQuery(this).val(), function(data) {
jQuery("#sub_cat").html(data);
jQuery('#loader').slideUp(200, function() {
jQuery(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Hauptkategorie</label>
<select name="parent_cat" id="parent_cat">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['cat_id']; ?>"><?php echo $row['category']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Unterkategorie</label>
<select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>
Here is the content of loadsubcat.php
<?php
include('config.php');
$parent_cat = $_GET['parent_cat'];
echo $parent_cat;
mysql_query("SET CHARACTER SET 'utf8'");
$query = mysql_query("SELECT * FROM subcategory WHERE cat_id = '$parent_cat'");
echo $query;
while($row = mysql_fetch_array($query)) {
echo "<option value='$row[id]'>$row[subcategory]</option>";
}
?>
Kind Regards for any suggestions.
Stefan
Hi so looking at the actual generated source code of the HTML page the error becomes clear: You have html tags in your javascript code. Actually you will find the same thing happening on several of your blog pages. Once you fix that, everything should work out.
I would guess that you are using the wordpress text editor to inject the javascript, but that seems to have caused some problems.
You could quickly figure this out when opening the javascript console / developer tools of your favourite development browser.
<head><br />
<meta charset="utf-8"><br />
<title>Dependent DropDown List</title><br />
<script type="text/javascript" src="http://austrianweddingaward.at/wp-content/themes/lawyerplus/js/jquery.js"></script><br />
<script type="text/javascript">
jQuery(document).ready(function() {</p>
<p> jQuery("#parent_cat").change(function() {
jQuery(this).after('
<div id="loader"><img src="http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/img/loading.gif" alt="loading subcategory" /></div>
<p>');
jQuery.get('http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/loadsubcat.php?parent_cat=' + jQuery(this).val(), function(data) {
jQuery("#sub_cat").html(data);
jQuery('#loader').slideUp(200, function() {
jQuery(this).remove();
});
});
});</p>
<p>});
</script><br />
</head></p>
I was having an issue with some code I had so I am starting again from scratch, but now something that was working in my original code is not working here and I can not figure out why. When I make a selection from the dropdown box the onchange function, which should trigger my reload function, nothing happens. Here is my code:
<!DOCTYPE html>
<?php
require 'config.php'; // Database connection
//////// End of connecting to database ////////
?>
<html>
<head>
<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.year1.options[form.year.options.selectedIndex].value;
self.location='spt.php?year1='+val;
}
</script>
</head>
<body>
<div>
<?Php
#$year1=$_GET['year1'];
#$team1=$_GET['team1'];
$quer1="SELECT DISTINCT year FROM PlayerRegSeason ORDER BY year";
$quer2="SELECT DISTINCT team FROM PlayerRegSeason WHERE year=$year1 ORDER BY team";
$quer3="SELECT fname, lname FROM PlayerRegSeason WHERE year=$year1 and team ='$team1'";
echo "<form method=post name=f1 action ='searchpageresultsdd.php'>";
echo "<select name ='year1' onchange=\"reload(this.form)\"><option value=''>Select Year</option>";
foreach ($dbo->query($quer1) as $row1){
if($row1['year']==#$year1){echo "<option selected value='$row1[year]'>$row1[year]</option>"."<BR>";}
else{echo "<option value='row1[year]'>$row1[year]</option>";}
}
echo "</select>";
?>
</div>
</body>
</html>
Since the name attribute of the <select> tag is year1, this syntax
var val=form.year1.options[form.year.options.selectedIndex].value;
should be changed to this
var val=form.year1.options[form.year1.options.selectedIndex].value;