i am stuck with strange problem. i have dropdown populate values through db. after populating i append new value. no i want to call function when user select this new value.
if($('#ab option:selected').text() === "Other")
{
$('#txtbox').show();
}
<select class="form-control col-md-7 col-xs-12" id="ab" >
<option select = "selected" value = "" >Select county </option>
<?php
$con=mysqli_connect("localhost","root","","db1");
//Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "select county from tbl WHERE Code = 'a'";
$res = mysqli_query($con, $sql);
if(mysqli_num_rows($res) > 0) {
while($row = mysqli_fetch_object($res)) {
echo "<option value='".$row->id."'>".$row->county."</option>";
}
echo "<option value='".$row->id."'>Other";
}
?>
</select>
i have tried many things but nothing works
Use change event handler and move your code within the callback.
$('#ab').change(function(){
if($(this).text() === "Other"){
$('#txtbox').show();
} else{ // add else part to hide the element
$('#txtbox').hide();
}
});
FYI : You can make your code more simple by using toggle() method.
$('#ab').change(function(){
$('#txtbox').toggle($(this).text() === "Other");
});
You are missing a closing tag for the last option in server-side code.
echo "<option value='".$row->id."'>Other</option>";
// -- here -----------------------------^^^^^^^^^^----
FYI : For running jQuery code correctly after loading all element wrap code within document ready handler.
Related
I have a program which changes the value of options in a select based on another select. The values of the select are taken from a database which contains all the information needed. I want to change the image tag of my index.php page to match the link to an the selected image (stored in the database). I have tried and failed to change the img src to match the relevant link.
Does anyone know of any existing questions which may match what I need or even a way to do this? I will provide all the code used below.
index.php code:
<div class="">
<label>Folder:</label>
<select name="dir" id="dir">
<option value=''>------- Select --------</option>
<?php
$sql = "select * from `dir`";
$res = mysqli_query($con, $sql);
if(mysqli_num_rows($res) > 0) {
while($row = mysqli_fetch_object($res)) {
echo "<option value='".$row->id."'>".$row->directory."</option>";
}
}
?>
</select>
<label>Image Number:</label>
<select name="images" id="images"><option>------- Select --------</option></select>
</div>
<img id="img" src=""/>
js.js code:
$(document).ready(function() {
$("#dir").change(function() {
var image_id = $(this).val();
if(image_id != "") {
$.ajax({
url:"get-folders.php",
data:{c_id:image_id},
type:'POST',
success:function(response) {
var resp = $.trim(response);
$("#images").html(resp);
}
});
} else {
$("#images").html("<option value=''>------- Select --------</option>");
}
});
});
get-folders.php code:
<?php include("db.php"); ?>
<?php
if(isset($_POST['c_id'])) {
$sql = "select * from `images` where `image_id`=".mysqli_real_escape_string($con, $_POST['c_id']);
$res = mysqli_query($con, $sql);
if(mysqli_num_rows($res) > 0) {
echo "<option value=''>------- Select --------</option>";
while($row = mysqli_fetch_object($res)) {
echo "<option value='".$row->id."'>".$row->name."</option>";
}
}
} else {
header('location: ./');
}
?>
You need to store the url of the image in the options like this:
echo "<option value='".$row->id."' data-src='".$row->url."'>".$row->name."</option>";//data-src is custom attribute
Then you can access the data-src attribute with jQuery:s data method(add this to your document.ready function after the dir change callback):
$("#images").change(function() {
$('#img').prop('src',$('#images option:selected').data('src'));// add this to top of your change function for the images select box
});
i am trying to populate second dropdown based on the selected option of 1st dropdown but i am unable to do so i dont know what i am doing wrong but something is wrong all my endeavors to achieve my desired results are dashed to the ground cuz its not working kindly help me
so far i have done this....
<select name="ddl_company" size="1" class="form-control" id="ddl_company" onchange="getId(this.value);">
<option value="">Select Company</option>
<?php
//Getting Company name from mysql and displaying it in the 1st dropdown having id ddl_company
$query = mysql_query("select * from company where company_status='Active'order by company_name asc");
while ($r = mysql_fetch_array($query)) {
if ($r['company_id'] == $ddl_company) {
echo "<option selected value=$r[company_id]>$r[company_name]</option>" . "<BR>";
} else {
echo "<option value=$r[company_id]>$r[company_name]</option>";
}
// second drop down list which is going to fetch data from mysql db based on the selected option of 1st dropdown
?>
<select name="ddl_dept" size="1" class="form-control" id="ddl_dept">
<option value=""></option>
</select>
//ajax implementation of 2nd dropdown
<script type="text/javascript">
function getId(val)
{
$.ajax({
type:"POST",
url:"getdata.php",
data:"company_id="+val,
success:function(data)
{
$('#ddl_dept').html(data);
}
});
}
</script>
finally get_data.php file
<?php
include("../newconfig.php");
if (!empty($_POST['company_id'])) {
$company_id = $_POST['company_id'];
$query = "select * from department where department_status='Active'LIMIT 1 AND company_id='$company_id'LIMIT 1";
$sqlquery = mysql_query($query);
while ($r = mysql_fetch_array($sqlquery)) {
# code...
if ($r['company_id'] == $company_id) {
echo "<option selected value=$r[department_id]>$r[department_name]</option>" . "<BR>";
} else {
echo "<option value=$r[department_id]>$r[department_name]</option>";
}
}
}
}
?>
I have done all this yet its not working kindly help me i shall be very thankful. btw thats my output
click this to show the result
Try something like this : jquery
$("select#ddl_dept").on('change',function(){
var selected = $('#ddl_company option:selected').text();
getId(selected );
});
I have this drop down list that when I click on it, it shows me a hidden div
<form action="" method="post" name="select_name_form">
<input type="submit" name="select_name_submit" value="debts"/>
<select onchange="showMe(this);" name="select_name">
<?php foreach($result1 as $name) { ?>
<option value="<?php echo $name['name'] ?>"><?php echo $name['name'] ?></option>
<?php } ?>
</select>
</form>
And this is the javascript code:
<script type="text/javascript">
function showMe(e) {
var strdisplay = e.options[e.selectedIndex].value;
var e = document.getElementById("section3");
if(strdisplay == "Hide") {
e.style.display = "none";
} else {
e.style.display = "block";
}
}
</script>
What I want to make when I click on any value of this list is still shows me the hidden div but I want to apply this PHP code and select data into that div:
if(isset($_POST['select_name_submit'])){
$name_selected = $_POST['select_name'];
try{
$query = ("SELECT * FROM debts WHERE name=:name");
$stmt = $conn->prepare($query);
$stmt->bindValue(":name", $name_selected);
$count = $stmt->execute();
//header("location: debts.php");
}
catch(PDOException $e) {
echo $e->getMessage();
header("location: debts.php");
}
}
This PHP code is in the same page where I have the drop down list. So how can I make the drop list run 2 code when a name is selected from it (one code is JS and the second is PHP).
The scenario which you mentioned can be achieved using ajax,
http://www.w3schools.com/php/php_ajax_database.asp
Please refer this example, you will get more idea.
in case needed, please add comment, i can help you.
Thanks
Amit
I have three select boxes on a page and when someone selects an option from the 1st box, I want to update the options via ajax for the 2nd box. When someone updates the 2nd box then the 3rd box gets new options via ajax.
The problem I'm having seems to be that when the user updates the first box, I check the DB for the options I need and then in php create the new select box and replace the original one. The problem is, even though the code for the select box is the same, and the id's the same the original javascript which was watching for a change on this 2nd box no longer works.
here's the cakephp/html all the cake stuff is doing is creating select boxes.
<table>
<tr>
<td class="threeCol"><?php echo $this->Form->input('industry', array('type'=>'select', 'options'=>$industries, 'empty'=>'Industry', 'id'=>'industry', 'class'=>'formInputSelect'));?></td>
<td class="threeCol" id="cateWrap"><?php echo $this->Form->input('category', array('type'=>'select', 'options'=>$categories, 'empty'=>'Category', 'id'=>'category', 'class'=>'formInputSelect'));?></td>
<td class="threeCol" id="courseWrap"><?php echo $this->Form->input('course', array('type'=>'select', 'options'=>$courses, 'empty'=>'Course', 'id'=>'course', 'class'=>'formInputSelect'));?></td>
</tr>
</table>
And the javascript I use:
<script type="text/javascript">
$(document).ready(function() {
//Update categories dropdown when inustry selected
$("#industry").change(function() {
if( this.value != "Industry" ) {
$.post("<?php echo $this->webroot;?>categories/selectoptionsupdate", {id:this.value})
.done(function (data) {
$("#cateWrap").html(data);
});
}
});
//Update course dropdown when category selected
$("#category").change(function() {
if( this.value != "Category" ) {
$.post("<?php echo $this->webroot;?>courses/selectoptionsupdate", {id:this.value})
.done(function (data) {
$("#courseWrap").html(data);
});
}
});
});
And finally the php which creates the new box.
//UPdate the options for the dropdown on post new job page
function selectoptionsupdate() {
if ($this->request->is('ajax')) {
$this->layout = 'ajax';
$id = $this->request->data['id'];
$options = $this->Course->find('list', array('conditions'=>array('Course.category_id'=>$id)));
$result = '';
$result .= '<select name="data[Job][course]" id="course" class="formInputSelect">';
$result .= '<option value="">Course</option>';
foreach($options as $k=>$v) {
$result .= '<option value="'.$k.'">'.$v.'</option>';
}
$result .= '</select>';
echo 'hey';
}
}
Whats the best way round this problem?
change the lines
$("#industry").change(function() {
$("#category").change(function() {
for:
$(document).on("change", "#industry", function() {
$(document).on("change", "#category", function() {
http://api.jquery.com/on/
When I select a value in this dropdown, a javascript function will work and it will give a GET value to URL. Now I want to give that selected value as selected in this dropdown list. How to do that?
<?php while ($row = mysql_fetch_array($res)) { echo '<option value='.$row["id"].'>'.$row["name"].'</option>';}?>
Compare GET value with current loop value
<?php while ($row = mysql_fetch_array($res)) {echo '<option '.(($row['id'] == $_GET['id']) ? 'selected' : '').' value='.$row["id"].'>'.$row["name"].'</option>';}?>
Fetch selected value from GET request to compare with each id and put selected attribute in option tag to make it selected by default.
e.g.
<select name="id">
<?php
while ($row = mysql_fetch_array($res)) {
if ($_GET['id']==$row["id"]) {
echo '<option selected="selected" value='.$row["id"].'>'.$row["name"].'</option>';
} else {
echo '<option value='.$row["id"].'>'.$row["name"].'</option>';
}
}
?>
</select>