i am using jquery-ajax to show multiple depandant drop down . all things going right but i have an issue which is that when there is no value aginst a selected drop down , then the child drop down must hide it self .. but in my code it show itself empty . i want that child drop down list hide ..kindly help me in this regard ..
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#parent_state").change(function() {
$.get('loadsubcat.php?parent_state=' + $(this).val(), function(data) {
$("#city").html(data);
});
});
});
/script>
<?php
$con=mysql_connect( 'localhost' , '' , '');
if($con){
mysql_select_db('test' , $con);
//echo "database selected";
}
?>
<form method="post">
<?php
$sql= "SELECT * FROM state";
$rs= mysql_query($sql);
if(mysql_num_rows($rs) > 0){
?>
<select name="parent_state" id="parent_state">
<option value""></option>
<?php
while($nrow=mysql_fetch_array($rs)){
echo "<option value=".$nrow['state_id']. ">".$nrow['state_name']. "</option>";
}
?> </select>
<?php
}
?>
<select name="city" id="city">
<option value=""></option>
</select>
</form>
this is loadsubcat.php
$parent_state = $_GET['parent_state'];
$query = mysql_query("SELECT * FROM city WHERE state_id = {$parent_state}");
if(mysql_num_rows($query)>0){
while($row = mysql_fetch_array($query)) {
echo "<option value=".$row['city_id']. ">".$row['city_name']. "</option>";
}
}
Couldn't you move the other drop-down(one with the name="city"), inside the if condition? With that, if the parent drop-down doesn't exist, neither will the child.
Something like this -
...
if(mysql_num_rows($rs) > 0){
?>
<select name="parent_state" id="parent_state">
<option value""></option>
<?php
while($nrow=mysql_fetch_array($rs)){
echo "<option value=".$nrow['state_id']. ">".$nrow['state_name']. "</option>";
}
?>
</select>
//I've added the child select here.
<select name="city" id="city">
<option value=""></option>
</select>
<?php
}
?>
...
Try changing your script to this
<script type="text/javascript">
$(document).ready(function() {
$("#parent_state").change(function() {
$("#city").load('loadsubcat.php?parent_state=' + $(this).val());
});
});
</script>
I've had issues with $.get before as well, trying to pass data that way. If you insist on using $.get you should put the data in json format and pass is to the function as a parameter. see the documentation
But in this case i think .load is the appropriate answer
Another thing to be aware of is that having spaces in your parameters will cause an issue. A safe way of dealing with this is to encode the parameters ie..
$("#parent_state").change(function() {
params = encodeURI($(this).val());
$("#city").load('loadsubcat.php?parent_state=' + params);
});
Related
I have 2 select menu :
<select name="nama_paket">
<?php
do {
?>
<option value="<?php echo $row_qpaket['nama_paket']?>"><?php echo $row_qpaket['nama_paket']?></option>
<?php
} while ($row_qpaket = mysql_fetch_assoc($qpaket));
$rows = mysql_num_rows($qpaket);
if($rows > 0) {
mysql_data_seek($qpaket, 0);
$row_qpaket = mysql_fetch_assoc($qpaket);
}
?>
</select>
and
<select name="harga">
<?php
do {
?>
<option value="<?php echo $row_qpaket['harga']?>" ><?php echo $row_qpaket['harga']?></option>
<?php
} while ($row_qpaket = mysql_fetch_assoc($qpaket));
?>
</select>
when we select the first select menu the second select menu change automatically? Thanks
If you want to change it Dynamically when according to 1st selected value, you need to use ajax in order to do this
this answer explain it
You need to get select name="hagra" via AJAX after selecting select name="nama_paket"
You can use Jquery .change() event for this. Like:
$('select[name=nama_paket]').change(function(){
// your code you can set different value to second select box
})
I have jQuery PHP function to add more fields.
HTML
<div class="faculty_row">
<select name="search_category" id="search_category_id">
<option value="" selected="selected"></option>
<?php
$query = "SELECT * FROM t_category ORDER BY category_name ASC";
$results = mysql_query($query);
while ($rows = mysql_fetch_assoc(#$results))
{?>
<option value="<?php echo $rows['category_id'];?>"><?php echo $rows['category_name'];?></option>
<?php
}?>
</select>
<input type="text" name="message[]">
</div>
Add More
JS
jQuery(document).ready(function($){
$("#add_more").on('click', function(e){
e.preventDefault(); // Prevent Default the event
var clone = $(".faculty_row").eq(0).clone(); // clone only first item
$("#faculty_wrapper").append(clone); // append it to our form
});
Then I have jQuery Populate Second Combobox based on First Combobox
html
<select name="search_category" id="search_category_id">
<option value="" selected="selected"></option>
<?php
$query = "SELECT * FROM t_category ORDER BY category_name ASC";
$results = mysql_query($query);
while ($rows = mysql_fetch_assoc(#$results))
{?>
<option value="<?php echo $rows['category_id'];?>"><?php echo $rows['category_name'];?></option>
<?php
}?>
</select>
<span id="show_sub_categories" align="center">
JS
jQuery(document).ready(function($){
$('#loader').hide();
$('#show_heading').hide();
$('#search_category_id').change(function(){
$('#show_sub_categories').fadeOut();
$('#loader').show();
$.post("get_chid_categories.php", {
parent_id: $('#search_category_id').val(),
}, function(response){
setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
});
return false;
});
function finishAjax(id, response){
$('#loader').hide();
$('#show_heading').show();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function alert_id()
{
if($('#sub_category_id').val() == '')
alert('Please select a sub category.');
else
alert($('#sub_category_id').val());
return false;
}
Each function is run perfectly. How can I combine that 2 function to be 1? So the populate Second Combobox based on First Combobox can be run on next row if I click button Add More.
I am using Ajax in order to display drop-down list when a product group is selected. My Ajax returns a list from the query page(dropd.php). However the problem is the array consists of some empty space between each element. Hence when I did inspect in chrome below is the output I am getting,
<option value="1">Gear pumps</option>
<option></option>
<option value="2">Piston pumps</option>
<option></option>
How could I remove "<option></option>" from the drop-down list? If I take option tag out from html what I receive is;
Gear pumps^piston pumps^vane pumps...etc
If you can notice the space(^).
Ajax code
<script>
$(document).ready(function(){
$('#sel1').on('change', function(){
$.post("dropd.php",{vals:$("#sel1 option:selected").text()},
function(data){$.trim($("#sel2").html( data ));});
});
});
</script>
dropd.php
<?php
require('../config/connection.php');
if($_POST['vals']){
$values = mysqli_real_escape_string($dbc,$_POST['vals']);
$query = "SELECT * FROM prdct_categories WHERE product = '$values'";
$result = mysqli_query($dbc, $query);
?>
<option value="">Select subgroup</option>
<?php
foreach($result as $row)
{ ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['subgroup']; ?><option/>
<?php
}
}
mysqli_close($dbc);
?>
Ajax data goes here
<div class="form-group">
<label for="inputsubprdctgrp" class="col-sm-4 control-label" >Product Subgroup</label>
<div class="col-sm-8">
<select class="form-control" id="sel2" >
</select>
</div>
</div>
Thanks in advance.
There may be 2 issues:
The SQL result gives an empty value which can be fixed by using the array_filter() method:
$new_result = array_filter($result);
You wrote option/ instead of **/option
Hope this helps :)
just dont put those values in options if it is blank..
you can use below code.
$result = mysqli_query($dbc, $query);
?>
<option value="">Select subgroup</option>
<?php
foreach($result as $row)
{
if(trim($row['subgroup'])!=''){
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['subgroup']; ?><option/>
<?php
}
}
mysqli_close($dbc);
?>
Just use `
$('#sel2').find('option:empty').remove();`
after you load content from ajax,
if you want to do it in javascript, otherwise avoid it in PHP in the first place.
I'm not sure why this is not firing. When I test the code, the forms appear, but when I select from the first form, noting happens. I am sure that for whatever reason, the .change(function) is not working.
<?php
require("scripts/dbconnect.php");
$stmt = $db->prepare('SELECT name FROM sets');
$stmt->execute();
$data = $stmt->fetchAll();
?>
<select id="first-choice">
<?php foreach ($data as $row): ?>
<option><?=$row["name"]?></option>
<?php endforeach ?>
</select>
<br />
<select id="second-choice">
<option>Please choose from above</option>
</select>
<script language=JavaScript>
$("#first-choice").change(function() {
$("#second-choice").load("getter.php?choice=" + $("select#first-choice option").filter(":selected").val());
});
</script>
You need to first, make sure JQuery is included on the page (it isn't in your post). And second, make sure your code is called when the DOM is ready.
$(document).ready(function(){
$("#first-choice").change(function() {
$("#second-choice").load("getter.php?choice=" + $("select#first-choice option").filter(":selected").val());
});
});
I'm a beginner in coding of PHP, just want to ask how to display records using the script below?
$option = '';
while($row = mysql_fetch_assoc($get))
{
$option .= '<option value = "'.$row['rfq'].'">'.$row['rfq'].'</option>';
}
?>
<form>
<select>
<option value="ALL">ALL</option>
<?php echo $option; ?>
</select>
</form>
ALL option is load when the page runs and displays all the record in table, and when I choose 13-001 I want to display the record of 13-001. How to do that?
Use AJAX, dude. It's very cool and easy.
An Example
Another good example using jQuery
Do the same thing again but use a WHERE clause.
Also i hope you are using mysqli not mysql - it will be gone soon.
<form>
<select name='rfq' onChange='this.form.submit()'>
<option></option>
etc...
</select>
<input name='Submit' value='Submit' type='submit'>
</form>
<?php
if(isset($_POST['submit'])) {
$rfq = $_POST['rfq'];
$query = "SELECT * FROM table WHERE rfq = '$rfq'";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
echo "{$row['id']} <br>";
echo "{$['field1']} <br>";
echo "{$row['field2']} <br>";
etc..
}
}
?>
You need to format it of course, but that should get you started.