Unable to retrive value from select options - javascript

whenever I try change the value from dropdown, it shud redirect to other URL..
anyway, i just had little issue..
when I try to change the value, iam not getting brand value, its showing me as: 'undefined'
Any Idea?
<select id="brand" onchange="gotoPage()">
<?php
$brands = dfr_get_brands_list($category);
foreach ($brands as $brand) : ?>
<option><?php echo $brand; ?></option>
<?php endforeach; ?>
</select>
<?php if (#$_GET['brand']) { ?>
<FONT COLOR="red"><?php echo"[[X] Remove Brand "; ?><?php echo #$_GET['brand']; ?></font>
<?php } ?>
<script>
function gotoPage(){
var url = "http://laptopsisland.com/shop/c/laptops/";
var sel = document.getElementById("brand");
var brand = sel.options[sel.selectedIndex].text;
alert(brand);
window.location.href = url + "&brand=" + brand;
}
</script>

I would chance your options to show something like this
<option value="<?php echo $brand; ?>"><?php echo $brand; ?></option>
and then get the selected value as Bokonic mentioned
sel.options[sel.selectedIndex].value
Let me know how that works.

You don't need to change the generation code.
You also don't need to use getElementById.
<script>
function gotoPage(e) {
var brand = e.options[e.selectedIndex].text;
alert(brand);
}
</script>
<select id="brand" onchange="gotoPage(this)">
<option>aaa</option>
<option>bbb</option>
</select>
Working solution:
http://jsfiddle.net/2YzAV/2/
Version with values:
http://jsfiddle.net/2YzAV/3/

Related

How to give id to auto generated element automatically

I want to make a dropdownlist that contains something from my database, all going well until I need to give each of the option unique id
<div class="div3" >
<select id="input2" class="drop" name="a" required>
<option value="" selected disabled>a</option>
<?php while ($row1 = mysqli_fetch_array($result)) :; ?>
<option class="option"><?php echo $row1[0]; ?></option>
<?php endwhile; ?>
</select>
</div>
Put an id unique value in option tag, and order you code for make an array with html tag, for example if $row1[0] = uniqueid and $row1[1] = name
<?php while ($row1 = mysqli_fetch_array($result)){?>
<option id="<?php echo $row1[0]; ?>" class="option"><?php echo $row1[1]; ?></option>
<?php }?>
Best Regards

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 remove an empty string from an array. I am not sure weather it is from PHP or Ajax

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.

How to assign value returned by a function into a variable?

I need to determine the sceen width using media query then properly display the results retreived from database. For now results are shown using a function this way. This function actually to display dropdown list for a particular menu.
<?php Core::getHook('block-branches'); ?>
So tried something as below to display content according to screen width:
<?php
if (isset($_GET['width'])) {
$width = $_GET['width'];
if ($width <= 480) { //mobile devices
$list = Core::getHook('home-menu-mobile'); **//assigning function value into a variable**
} elseif ($width <= 720){ //tablets
$list = Core::getHook('home-menu-mobile'); **//assigning function value into a variable**
} else { //desktops
$list = Core::getHook('block-branches'); **//assigning function value into a variable**
}
}
?>
HTML
<select id="myselect">
<option>Go To ...</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/">Home</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/about-us">About Us ▾</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/the-centre-point-of-any-web-projects">Centre-Point of Web Projects</option>
<option>Branches ▾
<?php echo $list;?>**(display according to screen width)**
</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/news">News</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/event">Events</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/contact">Contact Us</option>
</select>
<script>
//$('#myselect').on('change', function() {
//location.href=$(this).data('url');
//});
document.getElementById("myselect").onchange = function(d){
window.location = this.value;
};
</script>
I think the function getHook('block-branches') is returning an array not a value so you must loop the $list and display the value like this
<option>Branches ▾
<?php foreach($list as $value){
echo $value;
}?>**(display according to screen width)**
</option>

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

Categories