I am writing a webpage in which a user will see a menu with a default text shown (in this case "choose baseline"). After they select one of the options, I need to have a button that can reset the select menu to its 'Choose baseline' default. How can I do this?
<select onchange="saveSelection(value)">
<option value="" selected disabled hidden>Choose Baseline</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<button type="button">Reset menu</button>
You can add an id on your select. Then add a function clearSelection to be triggered on click of the button.
function saveSelection(value) {
}
function clearSelection() {
//This will select the first option of the select
document.getElementById('select-baseline').options[0].selected = 'selected';
}
<select id='select-baseline' onchange="saveSelection(value)">
<option value="" selected disabled hidden>Choose Baseline</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<button type="button" onClick="clearSelection()">Reset menu</button>
Put all this code inside the form tag. This will allow you to apply the clear functionality to the select tag and change your button type to reset
<form>
<select>
...
</select>
<button type="reset">Reset Menu</button>
</form>
<select id="menu" onchange="saveSelection(value)">
<option value="" selected disabled hidden>Choose Baseline</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<button type="button" onclick="resetMenu()">Reset menu</button>
<script src="test.js"></script>
JavaScript
function resetMenu() {
var element = document.getElementById('menu');
element.value = '';
}
Related
https://jsfiddle.net/a8r057du/
I don't understand why I don't disable the select "A" when I select the all products option
<form method="post" action="shop.php">
<select name='filterp'>
<option defaultSelected>Please select an option</option>
<option value="allp" isSelect="disabled()">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function disabled()
{
document.getElementsById("A").disabled=false;
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
you have isSelect="disabled()" in your code which doesnt do anything because its not an actual method
to disable the select if the option is selected, you need to use onchange or the change eventListener and check if the option you clicked is the "all products" option
js code :
function change(value){
if(value === "allp"){
document.getElementById("A").disabled = true;
}
}
here, i used an if statement to check if the value is "allp" which is the "all products" option and disable the select element
another problem is you havedocument.getElementById("A").disabled = false; , it should be true
full code:
<form method="post" action="shop.php">
<select name='filterp' onchange="selectOnchange(value)">
<option defaultSelected>Please select an option</option>
<option value="allp">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function selectOnchange(value){
if(value === "allp"){
document.getElementById("A").disabled= true;
}
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
</form>
and you also used document.getElementsById which is wrong, it should be getElementById
thank you very much you saved me
<form method="post" action="shop.php">
<select name='filterp' onchange="selectOnchange(value)">
<option defaultSelected>Please select an option</option>
<option value="allp">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function selectOnchange(value){
if(value === "allp"){
document.getElementById("A").disabled= true;
}
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
</form>
I have a HTML file with a simple drop down list.
Upon selecting one of the choices, I want the choice to be stored in a hidden input.
<div id ="mainContent">
<span style="font-size: 15px;"> Category : </span> <select id="selectid" name="filecategory">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<br /><br />
<input type="hidden" name="filecategory" value="XXX" />
</div>
I did some research online and came up with this handler code upon detecting a change event in the drop down list.
$("#selectid").change(function(){
alert('change called');
});
Can someone tell me how I can set the hidden input via this handler ?
Solved here:
$("#selectid").change(function(){
$("input[name='filecategory']").val($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectid" name="filecategory">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<input type="hidden" name="filecategory" value="XXX" />
I really need your help here. Just a heads up that I am newcomer to the jQuery library.
That out of the way, I would like to get some help to so as to build onto my existing code (the codes existing purpose in my post is to check and see if any of the select boxes have any selected option values, attached to an on change event, so if any of the select boxes have any selected option values then enable the search button, if not, then just keep it nicely disabled.
Now, here's where it gets really tricky for me, how can the existing code be modified so as to also check (in parellel to the code below) to check and see if any input boxes also have any input values,
So the expected outcome for a typical scenario is this, if the user has made a selection in any of the select boxes or has typed in any text in the form, then enable the search button, if the form contains no selected options and all of the input boxes are empty, then disable the #search button.
Here's both the HTML Markup and Code in question:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript">
window.onload = function() {
$('#myform').on('change', function() {
var form = $(this);
form.find('#search').prop('disabled', form.find('select option:selected').filter(function() {
return this.value.length;
}).length === 0)
}).change();
}
</script>
</head>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
</html>
Have generalized function to test all the input;
Consider $(':input:not([type="button"])') to select all the inputs excluding button
window.onload = function() {
var validateForm = function() {
return $(':input:not([type="button"])').filter(function() {
return this.value !== '';
}).length;
}
$('#myform').on('change keyup', ':input', function() {
$('#search').prop('disabled', !validateForm());
}).change();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<br>Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br>
<br>Vegetable
<input type="input" id="veggie">
<br>
<br>Number
<input type="input" id="number">
<br>
<br>
<input type="button" value="search" id="search" disabled>
</form>
Exists a method for click in label and select one specific option into select?
I don't like use JS
Follow the code:
<label for="a">State</label>
<select name="">
<option value="">teste</option>
<option value="">teste X</option>
<option value="" id="a">teste A</option>
</select>
Thanks!
html:
<label data-value="c">C</label>
<select name="" id="myselect">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
jQuery:
$(document).on("click", "label", function(evt) {
evt.preventDefault();
$("#myselect").val($(this).data("value"));
});
<form method="post" action="asdasd" class="custom" id="search">
<select name="sel1" id="sel1">
<option value="all">all</option>
<option value="val1">val1</option>
<option value="val2" selected="selected">val2</option>
</select>
<select name="sel2" id="sel2">
<option value="all">all</option>
<option value="val3">val3</option>
<option value="val4" selected="selected">val4</option>
</select>
</form>
I want to select the first field of all the Select (so set the value "all" to all the Select) clicking a button
Your form should have a reset button
<form method="post" action="asdasd" class="custom" id="search">
<select name="sel1" id="sel1">
<option value="all">all</option>
<option value="val1">val1</option>
<option value="val2" selected="selected">val2</option>
</select>
<select name="sel2" id="sel2">
<option value="all">all</option>
<option value="val3">val3</option>
<option value="val4" selected="selected">val4</option>
</select>
<input type="button" name="Reset" />
</form>
After adding a reset button input element to your form below code should reset all select fields.
jQuery( "input[name=Reset]" ).click( function(){ //jQuery click event
jQuery( "select" ).each(function() { //for each select type
$(this).val( "all" );
});
});
You have to add attribute selected to the first option of all select box.
$("select option:first").attr('selected','selected');
See my fiddle
Hope it helps.
You don't need to use jquery. This can be done by JavaScript
document.getElementById("sel1").selectedIndex = 0;
Here is my JSFiddler demo for complete code.
This is jQuery way to achieve above
$("select").val("0");
Or to be more specific
$("#sel1 , #sel2").val("0");