Develop Reference

How to reset select option after confirmation popup box

I have a simple selection dropdown that looks like this:
Criteria: <select name="criteriaon" id="criteriaon" onchange ="myfunction(this.form)">
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
and a javascript that will pop up a confirmation box only if the user chooses OFF.
<script>
function myfunction(){
if (this.value === '0'){
confirm("Are you sure you want to turn off?");
}
}
document.getElementById('criteriaon').addEventListener('change', myfunction);
</script>
Right now what happens is that the selection will remain as OFF regardless of the user chose Yes or No. Is there a way to reset the selection to ON if the user chooses "No" on the pop-up confirmation box? Thanks in advance.

this way
ps: remove
--> onchange ="myfunction(this.form)"
because you are already using :
document.getElementById('criteriaon').addEventListener('change', myfunction);
document.getElementById('criteriaon').addEventListener('change', myfunction);
function myfunction() {
if (this.value === '0') {
if (!confirm("Are you sure you want to turn off?") ) {
this.value = '1'
}
}
}
Criteria:
<select name="criteriaon" id="criteriaon" >
<option value="1">ON</option>
<option value="0">OFF</option>
</select>

You can simply set the value of select to 1 by doing this.
this.value = '1';
function myfunction(){
if (this.value === '0'){
const result = confirm("Are you sure you want to turn off?");
if (!result) {
this.value = '1';
}
}
}
document.getElementById('criteriaon').addEventListener('change', myfunction);
Criteria: <select name="criteriaon" id="criteriaon" onchange="myfunction(this.form)">
<option value="1">ON</option>
<option value="0">OFF</option>
</select>

HTML selectpicker multiple , options "all" disable all other options

I have a select picker element like this in my web page :
<select id="difficulty" name="difficulty" class="selectpicker" multiple onchange="ChangeFilters()">
<option value="-1" selected >All</option>
<option value="0" >Facile</option>
<option value="1" >Normal</option>
<option value="2" >Difficile</option>
</select>
I want that when the user select the "All" options (value = '-1') , if there are other options selected they become not selected, and if the option all is selected when the user select an other options the "all option" become not selected.
I have searched for like 2 hours and i can't make this working.
I work with bootstrap and this select element is a selectpicker element, my javascript don't work when i try something ..
Please help !
EDIT :
I posted the working code as an answer, thanks for your help !

Something like this?
function ChangeFilters(){
var selVal = $('#difficulty').val()[0];
if(selVal == -1){
$('#difficulty').attr('multiple',false);
}else{
$('#difficulty').attr('multiple',true);
}
}

With the help of this post Select all / Unselect all in Bootstrap Select plugin
This is the full working code which allow the user to select the All option, 3 difficulties, or nothing :
HTML :
<select id="difficulty" name="difficulty" class="selectpicker" multiple onchange="ChangeFilters()">
<option value="All" selected >Tous</option>
<option value="0" >Facile</option>
<option value="1" >Normal</option>
<option value="2" >Difficile</option>
</select>
Javascript :
//This need to be on your page load or other load event before the first onChange.
$('#difficulty').data('allOptionIsSelected', true);
function ChangeFilters() {
if ($('#difficulty') != null) {
if ($('#difficulty').val() != null) {
var allOptionIsSelected = ($('#difficulty').val() || []).indexOf("All") > -1;
function valuesOf(elements) {
return $.map(elements, function (element) {
return element.value;
});
}
if ($('#difficulty').data('allOptionIsSelected') != allOptionIsSelected) {
//User clicked 'All' option
if (allOptionIsSelected) {
$('#difficulty').selectpicker('val', ["All"]);
$('#difficulty').selectpicker('refresh');
} else {
}
} else {
// User clicked other option
if ($('#difficulty').val().length != $('#difficulty').find('option').length) {
//user clicked other
// All options were selected, user deselected one option
// => unselect 'All' option
$('#difficulty').selectpicker('val', valuesOf($('#difficulty').find('option:selected[value!=All]')));
allOptionIsSelected = false;
}
}
$('#difficulty').data('allOptionIsSelected', allOptionIsSelected);
}
$('#difficulty').selectpicker('refresh');
}
}
If you want to make this work with your project, change '#difficulty' to the id of your select control.
Thanks to #yuriy636 for the previous help :)

hide <tr> based on selected radio button

