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/
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>
Is it possible for <select>-lists to reference the same list of options, similar to <input> with <datalist>?
I generate a list of several entries, where (among other things) the user selects a value of a dropdownlist. The options in this list are the same for each entry, so I would prefer it, if the list of options doesn't need to be re-added for each dropdownlist.
I can't use <input> with <datalist>, since the user may only choose from available entries.
you could do this using jquery easily,
<datalist id="mylist">
<option value="a">
<option value="b">
<option value="b">
</datalist>
<select class="someSelect">
<select class="someSelect">
$(".someSelect").html( $("#mylist").html() );
this would replace all your select list from the datalist
This is not realy the good answer. There is a big difference between 'datalist' and 'select' which for as far as I read till yet stays unspoken : in a select the 'value' can be different from the visualized 'innerHTML', which is not the case in a datalist. So what we need is a kind of 'select' with an attribute like 'selectlist="countries' the selectlist then would look like this :
<selectlist>
<option value='1'>Belgium</option>
<option value='2'>France</option>
</selectlist>
and can be reused in more then one 'select' and send the value back to the server instead of the innerHTML.
What HTML attribute will prevent form data from posting if two inputs have the same name attribute?
<form>
<select name="amount">
<option value="100">$100</option>
<option value="50">$50</option>
<option value="10">$10</option>
<option value="1">$1</option>
</select>
Other: <input type="text" name="amount">
</form>
Edit:
The reason I need two with the same name value is I'm using the jQuery to show() and hide() functions for a select and input.
There is no such HTML attribute. It's perfectly legal for two elements to have the same name, and both values will be included in the data that is posted.
The values will be sent as two separate items, so the posted data from the form in the question could for example look like this:
amount=10&amount=42
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[].
newbie here, so thanks in advance for help! I have a Wordpress site with multiple taxonomies. I'd like to create a very simple form with two select boxes, one for each taxonomy. Then I'd like to use an HTML form with the get method to display posts matching the criteria they requested from the select boxes.
I'm able to do this easy enough if each of the two select boxes are filled out, I get a permalink something like:
testsite.com/?tax1=value1&tax2=value2
(ugly, I know, but it works).
What I can't figure out is what to do if they don't fill out both select boxes. Ideally it would only give the permalink for the one they fill in, so either:
testsite.com/?tax1=value1 or testsite.com/?tax2=value2
But instead I'm getting
testsite.com/?tax1=value1&tax2=Select+tax
here is my HTML
<form action="http://www.testsite.com/" method="get">
Season: <select name="season">
<option>Select season</option>
<option value="">Select season</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select><br/>
Vacation type: <select name="vacations">
<option value="">Select vacation type</option>
<option value="beach">Beach</option>
<option value="ski">Ski</option>
</select><br/>
<input type="submit" />
</form>
I realize the answer is probably simple but I'm banging my head against a wall so any help is very very much appreciated. Thank you!
You can still pass an empty parameter like
testsite.com/?tax1=&tax2=whatever_was_selected
or
testsite.com/?tax1=whatever_was_selected&tax2=
but, you would have to preselect one of the options for them like
<option selected="selected" value="">Select vacation type</option>
This way if the form is submitted and the user didn't change their selection it should still pass the parameter of but without a value.
You can put some Javascript or Php validation to make sure both the dropdown are selected before submitting the form.