How to select a selectbox an option value with JS? - javascript

This may sound easy but I'm been having a heck of a time to get this to work. Somebody please help. My select box is like below. How do i select the value 3 from the list?
if(!empty($listeDoc))
{
$iGroups = 0;
while($iGroups < count($listeDoc))
{
?>
<tr>
<td>
<input type="checkbox" name="productSelect[<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>]['product_id']" id="productSelectCreation_<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>" onchange="setValueToOne(this)" ><?php echo $listeDoc[$iGroups]->DOC_CLIENT_NOM; ?>
</td>
<td>
<select name="productSelect[<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>]['quantity']" id="productQty_<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>" class="form-control1" value="<?php echo $qty; ?>" style="width:100%; height:25px; border : #62270c solid 1px;" tabindex="1">
<option value=""/></option>
<option value="1"<?php if ($qty == 1) echo 'selected="selected"'; ?>>1</option>
<option value="2"<?php if ($qty == 2) echo 'selected="selected"'; ?>>2</option>
<option value="3"<?php if ($qty == 3) echo 'selected="selected"'; ?>>3</option>
<option value="4"<?php if ($qty == 4) echo 'selected="selected"'; ?>>4</option>
<option value="5"<?php if ($qty == 5) echo 'selected="selected"'; ?>>5</option>
</select>
<td>
</tr>
<?php
$iGroups++;
}
}
here's is what i tried:
function setValueToOne(value)
{
checkbox = document.getElementById('productSelectCreation');
if (checkbox.checked == true)
{
document.getElementById("productQtyCreation").value = 1;
}
else
document.getElementById("productQtyCreation").value = '0';
}

If I understand correctly you want to change the select box selected option using vanilla javascript. You will need to loop the selectbox and compare values.
document.getElementById('productSelectCreation').onclick = function() {
var val;
var checkbox = document.getElementById('productSelectCreation');
var sel = document.getElementById('productQtyCreation');
if (checkbox.checked)
{
val = "3";
}
else
val = "0";
}
var opts = sel.options;
for (var opt, j = 0; opt = opts[j]; j++) {
if (opt.value == val) {
sel.selectedIndex = j;
break;
}
}
}

It seems you are looking something like this.
function setValueToOne(chkbox)
{
if (chkbox.checked) {
alert("checked");
alert(chkbox.value);
document.getElementById("productQtyCreation").value = chkbox.value;
} else {
alert("Unchecked");
document.getElementById("productQtyCreation").value = 0
}
}
<select name="productSelect" id="productQtyCreation" class="form-control1">
<option value=""/></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="checkbox" name="productSelect" id="productSelectCreation" onClick="setValueToOne(this)" value="3" />Test

function setValueToOne(checkbox) {
if(checkbox.checked) {
document.getElementById('productQtyCreation').value = 3
}else{
document.getElementById('productQtyCreation').value = 0
}
}
<select id="productQtyCreation">
<option disabled selected value=""></option>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="checkbox" name="productSelect" id="productSelectCreation" onClick="setValueToOne(this)" value="3" />

Related

Multiple Select Unselect And Disabled

