I have a select option dropdown with a default set that has no value, is disabled, and set as selected. The first time a person runs through the form they pick their selection. The selection is saved to local storage. They run through some questions then are reverted back to that initial form where all types input values set to hold the values saved in localStorage. However, I am having trouble setting the select option dropdown to the value that was saved in the local storage. I also have a button that allows the person to clear the session, thus reseting all the form fields. Below is a sample of the code.
HTML:
<select id="gender" name="gender" required="" aria-required="true">
<option value="" disabled selected>Choose your gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Gender</label>
JavaScript to save selected value to local storage:
var gender = document.getElementById("gender");
localStorage.setItem('gender', gender.options[gender.selectedIndex].value);
JavaScript to set select option dropdown once the value is already saved, where the problem is:
document.getElementById("gender").value = localStorage.getItem('gender');
// Or this one, neither seem to work
$("#gender").val(localStorage.getItem("gender"));
Any ideas on how I can solve this?
**Update: After looking a little further, I just found that it is changing the value of the first option from "" to "Male" instead of selecting the option that has Male set as its value. But I still can't figure out how to fix it.
Related
I have a datalist that is created on the fly based on the user's selection from a group select menu. After the group is selected, the datalist is created. The datalist allows users to choose from a "dropdown" list or just start typing in the input box and have the list filtered accordingly. It is structured like this:
<div id="projectSelect">
<input type="text" name="ProjTitle" id="ProjTitle" placeholder="~ select project ~" list="projectList" autocomplete="off" value="">
<datalist id="projectList">
<select id="projectOptions">
<option data-projid="390" value="Project 1">Project 1</option>
<option data-projid="391" value="Project 2">Project 2</option>
<option data-projid="392" value="Project 3">Project 3</option>
</select>
</datalist>
</div>
In the default use case, the user double-clicks on the input box, a drop down appears, a project is selected (clicked) and the rest of the page (a report) is populated. This all works great.
In the alternate use case for the page, the groupid and a particular projid are passed to the page via a stored browser value.
In this case, the presence of the 'groupid' triggers the group selector just fine and the datalist element is populated just as if the user had made the group choice. All good so far.
What I'm having difficulty doing is interacting with the datalist via jquery to select the item matching the projid that is passed AND displaying the resulting title of the project in the input control. The title of each project is the "value" of each option.
From lots of other references I've found, the way to select an item in a datalist is to actually set the value of the associated input like this:
$('#ProjTitle').val("Project 1");
This doesn't work in my case, because the value being passed to the page is the projid that is in the data-projid value for each option and not the project title that is the "value" of each option.
One approach I thought of using for this was to select (using jQuery) all of the datalist options and then use $.each() to loop over the items and find the matching projid. If I could do this, I would then get the valueof that option and pass it to ('#ProjTitle').val().
However, when I use jQuery to select the options like this:
let $options = $(document).find('option');
$options is empty.
Are the options for a datalist not accessible with jQuery for some reason? in the Firefox developer tools the options are greyed out as if they are hidden. If they can not be accessed directly, how can I get the "value" of the option that matches the projid?
What other approach could I use to set the selected value of the datalist (based on the projid)?
Edit
I am suspicious that the dynamic loading of the content is in play here. The code to set the datalist is inside the $(function() { }) block of javascript so execution occurs after page load. Nonetheless, if I add console.log($('#ProjectList')); (or '#ProjectSelect') to the javascript I get the following in Firefox Developer Tools:
Normally, I'd be able to access all the nodes for the element.
I think the comments in the demo are sufficient to explain things, but feel free to ask any questions if you need a more details.
/* Assume this is the id passed to your page: */
const projid = 392
/*
Select the option element with a matching data-projid attr
and store the actual value for the selected option.
*/
const val = $(`[data-projid="${projid}"]`).val()
/*
Select the input that is a direct descendant of the
#projectSelect element and set the value for it
to the project name
*/
$('#projectSelect > input').val(val)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div id="projectSelect">
<input type="text" name="ProjTitle" id="ProjTitle" placeholder="~ select project ~" list="projectList" autocomplete="off" value="">
<datalist id="projectList">
<select id="projectOptions">
<option data-projid="390" value="Project 1">Project 1</option>
<option data-projid="391" value="Project 2">Project 2</option>
<option data-projid="392" value="Project 3">Project 3</option>
</select>
</datalist>
</div>
I have a simple HTML select with options. What I do is - set an option of that control as selected just after the page is loaded. My question is - how can I do that so the users won't see the first option of the select and will see the select with the value from the DB set. Here's the example:
<select id="simpleSelect">
<option value = "1">One</option>
<option value = "2">Two</option>
<option value = "3">Three</option>
</select>
Setting the value as follows:
$("#simpleSElect").val(2);
Now the users will see the select with selected option "One" and it will flash changing the option to "Two" once the jQuery code is executed. This flashing does not look good and I'm curious if there's a way to prevent this flashing and show the users the select with directly "Two" selected.
Thanks.
Here is my drop-down form. I have searched and still do not understand how to have a selected drop-down value remain after the cart is updated. Maybe it is because of the PHP in the name value? I would greatly appreciate any help. I believe this has to be done with javascript, but again I am unsure.
<select id="quantity" name='.$cart[$x]['ASIN'].'>
<option value=1>1</option>;
<option value=2>2</option>;
<option value=3>3</option>;
</select></td>';
Thanks,
Eric
As I understand it, you want the selected item to remain selected after the form is submitted and the page is refreshed... in this case you will need to do something like this:
<select name='mySelect'>
<option value=1 <?=(isset($_POST['mySelect'])&&$_POST['mySelect']==1?'selected':'')?>>1</option>
Basically for each option you need to check if that select has a value, and if that value matches the current option ... if so, echo 'selected' which will set that option to the current displayed choice.
Unless, you have a situation where you're on like a profile page or something, and you want the user to be able to see his current setting, and still be able to change it... then you would need to do something similar but replace $_POST['mySelect'] with the data from the database. So if you have an array of user data, $data, and one of those values is 'quantity' that corresponds with the select, then you would need:
<option value=1 <?=($data['quantity']==1?'selected':'')?>>1</option>
Is it possible to set the selected option of a form via a previous selected option in an other form?
The select option is like this, here 60x60 is selected.
<select id="pa_afmetingen-vierkant" name="attribute_pa_afmetingen-vierkant">
<option value="">Kies een optie…</option>
<option value="m001">40x40</option>
<option value="m002">50x50</option>
<option selected="selected" value="m003">60x60</option>
<option value="m004">70x70</option>
<option value="m005">80x80</option>
<option value="m006">100x100</option>
<option value="m007">125x125</option>
<option value="m008">150X150</option>
</select>
This form gets send to a new page, on this new page there is an exact duplicate of this form, I want this duplicate form to have the same option selected as was selected in the previous page.
My best bet would be to store the option in a variable , and via javascript select the option that matches the stored variable.
The form is submitted via POST
I don't really know what variable to use, nor how to target the option.
Solutions requiring Jquery are not a problem.
Kind regards,
There are a few ways of implementing it.
One solution could be that you get the selected option in JS and pass it to the url like http://www.myurl.com?selectedOption=3. Then at the other page you could get that selected and trigger a select to your menu to select that value.
Get Selected Option's value
var selectedOption = $('#pa_afmetingen-vierkant option:selected').attr('value');
Retrieve Selected Option's value from URL
Refere Here
Set Selected Option in the NEW select menu
$('#pa_afmetingen-vierkant-NEW option[value='+ selectedOption +']').prop('selected', true);
Another solution could be that you store temporary the selectedOption in the localStorage and then you delete it from there.
I have a select that looks like this:
<select id = "baz"
name = "Baz"
size = 1>
<option value="A1"> foo</option>
<option value="A2"> bar</option>
...etc
<option value="A99"> bat</option>
</select>
I've pulled this code from Firebug (and edited it), as the options themselves are read from the server by a CGI #include.
The value of the select is eventually read by JavaScript as follows:
var $input_baz = $("#baz");
...
var baz_pl = $input_baz.val();
Problem: the select is in a hidden div, and no selections have been made, but baz_pl contains the value A1. Why is .val() returning the first entry when nothing has been selected, and is there a simple fix for this? The select appears in a popup, and I can add code to detect if the popup 'Ok' button has been clicked, but I'd rather do it properly if possible.
The first option is always selected by default. You could add a dummy entry as first one, with a value that does not occur otherwise in the list.
For example:
<option value="-1">-- Please select --</option>