I have this list
<select name="method" required class="form-control">
<option value="1">Cash</option>
<option value="2">Credit</option>
</select>
<select name="method2" class="form-control">
<?php
while (...) {
echo '<option value="id">Title</option>';
}
?>
</select>
If the user chooses the Cash option from the first "select method",
the second "select method2" must be disabled,
and if he chooses Credit, it must be activated
How do I do that?
Thanks in advance
In it's simplest form, you can add an event listener to your first select box that listens for a change event:
let selectOne = document.querySelector("#select-1"), selectTwo = document.querySelector("#select-2");
selectOne.addEventListener("change", () => {
if (selectOne.value == 1) {
selectTwo.disabled = true;
} else {
selectTwo.disabled = false;
}
})
<select name="method" required class="form-control" id="select-1">
<option value="-">-</option>
<option value="1">Cash</option>
<option value="2">Credit</option>
</select>
<select name="method2" class="form-control" id="select-2">
<option value="-">-</option>
<option value="1">Just For Demo Purposes</option>
</select>
First you can listen for any changes in the select using change event
The select element in HTML has a disabled property, which is set to false by default unless its explicitly disabled, you can set this property to True or False to enable or disable the select respectively
const sel = document.getElementById('selectm');
const sel2 = document.getElementById('selectm2');
handler = () => {
console.log(sel.value)
if (sel.value == 1) sel2.disabled = true
else sel2.disabled = false;
}
sel.addEventListener('change', handler)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="method" required class="form-control" id="selectm">
<option value="0">Default</option>
<option value="1">Cash</option>
<option value="2">Credit</option>
</select>
<select name="method2" class="form-control" id="selectm2">
<option value="1">test</option>
<option value="2">test-1</option>
</select>
</body>
</html>
Related
We have used bootstrap-multiselect.js for multiselect dropdown in application. We have the code for multiselect as $(".select-drp").multiselect(). Now on a condition, we have to change this multiselect dropdown to single dropdown through jquery. Please suggest a way to achieve changing multiselect dropdown to single dropdown. Thanks in advance.
If you can remove multiple attribute from select element, It would resolve your problem
If you can't, try below code but it will change all multiple select to single select, Modify as per your need
$('.multiple-select.one').multipleSelect();
let tempMultipleSelect = $.fn.multipleSelect;
$.fn.multipleSelect = function () {
this.removeAttr('multiple'); //remove attribute as per your logic
return tempMultipleSelect.apply(this, arguments);
}
$('.multiple-select.two').multipleSelect();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/multiple-select#1.5.2/dist/multiple-select.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/multiple-select#1.5.2/dist/multiple-select.min.css">
<label>Multiple</label>
<select class="multiple-select one" data-placeholder="Select" multiple>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
<hr>
<label>Multiple Changed As Single</label>
<select class="multiple-select two" multiple>
<option selected disabled>Select</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
There's a way to make the checkboxes behave like a radio button group and also have the ability to have every checkbox unchecked as well, see this section for more details. In the example, there's a button that toggles the multi-select form/to 'multiple' to/from 'single' selection behavior.
Details are commented in example
// Initialize plugin
$('.select').multiselect();
// Bind <form> to reset event
$('#interface').on('reset', multiSingle);
// Define status flag
let mode = 'multiple';
// Pass event object by default
function multiSingle(e) {
/*
Toggle reset button class, deselect any <option>s, and destroy the plugin
*/
$('.toggle').toggleClass('multiple, single');
$('.select').multiselect('deselectAll');
$('.select').multiselect('destroy');
/*
If mode is 'multiple'...
...initialize plugin...
...change checkbox behavior to that of a radio button group, with the
added benefit of unchecking the currently checked checkbox...
...then set mode to 'single'
*/
if (mode === 'multiple') {
$('.select').multiselect({
onChange: function(option, checked) {
let values = [];
$('.select option').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('.select').multiselect('deselect', values);
}
});
mode = 'single';
/*
Otherwise initialize plugin as it was originally and set mode to
'multiple'
*/
} else {
$('.select').multiselect();
mode = 'multiple';
}
}
.multiple::before {
content: 'Single'
}
.single::before {
content: 'Multiple'
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-4.5.2.min.css" rel="stylesheet" />
<link href="//davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet" />
</head>
<body>
<form id='interface' class='container'>
<fieldset class='row' style='display:flex'>
<div class='btn-grp' style='margin:20px 0 0 0'>
<select class="select" multiple="multiple">
<option value="cheese"> Cheese </option>
<option value="tomatoes"> Tomatoes </option>
<option value="mozzarella"> Mozzarella </option>
<option value="mushrooms"> Mushrooms </option>
<option value="pepperoni"> Pepperoni </option>
<option value="onions"> Onions </option>
</select>
<button class='btn btn-primary toggle multiple' type='reset'></button>
</div>
</fieldset>
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
<script src="//davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<select id="choose-first-unit" class="span-four" onchange="setInterval(recountvol(this), 1000)">
<option value="m3">cubic meters</option>
<option value="cm3">cubic centimeters/milliliters</option>
<option value="dm3">cubic decimeters/litres</option>
<option value="hl">hectolitres</option>
<option value="cl">centilitres</option>
</select>
<select id="choose-second-unit" class="bum" onchange="setInterval(recountvol2(this), 1000)">
<option value="m3-2">cubic meters</option>
<option value="cm3-2">cubic centimeters/millilitres</option>
<option value="dm3-2">cubic decimeters/litres</option>
<option value="hl-2">hectolitres</option>
<option value="cl-2">centilitres</option>
</select>
I'm trying to create a volume converter with javascript and I would like to create a function, which would start converting without any "convert/equals" button. I have two select elements to choose the units and then onchange function which does what I want, but only "onchange". I tried infinite loop, but that was of course laggy, so I tried everything possible with setInterval() function, but I'm out of ideas, the function always executes only once, so I'm writing here.
important HTML:
<select id="choose-first-unit" class="span-four" onchange="setInterval(recountvol(this), 1000)">
<option value="m3">cubic meters</option>
<option value="cm3">cubic centimeters/milliliters</option>
<option value="dm3">cubic decimeters/litres</option>
<option value="hl">hectolitres</option>
<option value="cl">centilitres</option>
</select>
<select id="choose-second-unit" class="bum" onchange="setInterval(recountvol2(this), 1000)">
<option value="m3-2">cubic meters</option>
<option value="cm3-2">cubic centimeters/millilitres</option>
<option value="dm3-2">cubic decimeters/litres</option>
<option value="hl-2">hectolitres</option>
<option value="cl-2">centilitres</option>
</select>
I think that the JS is OK, because the function is executed, but only once, so I am asking: Where in the HTML or JS should I implement the setInterval(), what should I change inside it (the setInterval), or it's by wrong passed parameter (and if yes, can you correct them for me please)?
If that's a bad question for stackoverflow, I'm sorry, I'm new here.
Here's how I would do it without any JS framework.
const firstUnitOptions = document.querySelector("#choose-first-unit")
const secondUnitOptions = document.querySelector("#choose-second-unit")
const firstUnitInput = document.querySelector("#firstUnitInput")
const secondUnitInput = document.querySelector("#secondUnitInput")
setInterval(() => {
const firstOption = firstUnitOptions.value
const secondOption = secondUnitOptions.value
const firstUnit = firstUnitInput.value
const secondUnit = secondUnitInput.value
if(firstOption === "m3" && secondOption === "m3-2") {
secondUnitInput.value = firstUnitInput.value;
}
if(firstOption === "m3" && secondOption === "cm3-2") {
secondUnitInput.value = firstUnitInput.value * 1000
}
/// rest of logic
}, 500)
<select id="choose-first-unit" class="span-four">
<option value="m3">cubic meters</option>
<option value="cm3">cubic centimeters/milliliters</option>
<option value="dm3">cubic decimeters/litres</option>
<option value="hl">hectolitres</option>
<option value="cl">centilitres</option>
</select>
<select id="choose-second-unit" class="bum">
<option value="m3-2">cubic meters</option>
<option value="cm3-2">cubic centimeters/millilitres</option>
<option value="dm3-2">cubic decimeters/litres</option>
<option value="hl-2">hectolitres</option>
<option value="cl-2">centilitres</option>
</select>
<input id="firstUnitInput" type="text" value="1"/>
<input id="secondUnitInput" type="text"/>
You can achieve this using jQuery.
You can achieve what you want from the code below.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Testing</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('select.unit').change(function() {
var selectedUnit = $(this).children("option:selected").val();
console.log(selectedUnit);
});
});
</script>
</head>
<body>
<select id="choose-first-unit" class="span-four unit">
<option value="m3">cubic meters</option>
<option value="cm3">cubic centimeters/milliliters</option>
<option value="dm3">cubic decimeters/litres</option>
<option value="hl">hectolitres</option>
<option value="cl">centilitres</option>
</select>
</body>
</html>
I'm trying to add attributes to link taken from ahref html tag, please can anybody guide me that what am I doing wrong in this?
link will be taken from ahref tag and lang and currency from dropdowns and then the final link will be
"link+"index.php?lang="+lang+"¤cy="+currency;"
$(document).ready(function(){
var saveclass = null;
function onChangeHandler() {
const lang = document.querySelector('#lang').value;
const currency = document.querySelector('#currency').value;
var link=document.querySelector('#theButton')..getAttribute('href');
var strLink = link+"index.php?lang="+lang+"¤cy="+currency;
document.querySelector('#theButton').setAttribute('href', strLink);
}
onChangeHandler();
document.querySelector('#lang').addEventListener('change', onChangeHandler);
document.querySelector('#currency').addEventListener('change', onChangeHandler);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="price_billing.js"></script>
</head>
<body>
<select name="" id="lang">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
<select name="" id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="MXN">MXN</option>
</select>
Click
<select name="" id="lang">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
<select name="" id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="MXN">MXN</option>
</select>
Click
</body>
</html>
I took a crack at this. Looks like you have an extra period [.] in front of getAttribute.
Working code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var saveclass = null;
function onChangeHandler() {
const lang = document.querySelector('#lang').value;
const currency = document.querySelector('#currency').value;
var link=document.querySelector('#theButton').getAttribute('href');
var strLink = link+"/index.php?lang="+lang+"¤cy="+currency;
document.querySelector('#theButton').setAttribute('href', strLink);
}
document.querySelector('#lang').addEventListener('change', onChangeHandler);
document.querySelector('#currency').addEventListener('change', onChangeHandler);
});
</script>
<select name="" id="lang">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
<select name="" id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="MXN">MXN</option>
</select>
Click
I also took out the extra onChangeHandler(); because you already have change listeners running the function.
While this technically works, I don't recommend it. If a user keeps changing options, it keeps appending the new URL. Examples below:
https://alpha.com/index.php?lang=French¤cy=USD
https://alpha.com/index.php?lang=French¤cy=USD/index.php?lang=French¤cy=EUR
https://alpha.com/index.php?lang=French¤cy=USD/index.php?lang=French¤cy=EUR/index.php?lang=Spanish¤cy=EUR
https://alpha.com/index.php?lang=French¤cy=USD/index.php?lang=French¤cy=EUR/index.php?lang=Spanish¤cy=EUR/index.php?lang=Spanish¤cy=MXN
https://alpha.com/index.php?lang=French¤cy=USD/index.php?lang=French¤cy=EUR/index.php?lang=Spanish¤cy=EUR/index.php?lang=Spanish¤cy=MXN/index.php?lang=English¤cy=MXN
https://alpha.com/index.php?lang=French¤cy=USD/index.php?lang=French¤cy=EUR/index.php?lang=Spanish¤cy=EUR/index.php?lang=Spanish¤cy=MXN/index.php?lang=English¤cy=MXN/index.php?lang=English¤cy=USD
It would be better to change the URL after users are 100% sure of their options instead of on every single change.
<?php for($i = 1; $i <=5; $i++ ){?>
<tr id="row">
<td class="input-field col s2">
<label>Week Days</label>
<select id="week_days<?php echo $i;?>" data-rel="chosen" name="week_days<?php echo $i;?>[]" class="form-control" multiple="multiple">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
</select>
</td>
</tr>
<?php } ?>
<a id="more_btn" class="right" href="javascript:void(0);"><img src="../../assets/images/icons/add-icon.ico" width="23px" title="Add More"/></a>
How to get the value of option using jquery?
issue is that I am getting a null on click anchor tag. Waht is the right way to getting option value. First user select a Monday option and click on add more anchor tag then in alert show 1 value that is correct but when user change a option and click on add more anchor tag then alert show it null. why it show null instead of 1,2,3,4,5?
<script type="text/javascript">
var j=1;
$('#more_btn').click(function() {
j++;
var u = j-1;
var prev_weekdays = $('#week_days'+u).val();
alert(prev_weekdays);
});
</script>
When the more_btn link click get the selected value of weekdays and alert it see the example
Ex -
<script type="text/javascript">
$('#more_btn').click(function() {
var prev_weekdays = $('#week_days').find(":selected").text();
alert(prev_weekdays);
});
</script>
make the your select as
<select id="week_days" data-rel="chosen" class="form-control" multiple="multiple">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
</select>
Tell me if this is Working or not
Hope this will resolve your issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Values from Multiple Select Box</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
var countries = [];
$.each($(".country option:selected"), function(){
countries.push($(this).val());
});
alert("You have selected the country - " + countries.join(", "));
});
});
</script>
</head>
<body>
<p>Press control key (Ctrl) to select multiple values:</p>
<form>
<label>Country:</label>
<select class="country" multiple="multiple" size="5">
<option value="1">United States</option>
<option value="2">India</option>
<option value="3">United Kingdom</option>
<option value="4">Brazil</option>
<option value="5">Germany</option>
</select>
<button type="button">Get Values</button>
</form>
</body>
</html>
Having the following case: http://jsfiddle.net/kzzy9/
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.inputerror {
color: #B94A48;
border-color: #EE5F5B;
background-color: #FFE1E0;
}
</style>
<script type="text/javascript">//<![CDATA[
function validarcampoimporte(sender) {
var importe = sender.value;
if (!(/^\d*(?:\,\d{0,2})?$/.test(importe))) {
$(sender).focus().select();
$(sender).addClass("inputerror");
//prevent any other event that caused the focusout until the user corrects the value
return false;
} else {
$(sender).removeClass("inputerror");
return true;
}
}
//]]>
</script>
<style type="text/css"></style></head>
<body>
<select name="ddlMes" id="ddlMes">
<option value="1">Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option selected="selected" value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
<input class="" id="name" size="15" type="text" onblur="return validarcampoimporte(this);">
<input type="submit" value="Buttonx" onclick="alert('i got clicked')">
</body>
</html>
What jQuery function can i call to prevent/cancel any other event that caused the focusout when the value is not correct? Return false doesnt work.
(For example if the user is in the validated field and inputs "100a" when he clicks in the select, the options are not shown, or if he clicks in the button the alert is not shown" [cancel the event])
PS: I know someone will tell me about usability problems, form validation at submit, etc but this is the case i have been imposed to do, so thanks beforehand but i need to solve it this way specifically...
You could change your code this way.
HTML (listen to the onkeyup event)
<select name="ddlMes" id="ddlMes" >
<option value="1">Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option selected="selected" value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
<input class="" id="name" size="15" type="text" onkeyup="return validarcampoimporte(this);" />
<input type="submit" value="Buttonx" onclick="alert('i got clicked')">
// JS (validation)
function validarcampoimporte(sender) {
var importe = sender.value;
if (!(/^\d*(?:\,\d{0,2})?$/.test(importe))) {
$(sender).focus().select();
$(sender).addClass("inputerror");
$('input[type="submit"]').attr('disabled', 'disabled');
$('select').attr('disabled', 'disabled');
return false;
} else {
$(sender).removeClass("inputerror");
$('input[type="submit"]').removeAttr('disabled');
$('select').removeAttr('disabled');
return true;
}
}
See here: http://jsfiddle.net/kzzy9/6/
Instead of attaching events inline, you should attach them with javascript. I'm re-focusing the "sender" after a timeout. What was happening when you click outside of the input is that the blur event is called, then another element is focused (through perhaps a click event).
$("#name").blur(validarcampoimporte);
function validarcampoimporte(e) {
var importe = this.value;
var me = $(this);
if (!(/^\d*(?:\,\d{0,2})?$/.test(importe))) {
setTimeout(function(){me.focus();}, 20);
$(this).addClass("inputerror");
e.preventDefault();
return false;
} else {
$(this).removeClass("inputerror");
return true;
}
}