I have a list of people sorted by 2 parameters that I insert in a select.
How can, when someone select a parameter, maintain this one selected when he refresh or change/return on the page?
I see some issues on some post over the internet, but most of them use JQuery, and I don't want to use it.
The code is like this:
<select name="idactivity_contact[]" id="_activity" multiple="multiple" size="10" style="width:150px;">
<option disabled="disabled" style="background-color:#dddddd;font-weight:bold;">Shipbroking</option>
<option value="1">Newbuilding</option>
<option value="2">Sales and Purchase</option>
<option value="3">Bulk</option>
</select>
The code is generated in PHP actyally manually, but i will do a function later
One way is to use javascript and localStorage:
document.getElementById("_activity").onchange = function() {
localStorage.setItem('selectedtem', document.getElementById("_activity").value);
}
if (localStorage.getItem('item')) {
document.getElementById("selectedtem").options[localStorage.getItem('selectedtem')].selected = true;
}
You can also use cookies or session in your sever side as well.
Most direct approach would be to store the values of $_POST[] in $_SESSION[].
Related
I have a select element and no matter what I try, the option values are blank. The number of options in the drop down is correct, but they are blank. Here is the html:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC"></option>
<option value="Vanguard"></option>
</select>
I'm assuming some css from another library is overriding the standard select>option css. I've tried commenting out each linked library one at a time but no joy. I've tried adding a .clear-css class to the option like this:
.clear-css {
all:unset;
}
and append it to all options using jquery just before it is used, like this:
$('option').addClass('clear-css');
Still blank.
I've also tried
.clear-css {
all:initial;
}
Still blank.
I also tried adding the clear-css class to the select element, but that causes the whole select element to disappear.
Any suggestions?
You need to include the values for each option between the opening and closing <option> tags. The value doesn't need to match the text content. In fact, it's usually better to remove any special characters and even spaces when working with external APIs, like this:
// This JS is just for the sake of example, to log the new value with each change
const select = document.getElementById('accountBrokerageName');
select.addEventListener('change', () => console.log(select.value));
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="" disabled selected>Choose an option...</option>
<option value="interactive-brokers-llc">Interactive Brokers, LLC</option>
<option value="vanguard">Vanguard</option>
</select>
Select values must be within the actual <option> tags:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC">Interactive Brokers, LLC</option>
<option value="Vanguard">Vanguard</option>
</select>
I want to set the select option as how the input is.
In input tag we can do this:
<input type="number" max="100" min="0"/>
And now I want to do this in select option:
<select>
<option max="100" value="100">100</option>
<option max="200" value="200">200</option>
<select>
The reason is I just want to ensure if the value which is selected by user is appropriate as real value.
I don't fully understand what you are asking, but I'm going to assume you are asking whether there are alternatives to using select.
If you are looking to allow users to select a range of numbers (eg. 100-200), you can choose to use a Html Slider Bar. There are plenty of simple tutorials out there that teaches you how to use a slider bar.
An example of a HTML5 Slider Bar Tutorial.
Otherwise, if you want a fixed value (eg. 100 OR 200), a select option will work perfectly fine.
I find the way to check is the selected option correct in case when not every options in the template are corrects.
You have to use CustomValidity, like this:
<select id="select">
<option value="100">100</option>
<option value="200">200</option>
<select>
But, because of some reason now the only 100 is valid
let select = document.querySelector('#select');
let setSelectValidity = function () {
if (select.value !== 100) {
select.setCustomValidity('The only 100 is available');
else {
select.setCustomValidity('');
}
}
select.addEventListener('change', setSelectValidity);
What's happening is that I'm using a payment processor not under my control, and I need to pass it the values of shipping, and the values of shipping per additional item.
Since they're packaged separate, we're going to charge the same amount per additional item, so instead of coming up with two identical fields that the user has to fill out, I'm trying to create one field that assigns the value of shippingf and shipping2f
Below is an example of one of my many attempts. Another attempt has been just putting name="" twice, and that didn't seem to work either.
<select name="shippingf, shipping2f" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
any help on this matter would be fantastic.
Thanks!
Not possible with just HTML.
You could either
use JS to change the value of a type="hidden" element in the form, or
server-side (assuming PHP), before you include your payment processor, add $_POST['shipping2f'] = $_POST['shippingf'];. Just keep shippingf in the HTML.
Since the OP said option 2 won't work, here's an example for option 1:
HTML:
<select name="shippingf" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
<input name="shipping2f" type="hidden"></input>
jQuery:
$("select[name=shippingf]").change(function(){
$("input[name=shipping2f]").val($(this).children(':selected:first').val());
}).change();
Demo: http://jsfiddle.net/nb8j06qb/
or <====
HTML:
<select id='sf' name="shippingf" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
<input id='s2f' name="shipping2f" type="hidden" value="12"></input>
Vanilla JS:
document.getElementById('sf').onmouseup = function(){
document.getElementById('s2f').value = this.options[this.selectedIndex].value;
};
Demo: http://jsfiddle.net/nb8j06qb/1/
i have select field with multiple options:
<option value="lotr">Lord of the Rings</option>
<option value="harry_potter">Harry Potter</option>
when it is submitted value "lotr" or "harry_potter" is sent, depended on users choice.
However from time to time i need to set options in back end, including previously chosen option. So i make those options look like this:
<option selected="lotr">Lord of the Rings</option>
<option value="harry_potter">Harry Potter</option>
Form is displayed correctly, i can see "Lord of the Rings" in the input, but when i try to submit it, also there is "Lord of the rings" in the params. Point is i need it to be "lotr". I have no idea what i do wrong, maybe there is another way of making selected option?
You should set selected="true" and value="lotr" as below
<option selected="true" value="lotr">Lord of the Rings</option>
Use this
<option value="lotr" selected >Lord of the Rings</option>
How do I create a html drop down list that refreshes back to the option disabled tag once an individual has selected an option value, has viewed their selection and has decided to go back to make another option value selection.
html:
<form>
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>
<option value="LINK">Ingham County (Google Map / PDF)</option>
<option value="LINK">Clinton County (PDF)</option>
<option value="LINK">Eaton County (PDF)</option>
</select>
</form>
The -select name- tag renders the user to a URL which opens in the same window.
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
As it currently stands if an individual makes a selection from the list, views their selection (opened in the same window) and returns (to the original webpage), the drop down menu does not revert to:
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>
but remains on the option value tag selection unless they refresh/reload their browser window.
Basically, you can't do it without javascript.
I don't know how much you know, so I'll assume you have no prior knowledge of javascript.
The following should do what you're asking.
As you can see, I've changed the onchange attribute to call a javascript function called "ResetToDisabled" which passes the DropDown list as a parameter, using the "this" keyword.
<select name="URL" onchange="ResetToDisabled(this);">
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>
<option value="LINK">Ingham County (Google Map / PDF)</option>
<option value="LINK">Clinton County (PDF)</option>
<option value="LINK">Eaton County (PDF)</option>
</select>
<script type="text/javascript">
function ResetToDisabled(DropDown) {
var TargetIndex = DropDown.selectedIndex;
DropDown.selectedIndex = 0;
window.location.href = DropDown.options[TargetIndex].value;
}
</script>
What is happening here, is that I'm creating a javascript function called "ResetToDisabled" which takes in an object (in this case we can assume it will be a drop down list) as a parameter.
This function, creates a temporary variable called "TargetIndex" and sets it's value to be the selected index of the drop down.
Then it sets the drop down list's selected index to 0 (the first option).
Then it will execute your line of code, where you open a new web page. However since you've reset the drop down back to the first option, when you click back, it will remember that as the option that was selected.
I also feel that I should add. It looks like you're trying to achieve the same behavior that a lot of sites use for their menus; if that's the case, you may want to search "CSS Drop Down Menu" as you'll find it very difficult to change the look of an select drop down if you try to do that later on.
you do not need to use jquery for this!
html file;
<form>
<select name="URL" onchange="changeme(this)">
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>
<option value="LINK">Ingham County (Google Map / PDF)</option>
<option value="LINK">Clinton County (PDF)</option>
<option value="LINK">Eaton County (PDF)</option>
</select>
</form>
js file;
function changeme(mselect ) {
for (var i = 0; i < mselect.options.length; i++) {
if (mselect.options[i].selected == true) {
mselect.options[i].setAttribute('disabled', 'disabled');
}
else {
mselect.options[i].removeAttribute('disabled');
}
}
}
Depending how they are navigated back to the page, you should be able to just have a little bit of Javascript setting the selected index on page load.
YourHTMLElement.selectedIndex = 0;
I will note however, for it to still have the same value selected it sounds like you are navigating back with history.back(); and this will likely not perform the usual onload events.
I did however find the answer here helpful for such an issue though. It would allow jQuery's document ready event to fire which means you could link it up to reset the selectedIndex to 0.