This question already has answers here:
dynamically show and hide fields based on select box selection for loop
(4 answers)
Closed 12 months ago.
I would like to hide input field based on dropdown value. So two values are auto populated from database stone1 and stone 2
so if stone1 is pupated I want karat to be hidden and if stone 2 then carat and if any more values
populated both should be hidden
<label for="form" class="control-label">=Service</label>
<select id="form1" class="custom-select custom-select-sm select2" >
<option selected="" disabled>Select services First</option>
<?php
?>
<!-- <option value="<?php echo $row['id'] ?>" ><?php echo $name ?></option> -->
<?php endwhile; ?>
<div class="col-md-2">
<div class="form-group ctd" data-cid="ctd">
<label for="ctd">stone1</label>
<select class="form-control" id="ctd" name="ctd">
<option>24</option>
<option>22</option>
<option>20</option>
<option>18</option>
<option>16</option>
<option>14</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group ctg" data-cid="ctg">
<label for="ctg">stone2</label>
<select class="form-control" id="ctg" name="ctg">
<option>24</option>
<option>22</option>
<option>20</option>
<option>18</option>
<option>16</option>
<option>14</option>
</select>
</div>
</div>
So two values are auto-populated from database stone1 and stone 2 so if stone1 is populated I want karat to be hidden and if stone 2 then carat and if any more values populated both should be hidden
I tried this code but it hides only one and does not work at all
<script>
var form1 = jQuery('#form1');
var select = this.value;
form_id.change(function () {
if ($(this).val() == 'stone1') {
$('.ctd').show();
} else {
$('.ctg').hide();
}
});
</script>
(function ($) {
$(function () {
var form1 = jQuery('#form1');
var select = this.value;
$('#form1').change(function(){
if( $(this).val()==="1" ){
$("#ctd").show()
$("#ctg").hide()
$('label[for="ctg"]').hide();
$('label[for="ctd"]').show();
} else {
$("#ctg").show()
$("#ctd").hide()
$('label[for="ctd"]').hide();
$('label[for="ctg"]').show();
}
});
$('#form1').trigger("change");
});
}(jQuery));
Related
I'm getting a set of user roles from the database using PHP and they are put in a <select> tag's <option>s as follows:
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onkeyup="clearMsg('roleerr')" onchange="getRole()"/>
<option value="">Select a Role</option>
<?php while($rowrole = $resultrole->fetch(PDO::FETCH_BOTH)) { ?>
<option value="<?php echo $rowrole ['role_id']; ?>">
<?php echo $rowrole ['role_name']; ?>
</option>
<?php } ?>
</select>
<span id="roleerr" class="error">*</span>
</div>
And I want to get the selected value of the dropdown 'onchange' and for that getRole() javascript function is written. How to get this done?
When the element changes, the value of the dropdown will be set to the value attributed to the selected option. So you would just define your javascript function and have it fetch the value of the dropdown:
function getRole(){
var finalVal = document.getElementById("user_role").value;
// And then here you can do whatever you want with the information
}
You can assign value in paramater in onchange()
this should work below
function getRole(value) {
if(value != "")
alert(value)
}
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onchange="getRole(this.value)"/>
<option value="">Select a Role</option>
<option value="23">select 23</option>
<option value="24">select 24</option>
<option value="25">select 25</option>
</select>
<span id="roleerr" class="error">*</span>
</div>
You could try event of onchange.
onchange="getRole(event)"
Javascript.
function getRole(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
I tested it with hard data.
function getRole(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onchange="getRole(event)"/>
<option value="">Select a Role</option>
<option value="1">admin</option>
<option value="2">user</option>
<option value="3">support</option>
</select>
<span id="roleerr" class="error">*</span>
</div>
This question already has answers here:
Get selected text from a drop-down list (select box) using jQuery
(35 answers)
Closed 3 years ago.
I want to move the name attribute, to be a hidden value (not id), but ... stored in the database that is still id
<div class="form-group col-md-4">
<select name="id_cs" id="pakyu" class="form-control select2" style="width: 100%;" onchange="ganti();">
<option value="0">-PILIH-</option>
<?php foreach($datacs->result() as $row):?>
<option value="<?php echo $row->id_cs;?>"><?php echo $row->nama_cs;?></option>
<?php endforeach;?>
<input type="hidden" id="csnya" name="nama_cs">
</select>
</div>
jquery
function ganti() {
var reg = $('#pakyu option:selected').val();
$('#csnya').val(reg);
}
Do some changes like this:
<div class="form-group col-md-4">
<select name="id_cs" id="pakyu" class="form-control select2" style="width: 100%;" onchange="ganti();">
<option value="0">-PILIH-</option>
<?php foreach($datacs->result() as $row):?>
<option value="<?php echo $row->id_cs;?>"><?php echo $row->nama_cs;?></option>
<?php endforeach;?>
</select>
<input type="hidden" id="csnya" name="nama_cs" value=""> <!--moved this out from select tag -->
</div>
jQuery:
function ganti() {
var reg = $('#pakyu option:selected').text(); // Use text function
$('#csnya').val(reg);
}
I have a multi-select dropdown and external div that post the number of selections. When I save the document as XML a window opens with an option to go back (I am using onclick="history.go(-1);").
Everything works except that the number of selection is = 0 even if the input has some elements selected.
Thanks.
java script code
$("#airlaine").change(function () {
var count = $(".k-multiselect-wrap li").length;
//console.log(count);
$('#displaycount').text(count);
});
html code
<div class="col-md-4 block">
<div class="iconqsai navy">
<p class="icontitle">QSAI</p>
<h4 id="displaycount" class="displaycount" name="aircount" value=""><?php if ($airlainecount != ""){echo $airlainecount;} else {echo "0";} ?></h4>
</div>
<div class="grayArea airline">
<div class="PanelMultiSelect"></div>
<select id="airlaine" name="airlines[]" multiple="multiple" class="numairline">
<option value="AA" <?php if (in_array("AA", $airline)) {echo "selected";}?> >AC</option>
<option value="AB" <?php if (in_array("AB", $airline)) {echo "selected";}?> >AF</option>
<option value="AC" <?php if (in_array("AC", $airline)) {echo "selected";}?> >ANA</option>
<option value="AD" <?php if (in_array("AD", $airline)) {echo "selected";}?> >EIL</option>
</select>
</div>
</div>
do you want to count list of .k-multiselect-wrap li or #airlaine selection?
for #airlaine selection:
$("#airlaine").change(function () {
var count = $("#airlaine option:selected").length;
$('#displaycount').text(count);
});
select dropdown with diffrent output dropdown value
-- select an option --
Unifi
Streamyx
when select unifi it will show another dropdown for unifi package only
when select streamyx it will show another dropdown for streamyx package only
<div class="form-group" id="beb">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from unifi ORDER BY PACKAGE_NAME ASC");
while ($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group" id="bob">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_ID_STREAMYX" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from streamyx ORDER BY PACKAGE_NAME ASC");
while($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
this is the javascript to hide the dropdown based on what selected
<script> var a = document.getElementById('beb');
if ((value) == 'UNIFI')
{
a.style.display = '';
}
else if((value) == 'STREAMYX')
{
a.style.display = 'none';
}
var a = document.getElementById('bob');
if ((value) == 'UNIFI')
{
a.style.display = 'none';
}
else if((value) == 'STREAMYX')
{
a.style.display = '';
}
</script>
You can use jquery to select the first item (-- select an option --) in the selectbox.
You could do this with:
$('select[name="PACKAGE_ID_UNIFI"]').prop('selectedIndex',0);
and
$('select[name="PACKAGE_ID_STREAMYX"]').prop('selectedIndex',0);
I've added ID's to the select boxes so they are easyer to target in jquery:
$(function(){
$('#streamSelect').change(function(){
if( this.value === 'unifi'){
$('#unifi-contaioner').removeClass('hidden'); // show the unifi selectbox
$('#streamyx-contaioner').addClass('hidden'); // hide the streamyx selectbox
$('#streamyx').prop('selectedIndex',0); // reset the streamyx selectbox
}else{
$('#streamyx-contaioner').removeClass('hidden'); // show the streamyx selectbox
$('#unifi-contaioner').addClass('hidden'); // hide the unifi selectbox
$('#unifi').prop('selectedIndex',0); // reset the unifi selectbox
}
});
})
.hidden{
opacity: 0.2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="streamSelect">
<option value="unifi">unifi</option>
<option value="streamyx">streamyx</option>
</select>
</div>
<div id="unifi-contaioner">
<label for="unifi">Package List unifi:</label>
<select id="unifi" name="PACKAGE_ID_UNIFI">
<option disabled selected value> -- select an option -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div id="streamyx-contaioner" class="hidden">
<label for="streamyx">Package List streamyx:</label>
<select id="streamyx" name="PACKAGE_ID_STREAMYX" >
<option disabled selected value> -- select an option -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
You can detect user selection using the change event. You are using pure hs but also tagged jQuery. I will give the example in jQuery as that's what you should be using if you already have both on the page.
Your example also has several issues. Use seperate variables for different elements. The hiding doesn't make sense to me. I will do the example for beb anyway but I think you should rereview your question.
Instead of changing the css it would be cleaner to have a selected class in css.
var $beb = $('#beb');
var $bob = $('#bob');
$beb.on('change', function (e) {
$beb.toggleClass('selected');
});
function
I have added a leaderboard feature to my website, but unfortunately the minimum score functionality for the leaderboard is not fully working.
So I have created a select element that triggers the setMinScore function which looks through each list element and hides it if its input.dial-list contains a value that is less than the minimum score - basically I want to show only list items that have scores greater than the minimum score.
However, two of my list items that have scores of "8" are still shown in the list when I select any minimum score apart from 80 and 90 (e.g. if I select 70 the list items are shown though they have inputs with values less than 70; but if I select 80 or 90, the items are not shown anymore so the functionality is working only for 80 and 90).
<select name="candList<?php echo $job['jobId']; ?>" onchange="setMinScore(this)">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50" selected>50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
</select>
<li>
<span class="list-content">
<div class="dial-list-holder">
<input type="text" value="<?php echo $row['score']; ?>" class="dial-list">
</div>
<div class="dial-list-holder">
<input type="text" value="<?php echo $row['matchScore']; ?>" class="dial-list-match">
</div>
<div class="name">
<h5><?php echo $row['name']; ?></h5>
</div>
</span>
</li>
And this is the javascript function:
function setMinScore(selectEl)
{
var minScore = $(selectEl).val();
var candList = "."+$(selectEl).attr('name');
$(candList).find('li').each(function() {
if($(this).find('input.dial-list').val() < minScore) {
$(this).hide();
}
else {
$(this).show();
}
});
}
Thanks guys, your help is highly appreciated!
I would add an id to select element and get the selected value in this was:
var minScore = $("#id option:selected").val();
instead of yours:
var minScore = $(selectEl).val();