I Have 2 Multiple Select Field On My Code
I Want Make If All Selected Then Other Option Will Be Unselect And Disabled And Similarly If Other Any Field Selected Then All Option Will Unselect And Disabled
My Code Is
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
And
<select multiple name="country[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>
By disabling an element you say i'll not use this element, I refuse to use this elemen, so disabled elements can not get Mouse Events, so disabling is wrong way.
Instead make it visually disabled.
Here is pure JS code, because i am not like jquery ;)
<style>
select {
height:300px;
width:150px;
}
</style>
<body>
<select multiple name="device[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
<select multiple name="country[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>
<script>
function Go(){
parentElements = document.getElementsByTagName("select");
for(var i = 0; i < parentElements.length; i++){
parentElement = parentElements[i]
children = parentElement.childNodes;
for(var j = 0; j < children.length; j++){
childNode = children[j];
if(childNode.nodeName == "OPTION" || childNode.nodeName == "option"){
if(childNode.value == "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && k != j){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && k == j){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
if(childNode.value != "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && children[k].value == "\\'ALL\\'"){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && children[k].value != "\\'ALL\\'"){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
}
}
}
}
</script>
</body>
EDIT:
How about adding an extra button to reset the menus ?
Please check this fiddle
OLD:
If you are not holding ctrl key then other options will be deselected automatically
$(document).ready(function() {
$('#device, #country').on('change', function() {
var selectedVal = $(this).val();
for (var i = 0; i < selectedVal.length; i++) {
if (selectedVal[i] === 'ALL') {
// $("#device > option").attr('disabled','disabled');
$(this).find('option').attr('disabled', 'disabled');
$(this).find('option[value=ALL]').removeAttr('disabled');
} else {
$(this).find('option[value=ALL]').attr('disabled', 'disabled');
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control">
<option value='ALL'>ALL</option>
<option value='Android'>Android</option>
<option value='iPod'>iPod</option>
<option value='iPad'>iPad</option>
<option value='Java'>Java</option>
<option value='Windows'>Windows</option>
<option value='Linux'>Linux</option>
<option value='Mac'>Mac</option>
</select>
<select multiple name="country[]" id="country" class="form-control">
<option value='ALL'>ALL</option>
<option value='BD'>Bangladesh</option>
<option value='IN'>India</option>
<option value='ID'>Indonesia</option>
<option value='NG'>Naigeria</option>
<option value='PK'>Pakistan</option>
</select>
$('#device option').click(function(){
var Allselected = $('#device :selected').text();
var AllselectedCountry = $('#country :selected').text();
if(Allselected =="ALL"){
$('#device option:not(:selected)').addClass('ashClass');
}
else if (Allselected !="ALL"){
$('#device option:first-child').css('color', '#ccc');
$('#device option:not(:selected)').removeClass('ashClass');
}
});
$('#country option').click(function(){
var AllselectedCountry = $('#country :selected').text();
if(AllselectedCountry =="ALL"){
$('#country option:not(:selected)').addClass('ashClass');
}
else if (AllselectedCountry !="ALL"){
$('#country option:first-child').css('color', '#ccc');
$('#country option:not(:selected)').removeClass('ashClass');
}
});
.ashClass {
color: #ccc;
}
.blackClass {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'Android\'>Android</option><option value=\'iPod\'>iPod</option><option value=\'iPad\'>iPad</option><option value=\'Java\'>Java</option><option value=\'Windows\'>Windows</option><option value=\'Linux\'>Linux</option><option value=\'Mac\'>Mac</option> </select>
<select multiple name="country[]" id="country" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'BD\'>Bangladesh</option><option value=\'IN\'>India</option><option value=\'ID\'>Indonesia</option><option value=\'NG\'>Naigeria</option><option
value=\'PK\'>Pakistan</option></select>
Updated the codes,Hope this one resolves your problem.
Is this what you are asking?

Display None on Select Option based on the data

I actually have a multiple dropdown. what I want is, if I select the first dropdown and I have the data-ts which is 1. I want that all of my dropdown option that has a data-ts 1 to have a style attribute display none except for the one that I selected.
here's what I have done so far:
HTML
<select class="selection" name="first">
<option value="1" data-ts="1">1</option>
<option value="2" data-ts="2">2</option>
</select>
<select class="selection" name="second">
<option value="3" data-ts="1">1</option>
<option value="4" data-ts="2">2</option>
</select>
<select class="selection" name="third">
<option value="5" data-ts="1">1</option>
<option value="6" data-ts="2">2</option>
</select>
JQUERY
$(".selection").on('change', function(){
var $this = $(this);
var $selected = $this.find(":selected").data('ts');
$(".selected").each(function(){
alert($(this).val());
});
});
thanks in advance.
try this
$(".selection").on('change', function() {
var $this = $(this);
var $selected = $this.find(":selected").data('ts');
console.log($selected);
var i = 0;
var array = [];
$(".selection").each(function() {
if($this.attr('name')!= $(this).attr('name'))
{
if($(this).find("option:selected").attr('data-ts') == $selected)
{
$(this).val('');
}
}
if($(this).find("option:selected").data('ts') != 'undifined' )
{
array[i] = $(this).find("option:selected").data('ts');
i = i+1;
}
});
$(".selection").each(function() {
if($(this).val()=='')
{
$(this).find("option").show();
for(j=0;j<array.length;j++)
{
$(this).find("option[data-ts='" + array[j] + "']").hide();
}
}
});
});
JSFiddle link for same
https://jsfiddle.net/0y8L4y1e/5/
Try something like this. You have to check if data-ts is equal to the selected data-ts and that the option you want to hide IS NOT the option you just selected.
$(".selection").on('change', function () {
var $this = $(this);
var $selected = $this.find(":selected");
var selectedTsData = $selected.data('ts');
$(".selection option").each(function () {
$(this).show();
if ($(this).data('ts') === selectedTsData && $(this) !== $selected) {
$(this).hide();
}
});
});
You can do something like this:
$(".selection").on('change', function() {
$(".selection").each(function() {
$(this).find("option").show();
});
var $this = $(this);
var $selected = $this.find(":selected").data('ts');
console.log($selected)
$(".selection").each(function() {
$(this).find("option[data-ts='" + $selected + "']").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selection" name="first">
<option value="">Select</option>
<option value="1" data-ts="1">1</option>
<option value="2" data-ts="2">2</option>
</select>
<select class="selection" name="second">
<option value="">Select</option>
<option value="3" data-ts="1">1</option>
<option value="4" data-ts="2">2</option>
</select>
<select class="selection" name="third">
<option value="">Select</option>
<option value="5" data-ts="1">1</option>
<option value="6" data-ts="2">2</option>
</select>

PHP - Fetch value based on what is selected from option

<select class="selectpicker" name="mscr_type" id="mscr_type">
<?php $fpp_type = '';
foreach ($getmilestone_cr as $mscr_list) {
$description = $mscr_list['FIX_PRJ_DESC'];//fetch description
if ($fpp_type != $mscr_list['FIX_PRJ_TYPE']) {
if ($fpp_type != '') {
echo '</optgroup>';
}
if($mscr_list['FIX_PRJ_TYPE'] == 'MS'):
echo $fpp_label = "Milestone";
elseif($mscr_list['FIX_PRJ_TYPE'] == 'CR'):
echo $fpp_label = "Change Request(CR)";
endif;
echo '<optgroup label="'.$fpp_label.'">';
}
echo '<option value="'.$mscr_list['FIX_PRJ_TYPE'].'">'.htmlspecialchars($mscr_list['FIX_PRJ_NAME']).'</option>';
$fpp_type = $mscr_list['FIX_PRJ_TYPE'];
}
if ($fpp_type != '') {
echo '</optgroup>';
}
?>
</select>
The above code outputs:
<select class="selectpicker">
<optgroup label="Picnic">
<option value ="1">Mustard</option>
<option value ="2">Ketchup</option>
<option value ="3">Relish</option>
</optgroup>
<optgroup label="Camping">
<option value ="4">Tent</option>
<option value ="5">Flashlight</option>
<option value ="6">Toilet Paper</option>
</optgroup>
</select>
How could I fetch description based on what is selected from selected option. For example if Mustard is selected, then input value should be filled
with value 'Mustard is yellow in color'.
Tried using <select class="selectpicker" name="mscr_type" id="mscr_type" onchange="document.getElementById('mscr_description').value=this.options[this.selectedIndex].text"> but it fetches the name and not description.
<label for="name" class="label">Description</label>
<input type="text" disabled="" id="selectpicker_description" name="selectpicker_description" class="span3">
Add the description to the HTML using a data-XXX attribute:
echo '<option value="'.$mscr_list['FIX_PRJ_TYPE'].'" data-description="'.htmlspecialchars($description).'">'.htmlspecialchars($mscr_list['FIX_PRJ_NAME']).'</option>';
Then you can use
onchange="updateDescription(this)"
with the Javascript function:
function updateDescription(sel) {
var output = document.getElementById('mscr_description');
var desc = sel.options[sel.selectedIndex].getAttribute('data-description');
output.value = desc;
}

JavaScript: Updating <select> list of days given month input

My raw HTML has three <select> inputs side-by-side like so:
<select id="smonth" name="smonth" onchange="updateSDaysInput()">
<option value="Month">Month</option>
<option value="1" <?php if ($smonth == '1') { echo 'selected'; } ?>>January</option>
<option value="2" <?php if ($smonth == '2') { echo 'selected'; } ?>>February</option>
<option value="3" <?php if ($smonth == '3') { echo 'selected'; } ?>>March</option>
<option value="4" <?php if ($smonth == '4') { echo 'selected'; } ?>>April</option>
<option value="5" <?php if ($smonth == '5') { echo 'selected'; } ?>>May</option>
<option value="6" <?php if ($smonth == '6') { echo 'selected'; } ?>>June</option>
<option value="7" <?php if ($smonth == '7') { echo 'selected'; } ?>>July</option>
<option value="8" <?php if ($smonth == '8') { echo 'selected'; } ?>>August</option>
<option value="9" <?php if ($smonth == '9') { echo 'selected'; } ?>>September</option>
<option value="10" <?php if ($smonth == '10') { echo 'selected'; } ?>>October</option>
<option value="11" <?php if ($smonth == '11') { echo 'selected'; } ?>>November</option>
<option value="12" <?php if ($smonth == '12') { echo 'selected'; } ?>>December</option>
</select>
<select id="sday" name="sday">
<option value="Day">Day</option>
</select>
<select id="syear" name="syear" onchange="updateSDaysInput()">
<option value="Year">Year</option>
<option value="1998" <?php if ($syear == '1998') { echo 'selected'; } ?>>1998</option>
<option value="1999" <?php if ($syear == '1999') { echo 'selected'; } ?>>1999</option>
<option value="2000" <?php if ($syear == '2000') { echo 'selected'; } ?>>2000</option>
<option value="2001" <?php if ($syear == '2001') { echo 'selected'; } ?>>2001</option>
<option value="2002" <?php if ($syear == '2002') { echo 'selected'; } ?>>2002</option>
<option value="2003" <?php if ($syear == '2003') { echo 'selected'; } ?>>2003</option>
<option value="2004" <?php if ($syear == '2004') { echo 'selected'; } ?>>2004</option>
<option value="2005" <?php if ($syear == '2005') { echo 'selected'; } ?>>2005</option>
<option value="2006" <?php if ($syear == '2006') { echo 'selected'; } ?>>2006</option>
<option value="2007" <?php if ($syear == '2007') { echo 'selected'; } ?>>2007</option>
<option value="2008" <?php if ($syear == '2008') { echo 'selected'; } ?>>2008</option>
<option value="2009" <?php if ($syear == '2009') { echo 'selected'; } ?>>2009</option>
<option value="2010" <?php if ($syear == '2010') { echo 'selected'; } ?>>2010</option>
<option value="2011" <?php if ($syear == '2011') { echo 'selected'; } ?>>2011</option>
<option value="2012" <?php if ($syear == '2012') { echo 'selected'; } ?>>2012</option>
<option value="2013" <?php if ($syear == '2013') { echo 'selected'; } ?>>2013</option>
<option value="2014" <?php if ($syear == '2014') { echo 'selected'; } ?>>2014</option>
<option value="2015" <?php if ($syear == '2015') { echo 'selected'; } ?>>2015</option>
</select>
This is the relevant JavaScript code:
syear = document.getElementById("syear");
smonth = document.getElementById("smonth");
sday = document.getElementById("sday");
function updateSDaysInput() {
"use strict";
var monthDays = findSMonthDays(smonth.value), newOption = document.createElement("option"), curLength = sday.length;
if (curLength > monthDays) {
for (i = curLength; i > monthDays; i = i - 1) {
sday.remove(i);
}
}
if (curLength < monthDays) {
for (i = curLength; i < monthDays; i = i + 1) {
newOption.text = i;
newOption.value = i.toString();
sday.add(newOption);
}
}
}
The code is supposed to add or remove options to sday as appropriate given the value of smonth. But instead it simply adds a single option to the bottom of sday. Does anyone know what might be the issue?
Move the newOption = document.createElement("option") inside for loop to create new element for every loop iterations like below
if (curLength < monthDays) {
for (i = curLength; i < monthDays; i = i + 1) {
newOption = document.createElement("option");
newOption.text = i;
newOption.value = i.toString();
sday.add(newOption);
}
}
Hope it helps.

How to set javascript on a dynamic array?

I am working on a dynamic array inside a table which means the table appears based on user input. Users need to fill this table and then click submit. I need to place javascript here to check if the user didn't select anything or didn't write in any column. If so, the user should not be able to proceed.
<form action="klr.php" method="post" name="myform" >
<?php
for ($i = 1; $i <= $de; $i++) {
?>
<tr>
<td>Tube</td>
<td>
<select id="in4-<?php echo $i; ?>" name="t1[<?php echo $i; ?>]" onclick="getText3(<?php echo $i; ?>)" onchange="getText39(<?php echo $i; ?>)" onmouseout="getText89(<?php echo $i; ?>)">
<option value="0">0</option>
<option value="12">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="75">75</option>
</select>
</td>
<td>
<input type="text" name="t2[<?php echo $i; ?>]" id="in1-<?php echo $i; ?>" onblur="getText3(<?php echo $i; ?>)" onchange="getText39(<?php echo $i; ?>)" onmouseout="getText89(<?php echo $i; ?>)"/>
</td>
<td>
<select name="a1[<?php echo $i; ?>]" id="in2-<?php echo $i; ?>" onclick="getText3(<?php echo $i; ?>)"onchange="getText39(<?php echo $i; ?>)" onmouseout="getText89(<?php echo $i; ?>)" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
</table>
I only provided the code of the first row of the table in which the user selects values. In the second column users can enter some values and in the third column users can select a value again. I need to place javascript in three of these columns
It sounds like you just wanted to verify if everything inside the form element was validated. Here are two fiddles I worked up to get you started:
1) Regular Javascript
function formCheck() {
var form = document.getElementById('mainForm'),
inputs = form.getElementsByTagName('INPUT'),
selects = form.getElementsByTagName('SELECT'),
i,
errors = [];
for (i = 0; i < inputs.length; i++) {
if (inputs[i].value.match(/^\s*$/)) {
errors.push(inputs[i].title + ' was not set');
}
}
for (i = 0; i < selects.length; i++) {
if (selects[i].selectedIndex === 0) {
errors.push(selects[i].title + ' was not set');
}
}
if (errors.length > 0 ) {
alert(errors.join('\n'));
return false;
}
alert('success!');
return true;
}
http://jsfiddle.net/fstreamz/3Decx/4/
2) With JQuery
function formCheck() {
var formElements = $('#mainForm').find('input, select'),
errors = [];
$.each(formElements, function(i, el) {
if ($(el).val().match(/^\s*$/)) {
errors.push($(el).prop('title') + ' is blank!');
}
});
if (errors.length > 0 ) {
alert(errors.join('\n'));
return false;
}
alert('success');
return true;
}
http://jsfiddle.net/fstreamz/w5KG3/4/
A few notes: 1) It checks every input or select element inside a form element with id="mainForm" so you'd have to add that to your form (next to name="myForm"). 2) I added a title attribute to the input/select elements so I could show that in the error message as a reference. 3) It checks for whitespace in input boxes and consider that invalid. 4) in the jsFiddle, it returns false even in success so the form doesn't submit for demonstration purposes. That should be changed to true if you use it.

Categories

Resources