<select id="one" name="age">
<option value="0-50">Select Age</option>
<option value="0-4">0-4</option>
<option value="5-9">5-9</option>
<option value="10-14">10-14</option>
<option value="15-19">15-19</option>
</select>
I want to show text which user selected from this dropdown to next page
for exmaple :- if user select age 5-9 from this page and user have see selected age to the next page like "selected age is 5-9"
You can use localStorage to save the selected age:
one.addEventListener("change", function(){
localStorage.setItem("age", this.value);
});
<select id="one" name="age">
<option value="0-50">Select Age</option>
<option value="0-4">0-4</option>
<option value="5-9">5-9</option>
<option value="10-14">10-14</option>
<option value="15-19">15-19</option>
</select>
And then retrieve the value in the other page as follows:
let age = (localStorage.getItem("age")) ? localStorage.getItem("age") : null;
You can define an onchange property with a callback function to set the value to a variable. Then pass it as params in the url or store them in localStorage.
Related
I am trying to send a value to an based on a selection from a dropdown list such as . I want to fetch the value of possiblePhone.id and send it to .
<script>
function copyTextValue() {
var text1 = document.getElementById("source").value;
document.getElementById("destination").value = text1;
}
</script>
<div>
<select th:field="${possiblePhones}">
<option value="0">select phone</option>
<option id="source" onselect="copyTextValue()"
th:each="possiblePhone : ${possiblePhones}"
th:value="${possiblePhone.id}"
th:text="${possiblePhone.model}"></option>
</select>
</div>
<td><input type="text" id="destination"> </td>
For example, if "Samsung" is selected then "1" should be send to the input field and so on. Actually, i do not get any output.
<select id="source" onchange="copyTextValue()">
<option value="0">select phone</option>
<option value="1">samsung</option>
<option value="2">something</option>
</select>
The id="source" attribute should be in <select> element, also change onselect to onchange and move it to <select> element too.
Codepen: https://codepen.io/anon/pen/WVxLpz
You can achieve this by setting the listener to the select element and then query the selected option value.
I made a minimal example with two brands:
<script>
function copyTextValue() {
var e = document.getElementById("select");
var val = e.options[e.selectedIndex].value;
document.getElementById("destination").value = val;
}
</script>
<div>
<select onchange="copyTextValue()" id="select">
<option value="0">select phone</option>
<option value="1">Brand 1</option>
<option value="2">Brand 2</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
one of the simple thing you have to observe here is that you have to capture the event when the dropdown is selected, and pass the current dropdown reference to your method.
<script>
function copyTextValue(selectedOption) {
if(selectedOption.selectedIndex <= 0){
document.getElementById("destination").value = '';
return;
}
var selectedOptionValue = selectedOption.value;
document.getElementById("destination").value = selectedOptionValue;
}
</script>
<div>
<select onChange="copyTextValue(this);">
<option value="0">select phone</option>
<option value="1">select first phone</option>
<option value="2">select second phone</option>
<option value="3">select third phone</option>
<option value="4">select fourth phone</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
here you are also trying to avoid to pass any value to the textbox when the first element is selected. #kryptur's answer is also correct, but this is simpler.
You're using Thymeleaf. For these you to create a form to send you data to the server.
Follow this link for documentation for your exact problems.
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#creating-a-form
As Frameworks like Thymeleaf usually store state on the server which means you update server first - and then your UI gets updated.
what value return is the value of the select field what you need to do is get the text of selected option i.e
function copyTextValue() {
var selectNode = document.getElementById("source");
enter code here
document.getElementById("destination").value =
selectNode .options[selectNode .selectedIndex].textContent;
}
I am building a fairly complex form-- I need to copy some data between one and another and I am using jQuery to do this. The only road block I am running into is setting the state.
I have two drop downs, one us using the full state name as the value and the other is using the state abbreviation as the value. The names are the same-
so on form 1 it looks like
<option value="Illinois">Illinois</option>
and form 2 it looks like
<option value="IL">Illinois</option>
Each form has its own unique css selector. How can I set the selected value of form 2 to match what is in form 1 using jQuery?
I do not have any control over the forms, just need to manipulate the input. Have tried using a name selector in jQuery, but I'm not having any luck.
Thank you.
You can do something like this
<select id="fullName">
<option value="Maryland" data-abbr="MD">Maryland</option>
<option value="Illinois" data-abbr="IL">Illinois</option>
<option value="Delaware" data-abbr="DE">Delaware</option>
</select>
<select id="abbr">
<option value="MD">Maryland</option>
<option value="IL">Illinois</option>
<option value="DE">Delaware</option>
</select>
And your jQuery
$('body').on('change', '#fullName', function(){
var abbr = $(this).find('option:selected').data('abbr');
$('#abbr').val(abbr);
});
Try this
<form id="form1" name="form1">
<select name="states" onchange="changeselect(this)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</form>
<form id="form2" name="form2">
<select name="states">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3">option3</option>
<option value="opt4">option4</option>
<option value="opt5">option5</option>
</select>
</form>
function changeselect(elem)
{
var value1 = $(elem).val();
$('#form2 select option').removeAttr('selected');
$('#form2').find('select option').each(function(){
var value2 = $(this).html();
if(value1 == value2)
{
var selected = $(this).attr('value');
$('#form2 select').val(selected);
}
});
}
If you create 2 arrays which exactly correspond with one another:
var StateNames = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
var StateAbbreviations = ['AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY'];
You can:
get the value from the first option list;
find that value's index in the first array; (hint: use indexOf)
use the same index to find out what the corresponding abbreviation is in the second array;
use the returned abbreviation to locate the correct option in the second option list
I'm having a rather different structure of HTML and I am trying to get the selected value of a dropdown list as seen in the below code:
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker"
data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
My code returns null.
I want to get 2 as my value. As you can see, there's no value in the selected attribute.
var quantity = document.querySelector(".quantityDropdown select").getAttribute("selected");
How do I get the value 2 that's outside the option tag?
You should get the option tag, like this:
var quantity = document.querySelector(".quantityDropdown select option:checked");
You could use checked also for checkbox and radio.
This will give you the value of the selected item:
quantity = document.querySelector(".quantityDropdown select").value;
However if you want the actual content of the selected item (i.e. the text shown) outside of the option tag, use:
var quantity = document.querySelector(".quantityDropdown select")[document.querySelector(".quantityDropdown select").selectedIndex].innerHTML;
Use document.querySelector(".quantityDropdown select").selectedIndex
To get the selected option value you need to use two properties on the select element: options and selectedIndex to get the html option element, then you can get the value.
const dropdown = document.querySelector('.cart-quantity-picker')
console.log('selectedIndex', dropdown.selectedIndex)
console.log('options', dropdown.options)
console.log('selected', dropdown.options[dropdown.selectedIndex].value)
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker" data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
in case you need the get the 'value' :
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selValue = dropdown.options[dropdown.selectedIndex].value;
But if you want to get the text ΝΟΤ the value , you do:
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selText = dropdown.options[dropdown.selectedIndex].text;
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
For getting the value you can use
document.querySelector('#qtySelect option:checked').value;
For getting the actual text inside the option you can use
document.querySelector('#qtySelect option:checked').text;
I want to check if a selectbox has selected an item or is empty. If option is selected no problem, I can use
$('main_user_selector_selectbox').find('option:selected').val() to get the value or $('main_user_selector_selectbox')find.('option:selected').text() to get the text.
Issue is, when nothing is selected I always receive the information of first option.
<select class="main_user_selector_selectbox" name="main_user_select_box">
<option value="US20160622053653am"> Beckenbauer, Franz </option>
<option value="US20160618044520am"> Engel, Laura </option>
<option value="US20160618094232am"> Gonzaga, Bengie </option>
<option value="US20160623055042am"> Neureuter, Walter </option>
<option value="US20160618050746am"> Rosenberger, Trude </option>
<option value="US20160622102555am"> Schuhmacher, Michael </option>
<option value="US20160618063016am"> Tinay, Decebil </option>
<option value="US20160615115928am"> Weiss3, Katrin </option>
</select>
I tried this script with datatables to receive some information to allow or disallow selection of rows in datatable.
var table = $('#rights_grid').DataTable();
table.on( 'select' , function () {
var user_id = $(".main_user_selector_selectbox").find('option:selected').val();
alert(user_id);
}
)}
Add an empty value as the first item in your select box
<option value=""></option>
Now you can simply check for the value of the select box. It will return nothing if none is selected.
$('.main_user_selector_selectbox').val()
I have html form with few drop down selections, i used same form for editing data,
Now to edit data in any row of table, i had created AJAX request, once row is selected and user click on edit, AJAX get all values of that specific row with ID.
My html form have some input elements and select element,
I can show value in input element with below code,
in my html element with id - user_name is input type, so i can see data value in box,
But element with id - user_status is selection type, where i have options Enable and Disable,
success:function(data){
var objData = jQuery.parseJSON(data);
$("#user_name").val(objData.user_name);
$("#user_status").val(objData.user_status);
}
This is my HTML select code,
<select name="is_manager" id="user_status">
<option style="width:auto">--Select Status--?</option>
<option style="width:auto">Enable</option>
<option style="width:auto">Disable</option>
</select>
How can i show AJAX return value ENABLE in selection option when i click Edit row, In short i want to see existing value in selection element.
Thanks,
Added option value in below selection list which are same as option Text
<select name="is_manager" id="user_status">
<option style="width:auto" value="">--Select Status--?</option>
<option style="width:auto" value="Enable">Enable</option>
<option style="width:auto" value="Disable">Disable</option>
</select>
And then in jquery you can use below code to set existing value as selected
$("#user_status option[value="+objData.user_status+"]").attr("selected","selected")
Hope this helps you
I am saying it would be good if you have some value property set for all the options like
<select name="is_manager" id="user_status">
<option style="width:auto" value="0">--Select Status--?</option>
<option style="width:auto" value="1">Enable</option>
<option style="width:auto" value="2">Disable</option>
</select>
Then if you get value as '1' or '2' from the server side then you can use the way you have written $("#user_status").val(objData.user_status);
If you are getting only text as 'Enable' or 'Disable' then you can use
var user_status = $('#user_status);
user_status.val(user_status.find('option: contains('+objData.user_status+')').val()));
If you are not using value property then create value property in options like
<select name="is_manager" id="user_status">
<option style="width:auto" value="0">--Select Status--?</option>
<option style="width:auto" value="Enable">Enable</option>
<option style="width:auto" value="Disable">Disable</option>
</select>
Now in this case you normal code which you have written will work.
Use this
$('#user_status>option[value="'+objData.user_status+'"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="is_manager" id="user_status">
<option style="width:auto" value="0">--Select Status--?</option>
<option style="width:auto" value="Enable">Enable</option>
<option style="width:auto" value="Disable">Disable</option>
</select>