I want to hide a table row based on the value selected from a radio button.
Those radio buttons were created based on value selected from a dropdown list box.
Here is my code
HTML code for listbox
<select name="txtLT" id="LT" >
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Jquery
$(document).ready(function() {
$("#LT").change(function() {
var selVal = $(this).val();
$("#tblerow").html('');
if(selVal == 'c') {
$("#tblerow").append('<td><input type="radio" id="cmpof" name="cmpof" value="1" onclick="show()" />1 <input type="radio" id="cmpof" name="cmpof" value="2" onclick="hide()"/>2</td>');
}
});
});
Now if radio button 2 is selected, then the table row with tr2 should disappear.
Please help me to find the solution.
EDIT
I tried the following JavaScript, but it does not hide the row.
function show() { document.getElementById('sbjrow').style.display = 'block'; }
function hide() { document.getElementById('sbjrow').style.display = 'none'; }
Could you please suggest what is wrong here?

You can just use the hide and show function of jQuery like so:
$(function () {
$('#LT').change(function () {
if ($(this).val() == 'c') {
$('.radios').show();
} else {
$('.radios').hide();
}
});
$('input[name=cmpof]').change(function () {
if ($('#LT').val() == 'c' && $(this).val() == 'bar') {
$('#table tr').eq(1).hide();
} else {
$('#table tr').eq(1).show();
}
});
});
If you don't want the table row to show up by default, just do it with css.
JsFiddle example: http://jsfiddle.net/AX5TJ/1/
Updated version that may be closer to what you want: http://jsfiddle.net/AX5TJ/2/
Also be carefull, you have a syntax error in your script : when you define $("#LT").change(function() {, you have to close with });

Values of two select boxes

Briefly Explaining my program :
I Have 3 select boxes
If the value selected by the user in the 1st box is 2 & Value selected by the user in second box is 3 (option values) then the third select box should display an array.
This code doesn't work but shows an idea:
if ($('#firstbox').click(function() { ($(this).val() == '2'); } &&
$('#secondbox').click(function() { ($(this).val() == '3'); }) {
// Array Display here (not included the coding here, because there is no issue with this coding.. seems working fine)
}
I need help for the code included in if statment and && operation for checking the expression.

var select1 = $('#firstbox');
var select2 = $('#secondbox');
$([select1, select2]).change(function () {
if ( select1.val() == 2 && select2.val() == 3 ) {
// run your code here...
}
});

You need to either bind the click event to the third select box or bind to the change event of the first two boxes and callback a common function which updates the third one.

$("#firstbox, #secondbox").change(UpdateThird);
function UpdateThird() {
var a = $("#firstbox").val();
var b = $("#secondbox").val();
if (a == 2 && b == 3) {
// ...
}
}

assuming
<select id="firstbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="secondbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
script:
$('#secondbox, #firstbox').on('change',function(){
if($('#firstbox').val() == 2 && $('#secondbox').val() == 3)
alert('array display code here...');
})

How to disable html form element with JavaScript?

There are two selection buttons which need client-side validation. The user must select one of them, and if user chooses one, the other one will be disabled automatically.
This my script:
<html>
<head>
<script type="text/javascript">
function Check() //this the funciton for diasbled
{
var x =document.getElementById("supexp1");
var y =document.getElementById("supexp2");
if(x.value != "")
{
document.form1.supexp2.disabled=true;
}
else if(y.value != "")
{
{
document.form1.supexp1.disabled=true;
}
}
}
</script>
</head>
<body>
<form method="POST" action="destination.php" id="form1">
<select name="SUPEXP" id="supexp1" data-native-menu="false" onChange="Check()">
<option >Ekspedisi Local1</option> //this selection 1
<option >Ekspedisi Local2</option> //this selection 1
<option >Ekspedisi Local3</option> //this selection 1
</select>
<select name="SUPEXP" id="supexp2" data-native-menu="false" onChange="Check2()">
<option >Ekspedisi Expor2</option> //this selection 2
<option >Ekspedisi Expor2</option> //this selection 2
<option >Ekspedisi Expor2</option> //this selection 2
</select>
</form>
</body>
</html>
I use the jquerymobile framework and selection connect to the database. That code (JavaScript) is not running.

I hope this is what you trying to do based on your description here is a jsfiddle
$(document).ready(function() {
$('#supexp1').change(function() {
$('#supexp2').attr("disabled" , "disabled")
});
$('#supexp2').change(function() {
$('#supexp1').attr("disabled" , "disabled")
});
});​

Try this code
if(x.value != ""){
document.getElementById("supexp2").disabled=true;
} else if(y.value != "") {
document.getElementById("supexp1").disabled=true;
}

I guess to get the value of the selected item you need to use some thing like this
var e = document.getElementById("supexp1");
var x = e.options[e.selectedIndex].value;
instead of
var x =document.getElementById("supexp1");
do the same for Y