Onchange select menu - javascript

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
})

Related

how to hide original dropdown list in select2

I want to use select2 for my dropdown list. The options are from a database query. What I got is there are two dropdown lists showing. The first one is the original dropdown and the second is using select2.
The select code is:
<select name="city" id="select-city" class="form-control">
<option></option>
<?php foreach ($cities as $ct) : ?>
<option value="<?php echo $ct->id ?>"><?php echo $ct->name ?></option>
<?php endforeach; ?>
</select>
And the javascript is:
<script>
$(document).ready(function () {
$("#select-city").select2();
});
</script>
I want to hide the original dropdown. How can I do this?

How to trigger onChange event dynamically using javascript and PHP

I need one help.i am fetching data from my DB ,i need when data has fetched one Javascript function will called through onChange event.Let me to explain my code.
<?php
$id=$_GET['ids'];
if($id!=""){
$getcustomerobj = $dbobj->getFeedbackData($db,$id);
}
?>
<div style="width:24%; float:left; padding:10px;">Answer Type :
<select class="form-control" id="answer_type" name="answer_type" onChange="selectScale(this.value);">
<option value="">Select Answer Type</option>
<?php
$ustatus=array("status"=>'1');
$feeddata=$db->kf_answertype->find($ustatus);
foreach($feeddata as $v){
?>
<option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->answer_type == $v['_id'] or $_REQUEST['answer_type'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['answertype']; ?></option>
<?php } ?>
</select>
</div>
<div style="width:24%; float:left; padding:10px; display:none;" id="scaleid">Scale :
<select class="form-control" id="nscale" name="noofscale">
<option value="">Select No Of Scale</option>
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_scale->find($ustatus);
foreach($feeddata as $v){
?>
<option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->no_of_scale == $v['_id'] or $_REQUEST['no_of_scale'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['noofscale']; ?></option>
<?php } ?>
</select>
</div>
<script>
function selectScale(id){
console.log('select scale',id);
var data=$.param({'op':'getscale','sid':id});
$.ajax({
method:'POST',
url:"dbcon/DBConnection.php",
data:data
}).done(function(msg){
//console.log('msg',msg);
var dedata=JSON.parse(msg);
//console.log('decode',dedata);
if(dedata[0]['data']==1){
document.getElementById("scaleid").style.display="block";
}
if(dedata[0]['data']==0){
document.getElementById("scaleid").style.display="none";
}
});
}
</script>
Here I need when data are fetching from DB the Answer Type drop down field will set with some value.As the second drop down list(i.e-Scale) is depends on first drop down, i need to call selectScale function which has triggered using onChange event.Please help me.
I think you can call onchange event for your first drop-down on document ready so based on this your second drop-down value will be selected.
$(document).ready(function(){
$("#answer_type").trigger("change");
});
may be this is helpful for you.
As what i have understood ,what you need is simply add this line to your java script
selectScale($('#answer_type').val());
Also this solution could work, by triggering change function using jQuery
$("#answer_type").trigger("change");

How to disable drop down option if present in DB

I have a drop down menu that is populated by an array. The goal is to have each value selected only once in the drop down to prevent duplicate column values.
I found some javascript that will disable each value after its selected, but if you reload the page, nothing is greyed out in the drop down (obviously).
How would I compare the array values with the database to disable values that are already selected in all the rows on load?
$(function(){
$('select').change(function() {
$current=$(this);
$("select").not($current).children(
"option[value='" + $current.val() + "']"
).attr('disabled', "disabled");
});
});
Drop Down Menu
<td>
<div class="grid_content editable">
<span><?php echo $records['equipment']; ?></span>
<select class="gridder_input select"
name="<?php echo encrypt("equipment|".$records['id']); ?>">
<?php
foreach($equipment as $equipments) {
?>
<option value="<?php echo $equipments; ?>"
<?php
if($equipments == $records['equipment']) {
echo 'selected="selected"';
}
?>>
<?php echo $equipments; ?>
</option>
<?php
}
?>
</select>
</div>
</td>
Is there an easier way to do this than what I've suggested? I think the closest solution I've found would work something like
$("select option:contains('Value')").attr("disabled","disabled");
Where value would be replaced with something that checks the DB. Or something like the answer found here using an if else statement

drop down show only when value comes from database otherwise hide

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);
});

Change function not firing, javascript dynamic form

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());
});
});

Categories