I wabt to create a wizard for this form in a such way to give options of the second input based on the option of the first input
<form method="post" action="result.php">
<select>
<option value="jean">jean</option>
<option value="t-shirt">t-shirt</option>
</select>
<select>
// if jean
<option value="black">Black</option>
<option value="blue">Blue</option>
// if t-shirt
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
<button type="submit">See products</button>
</form>
For example if the user choose t-shirt, it will show him available colors of that item
Something like this is probably what you're looking for:
function updateColors(product) {
document.getElementById("color").innerHTML = {
"jean": `<option value="black">Black</option>
<option value="blue">Blue</option>`,
"t-shirt": `<option value="yellow">Yellow</option>
<option value="green">Green</option>`
}[product];
}
window.onload = ()=>{updateColors("jean");}
<form method="post" action="result.php">
<select onchange="updateColors(this.value)">
<option value="jean" selected>jean</option>
<option value="t-shirt">t-shirt</option>
</select>
<select id="color"></select>
<button type="submit">See products</button>
</form>
The function updateColors takes a value, product, which is the value of the first selection box. It uses this to choose which colours to show; and then updates the HTML of that box.
We call updateColors using the onchange event of the first select box. This event is fired whenever the user picks an item; so that the change happens immediately after. From this; I pass this.value - in this context, this refers to the first selection box, and value refers to the value attribute of the selected <option> tag.
I have given the second selection box an id, color, so that we can easily reference it and change its contents.
document.getElementById("color") references the second selection box; so we can change its properties.
The .innerHTML property is used to change the HTML of a given DOM node (element on the page). By setting it, then we can change that element's HTML contents.
Then; I use a dictionary (known as a map in other languages). This is a data structure that maps keys to values. Here, jean is a key, and then the HTML for the colors jeans come in is the value. Hence; we can get that HTML given the key. Likewise, t-shirt is another key; which has a different value.
[product] is used to get the value for the given key. So if we pass in jean, it gives us back (as a string) the HTML value we set as the key. Then; that is set as the HTML code for the second selection box via innerHTML.
window.onload = ()=>{updateColors("jean");} calls this function automatically when the page finishes loading. This is to ensure that the form makes sense before the user fills it out; as jean is selected by default so it makes sense to set the default content of the second selection box to be the colors for jeans.
Related
I need to link and update textbox input text and span text depending on a user selection made from a dropdown box.
The code I wrote so far almost does what I need, but once the page is been refreshed, the span text gets flushed and no longer displayed.
Here are the differents cases I need:
( I've been able to get the 2 first cases properly working with my code below )
<script>
// Set linked fields according to dropdown selection box
function update_linked_selection() {
var ID_selection = $("#ID_list");
gpio_name.val("~gpio_name(" + ID_selection.find('option:selected').text() + ")~");
gpio_type.text("~gpio_type(" + ID_selection.find('option:selected').text() + ")~");
// Store new fieds into localStorage for next page reload
localStorage.setItem("local_storage_gpio_name", gpio_name.val());
localStorage.setItem("local_storage_gpio_type", gpio_type.text());
location.reload(false);
}
</script>
<script>
$(document).ready(function() {
gpio_name.val(localStorage.getItem("local_storage_gpio_name"));
gpio_type.text(localStorage.getItem("local_storage_gpio_type"));
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var gpio_name = $("#linked_name");
var gpio_type = $("#linked_type");
</script>
Here, the user should pick an ID in the dropdown box in order to compose the entry box value .
That dynamic variable will be expected at server side and a callback will happen when the page refresh is requested.
ie : if user selects ID '1' , then the value becomes ~gpio_name(1)~
<p></p>
Javascript should update the entry box value according to the choice made from dropdown box selection and also the into the span content.
<p></p>
Submit button is there if user want to manually change the values and send it to server.
<p></p>
<form method="GET" action="gpio1.htm" id="gpio">
<select name="ID" id="ID_list" onchange="update_linked_selection();">
<option value="x">Select ID below</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>
</select>
<input type="text" maxlength="15" name="name" id="linked_name" size="15" maxlengtd="10">
<span id="linked_type"></span>
<button type="submit">Submit</button>
</form>
At page load, the user is invited to select an ID from the dropdown box.
Here I expect to have textbox input text and span text cleared like this:
User make his selection in the dropdown box, then textbox input text and span text are updated accordingly :
Here things get more tricky for me:
Once text field is set accordingly by change I need to request a page refresh in order to get the ~variables~ updated from the server side.
At the moment when the page refresh happens, the span text previously displayed has gone and no longer displayed.
How could I get the spam text still displayed after page refresh ?
After that, if the user pick back the very first choice named 'Select ID below' then textbox input text and span text become:
I would like to avoid so and have all text cleared if the user pick that selection.
In other words, how could i make this first choice : 'Select ID below' as a disabled choice ?
Expected result should be like this, as same as the very first page load :
Regarding your page refresh issue, you could use HTML5 localStorage to take care of that.
Once text field are set, inside onchange or anywhere before requesting a refresh you could store the values of the text input & span into localStorage variables.
// Store
var gpio_name = "~gpio_name(8)~";
var gpio_type = "~gpio_type(8)~";
localStorage.setItem("gpio_name", gpio_name);
localStorage.setItem("gpio_type", gpio_type);
Then on pageload/refresh, you could set the value of the text input and span from the earlier stored localStorage variables like so
// Retrieve
$('#input-text').val(localStorage.getItem("gpio_name"));
$('#span').html(localStorage.getItem("gpio_type"));
Read more about WebStorage here
Updated after OP's update:
In your case, the JQuery should look like:
var gpio_name = $("#linked_name");
var gpio_type = $("#linked_type");
// Set linked fields according to dropdown selection box
function update_linked_selection() {
var ID_selection = $("#ID_list");
gpio_name.val("~gpio_name(" + ID_selection.find('option:selected').text() + ")~");
gpio_type.text("~gpio_type(" + ID_selection.find('option:selected').text() + ")~");
// Store new fieds into localStorage for next page reload
localStorage.setItem("local_storage_gpio_name", gpio_name.val());
localStorage.setItem("local_storage_gpio_type", gpio_type.text());
location.reload(false);
}
$(document).ready(function() {
gpio_name.val(localStorage.getItem("local_storage_gpio_name"));
gpio_type.text(localStorage.getItem("local_storage_gpio_type"));
});
There's this website that I want to change how they display their dropdown menu.
http://i.stack.imgur.com/Wu718.jpg
I wanted to make it so that the default value is "Items for Sale", instead of "Forum Topics"
Here's their source code.
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
Since I don't really care about how it looks, I just want to change the value="topics" to value="s" even without changing the texts.
I've read some tutorials, but they mostly use IDs and Classes as a selector, in this case, how do I target this Select from many other in their website and change the value.
You can use:
$('select[name=sec]').val('s');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
I think this is what you're describing in the comments below:
var dropdown = $('select[name=sec]');
// change the s option to items
dropdown.find('option[value=s]').attr('value', 'items');
// change the topics option to s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s
// (first option should continue to be selected because its value is now s)
dropdown.val('s');
// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You can use the name or any other attribute.
for css
select[name="sec"]
or jquery
$('select[name="sec"]').
DEMO inspect element from your browser to see the changes
you can select a select dropdown list with select[name=sec] and select the first option with option:first
$('select[name=sec] option:first').val('s');
and if you need to change any of options just use .eq()
$('select[name=sec] option').eq(0).val('s'); // eq(0) for the first option element . eq(1) for the second option element ...
If you want to make selected an other option use this code:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
This script removes the default selection (the first option) and select the option which has "s" value. For the Demo:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You have to find this element in the DOM. For this you should find the first parent container element of the which has ID or CLASS attribute. From that element you can create a search for the element what you want by using the .find() method.
If there're more element which has name attribute with "sec" value you should build a chain of find which separate that you want. For that you can use these function templates:
$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));
I've been lurking a bit and couldn't find the answer. Basically I have a bunch of buttons that I want to turn into a drop down menu and have the code be executed onChange. But, I'm new to javascript and I am having a hard time figuring out how this would work. I somewhat got it to work, but I couldn't get it to work with more than one option. Here's what I have:
<button class="lightbutton" onclick="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
All lights on</button>
<button class="lightbutton" onclick="lightswitch(1,false);lightswitch(2,false);lightswitch(3,false);">
All lights off</button>
I got the lights to turn on by doing this:
<form name="functions">
<select name="jumpmenu" onChange="lightswitch(1,true);lightswitch(2,true);lightswitch(3,true);">
<option>LightFunctions</option>
<option value="*";>Light 1 On</option>
<option value="*";>Light 1 Off</option>
</select>
</form>
Now, I see why it works -- it's just telling it that whenever it changes to turn on all the lights. But how do I change the "onChange" to make it so it gets whichever option I have chosen?
I think I'm missing some JS but unsure.
I appreciate the help.
To have that select element control just the first lightswitch you can do this:
<select name="jumpmenu" onChange="lightswitch(1,this.value==='on');">
<option value="on";>Light 1 On</option>
<option value="off";>Light 1 Off</option>
</select>
That is, instead of hardcoding true as the second parameter to lightswitch() test the current value of the select element. (Note that I've changed the value attributes to something more meaningful. The expression this.value==='on' will evaluate to either true or false.)
Within the select's onChange attribute this will refer to the select element itself.
EDIT: To have the same select control multiple parameters you can add some data- attributes to the option elements to store as many extra parameters per option as needed (in this case I think you only need one extra). And I'd move the logic out of the inline attribute:
<select name="jumpmenu" onChange="jumpChange(this);">
<option value="">LightFunctions</option>
<option data-switchNo="1" value="on";>Light 1 On</option>
<option data-switchNo="1" value="off";>Light 1 Off</option>
<option data-switchNo="2" value="on";>Light 2 On</option>
<option data-switchNo="2" value="off";>Light 2 Off</option>
<option data-switchNo="3" value="on";>Light 3 On</option>
<option data-switchNo="3" value="off";>Light 3 Off</option>
</select>
function jumpChange(sel) {
if (sel.value === "") return; // do nothing if user selected first option
var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo");
lightswitch(whichLight, sel.value==='on');
sel.value = ""; // reset select to display the "Light Functions" option
}
Demo: http://jsfiddle.net/N7b8j/2/
Within the jumpChange(sel) function that I added the parameter sel will be the select element (set as this from the onChange attribute). The "magic" happens on this line:
var whichLight = +sel.options[sel.selectedIndex].getAttribute("data-switchNo");
To explain that line: sel.options[sel.selectedIndex] gets a reference to the currently selected option, and .getAttribute("data-switchNo") gets that option's data- attribute. The + converts the attribute from a string to a number.
I'm a pretty novice programmer who is trying to implement something I thought would be pretty simple, but after searching haven't found a solution.
So right now I have an variable called msg. msg is dynamically generated and can be anywhere from 2-999.
I have a select that is very simple:
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect' data-param='location_IDNUMBER'>
<option value='1'>Exam Room</option>
<option value='2'>Exam Room 2</option>
<option value='3'>X-Ray Room</option>
<option value='1000'>Check Out</option>
</select>
</form>
My problem is: lets say msg has a value of 3. How can I show the select with a value of 3, so the selected option(the option first visible before clicking the arrow) is X-Ray Room?
my code (taken out of a larger block of code is:
$e.find('.locationSelect').show();
How can I modify it to say something like:
$e.find('.locationSelect':value=msg).show(); //this would show the .locationSelect with the selected value being the one with the id of 3, or whatever msg is
Thanks for any and all help! If you need any more details, just ask!
Try
$e.find('.locationSelect').val(msg);
http://jsfiddle.net/mowglisanu/ktcgy/
You can use $.fn.val(value) to set the selected value of a dropdown.
Note that in case you pass to $.fn.val a value that is not present in the dropdown, the first option will be selected instead.
I just saw the following:
http://www.w3schools.com/jsref/prop_option_value.asp
And wonder if there's something wrong with selectObject.value. Why not a simple approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function displayResult(){
alert(document.getElementById("mySelect").value);
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
<button type="button" onclick="displayResult()">
Display value of selected fruit
</button>
</body>
</html>
It seems to be working with no problem.
Thanks in advance!
Mike
Your method, document.getElementById("mySelect").value is returning the value of the select object - which sets itsself to the value of the currently selected option. The way w3Schools is doing it is finding the actual option tag, then you're getting the value of the option tag. So, as long as you are accessing the currently selected option tag, they return the exact same thing. However, the w3schools way allows you to actually set the value of the option tag instead of changing which option is selected when setting the value property (although that's probably not what you want).
Example:
<select id='select'>
<option value=1>one</option>
<option value=2>two</option>
</select>
x=document.getElementById("mySelect").selectedIndex;
So, document.getElementById('select').value; returns the value of the select element.
And document.getElementsByTagName("option")[x].value; returns the value of the selected option element.
Meaning that document.getElementById('select').value=2 changes which option is selected, while document.getElementsByTagName("option")[x].value=2 changes the value of the selected option element.
TLDR: When getting the value there is no difference, when setting the value there is.