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>
Related
I have a set of three option boxes which I am trying to keep disabled until the previous box has chosen. I am trying to use the onchange event to fire some script which enables the following box and populates the options but cannot get it to work for some reason? #nap2 is the first combo box, #nap4 the following. The code works fine on a click event but I need it to happen after the user has selected an option....
HTML
<select id="nap2" class="napkeeComponent napkeeCombobox">
<option>Rider 1</option>
<option>Rider 2</option>
<option>Rider 3</option>
<option>Rider 4</option>
<option>Rider 5</option>
</select>
<select id="nap4" class="napkeeComponent napkeeCombobox" disabled>
<option>Bike1</option>
<option>Bike2</option>
<option>Bike3</option>
<option>Bike4</option>
<option>Bike5</option>
</select>
JS
$(document).ready(function(){
$("#nap2").onchange(function(event){
var element = document.getElementById("nap2");
var selected = element.options[element.selectedIndex].text;
if(selected == "Rider 1"){
$('#nap4').removeAttr('disabled');
}
else{
if((selected == "Rider 2")){
$('#nap4').removeAttr('disabled');
}
}
event.stopPropagation();
event.preventDefault();
});
});
There is no onchange event instead there is .on('change' or .change. so use either of one as below:
$("#nap2").on('change',function(event){
var element = document.getElementById("nap2");
var selected = element.options[element.selectedIndex].text;
if(selected == "Rider 1"){
$('#nap4').removeAttr('disabled');
}
else{
if((selected == "Rider 2")){
$('#nap4').removeAttr('disabled');
}
}
event.stopPropagation();
event.preventDefault();
});
DEMO
More simplified version:
$("#nap2").on('change',function(event){
var selected = $(this).find('option:selected').text() //get selected text
if(selected == "Rider 1" || selected =="Rider 2"){ //have a single condition with or
$('#nap4').removeAttr('disabled');
}
else
$('#nap4').attr('disabled',true); //In case you want to disable it again if different option is selected
});
DEMO +
I have HTML:
<select class="form" id="select" name="select">
<option>number1</option>
<option>number2</option>
</select>
<select name="organisation" class="form" id="cent" required>
<option value="1">UK</option>
<option value="2">SPAIN</option>
</select>
And another <select>:
<select class="form" id="ssip" name="organisation">
<option value="47" >US</option>
<option value="48">UKRAINE</option>
</select>
JQuery to show on 1 - first select on 2 - second
$(document).ready(function() {
$("#select").each(function () {
if (this.value == "1") {
$('#cent').show();
$('#ssip').hide();
}
if (this.value == "2") {
$('#cent').hide();
$('#ssip').show();
}
});
});
The problem is that when i choose option number1 appears first select with values 1 and 2 but when i select UK with value 1 and click submit it's sending value 47 , of second select's first option..
Try disabling the opposite select when toggling the selects. A control on a form will still be submitted if its display is set to none, however if the control is disabled it will not be submitted with the form.
$(document).ready(function() {
$("select").change(function () {
if (this.value == "number1") {
$('#cent').show().prop("disabled", false);
$('#ssip').hide().prop("disabled", true);
}
if (this.value == "number2") {
$('#cent').hide().prop("disabled", true);
$('#ssip').show().prop("disabled", false);
}
});
});
JS Fiddle: http://jsfiddle.net/bTJsH/
You are trying to loop one select box..
$("#select").each(function () {
There can be only one element with id "select". You should check like:
if ($("#select").value() == "1") { ..
And you don't even have values in your first select options..
i might suggest something like this
$('#select').on('change', function() {
var selected = this.selectedIndex;
$('.orgs').hide();
switch(selected) {
case 1:
$('#ssip').show();
break;
case 2:
$('#cent').show();
break;
}
});
here is an working example http://jsfiddle.net/pixelchemist/7ZGwy/
I have a select drop down menu. The menu is just for show and doesn't contribute anything to the form. However, I want option "b" to display an alert/message when it is selected/clicked BUT then I want option "a" selected after the user closes the alert (similar to disabled).
<select name="fake">
<option name="a">a</option>
<option name="b">b</option>
</select>
I found other javascript code, but nothing that suits my particular need.
EDIT
This is half way to what I need:
<select onchange="selectChangeHandler(this)">
<option>a</option>
<option>b</option>
</select>
<script>
function selectChangeHandler(selectNode) {
if (selectNode.selectedIndex !== 2) {
alert("I'm alert option!");
}
}
</script>
However, when the user selects option "b" and the alert is displayed, I want the option to revert back to option "a"
you can call a javascript function on call onchange() event.
HTML
<select name="fake" onchange="change(this);">
<option value="a" name="a">a</option>
<option value="b" name="b">b</option>
</select>
javascript,
<script>
function change(selBox) {
for(var i, j = 0; i = selBox.options[j]; j++) {
if(i.value == "b" && selBox.selectedIndex != 0) {
alert("you've clicked b");
selBox.selectedIndex = 0;
}
}
}
</script>
$('#chk').change(function(){
if($(this).val() === 'a')
alert("You Clicked a!");
});
where chk is the id of select element
if you are using name then
$('#chk').change(function(){
if($(this).attr('name') === 'a')
alert("You Clicked a!");
});
where chk is the id of select element
So, this is what I am trying to do.. I want a dropdown in HTML with a submit button that changes based on the value of the dropdown.
So, when I have this:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
...
</select>
What I need is a button that checks what the value is. If value = 20x30 then use URL www.example.com/20x30
If value is 30x30 then use URL www.example.com/30x30
I am far from a PHP expert, so anyone that is able to set me off in the right direction would be a life saver :)
some simple Javascript would suffice:
<form id="FORM_ID" action="DEFAULT_ACTION">
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
</form>
<script type="text/javascript">
document.getElementById('select13').onchange = function(){
document.getElementById('FORM_ID').action = '/'+this.value;
}
</script>
You might try this:
Javascript:
function goto() {
window.location = "http://www.example.com/"+document.getElementById('select13').value;
}
HTML:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
<button onclick='goto()'>Go</button>
When you click on the 'GO' button it redirects to example.com/(the selected value).
Here's a JSFiddle with an exmaple.
EDIT to fit your comment:
function goto() {
var selection = document.getElementById('select13').value;
if (selection != 'All') {
//window.location = "http://www.example.com/"+selection;
alert("http://www.example.com/" + selection);
} else {
alert("Error: You must pick something");
}
}
Also, if you want to submit a form and then do the redirection. The PHP code would be as follows:
<?php
//Process your form without echoing anything before the header function.
if($_REQUEST['sizes'] != 'All'){
header('location:http://example.com/'.$_REQUEST['sizes']);
}
else{
header('location:http://example.com/form.php');
}
You'll need an onchange event for your dropdown:
document.getElementById("select13").onchange = function() {
var currentVal = this.value;
if (currentVal == "20x30") {
//do stuff
}
}
I am working on a form in which I want to take select values and when user select yes value then I want to display a text box section, but following code is not working for me.
<select id="gap" name="gap" onclick="gap_textbox();">
<option value='select'>Select</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<input type="text" name="gap_box" id="gap_text_box" />
<script type="text/javascript">
function gap_textbox() {
alert ("am here" + " " +document.getElementById("gap").value);
if (document.getElementById("gap").value =='select') {
alert ("in value = select");
document.getElementById("gap_text_box").disable=true;
}
else if (document.getElementById("gap").value =='no') {
alert ("in value = no");
document.getElementById("gap_text_box").disable=true;
} else {
alert ("in value = yes");
document.getElementById("gap_text_box").disable=false;
}
}
</script>
In the following line...
<select id="gap" name="gap" onclick="gap_textbox();">
...you need to use onchange instead of onclick.
However, using inline click handlers is considered old-fashioned and hard to maintain. You should be using proper JavaScript event handling...
document.getElementById("gap").onchange = function() {
gap_textbox()
};
Or, better yet, use a library, such as jQuery...
$('#gap').change(function() {
gap_textbox();
});
Try below code . Only change made is, replaced onclick function with onchange. For selection box you must use onChange function. We are not clicking anything in selection box.
<select id="gap" name="gap" onchange="gap_textbox();">
<option value='select'>Select</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<input type="text" name="gap_box" id="gap_text_box" />
<script type="text/javascript">
function gap_textbox()
{
alert ("am here" + " " +document.getElementById("gap").value);
if (document.getElementById("gap").value =='select')
{
alert ("in value = select");
document.getElementById("gap_text_box").disable=true;
}
else if (document.getElementById("gap").value =='no')
{
alert ("in value = no");
document.getElementById("gap_text_box").disable=true;
}
else
{
alert ("in value = yes");
document.getElementById("gap_text_box").disable=false;
}
}
</script>