Cant get the correct value from select [duplicate] - javascript

I have been trying to select the table number according to its location. My form is working and the record is added to the database however at the number section, the number that is inserting is "32" no matter what I choose, Even if I choose in the select "tnum3" a different number. I don't know what has happened.
The form
<label for="tnum">table number
<select type="number" id="tnum1" name="num">
<?php for ($i = 2; $i <= 9; $i++) : ?>
<option id="in" value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endfor; ?></select>
<select type="number" id="tnum2" name="num" style="display: none;">
<?php for ($i = 12; $i <= 23; $i++) : ?>
<option id="out" value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endfor; ?></select>
<select type="number" id="tnum3" name="num" style="display: none;">
<?php for ($i = 32; $i <= 35; $i++) : ?>
<option id="tr" value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endfor; ?>
</select></label><br>
<label for="loc">location
<select id="loc" name="location" style="width:100%;" onchange="change_tnum(this.value)" required>
<option value="inside" >inside</option>
<option value="outside" >outside</option>
<option value="Porch" >Porch</option>
</select></label><br>
This is the JS function that just toggles the select tags according to the location I choose:
function change_tnum(x){
$('#tnum1').hide();
$('#tnum2').hide();
$('#tnum3').hide();// hide any options already shown
switch (x) { // show whichever option is appropriate
case 'inside':
$('#tnum1').show();
inside();
break;
case 'outside':
$('#tnum2').show();
outside();
break;
case 'porch':
$('#tnum3').show();
terrace();
break;
default:
break;
}
}

I don't see any issue with your select, however even if you set the element to display: none, it's value will still be submitted. Since there are multiple elements of the same name the last value overwrites the previous values.
If you want only one element value then you should add disabled attribute to it. The elements marked disabled are not sent to the server. Reference
So, your code changes to -
function change_tnum(x){
$('#tnum1').hide();
$('#tnum1').attr('disabled', true);
$('#tnum2').hide();
$('#tnum2').attr('disabled', true);
$('#tnum3').hide();// hide any options already shown
$('#tnum3').attr('disabled', true);
switch (x) { // show whichever option is appropriate
case 'inside':
$('#tnum1').show();
$('#tnum1').attr('disabled', false); // or simply remove disabled attribute
inside();
break;
case 'outside':
$('#tnum2').show();
$('#tnum2').attr('disabled', false);
outside();
break;
case 'porch':
$('#tnum3').show();
$('#tnum3').attr('disabled', false);
terrace();
break;
default:
// do something
}
}
Hope it helps you.

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

Pass "selected" <option> as page loads

I've got a problem. I'm trying to show restaurant's revenue graph of selected year and as a default. I want it to be showing this year's graph, in this case 2020. I used selected on this year's date, but the problem is that I have onchange. It only shows graph if I change something, reselect. Is there a good way to use first option as default?
<select id="yearPick" name="yearPick" onchange="load_new_content()">
<option value="year" disabled>year</option>
<option value="<?php echo date("Y"); ?>" selected><?php echo date("Y"); ?></option>
<?php for ($i = date("Y") - 1; $i >= 1980; $i--) { ?>
<option value="<?php echo $i ?>"><?php echo $i ?></option>
<?php } ?>
</select>

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>

Categories