I am using a bootstrap form to submit data to a php page. I want that when the user doesn't make a particular selection from the given options, the form should submit either as or as null and not "SELECT ONE". Part of the code is given below. All the other data fields follow the same logic.
<div class="form-group">
<label for="smoking">Smoking Habits</label>
<select class="form-control" name="smoking" id="smoking" required>
<option data-hidden="true">SELECT ONE</option>
<option>Smoker</option>
<option>Non-smoker</option>
</select>
</div>
Any help will be appreciated. Thanks
An <option> only uses the text content as the data to submit if there is no value attribute.
You can add a value attribute to the option element, but the value has to be a string. It can be an empty string.
There is no native way to represent null in a HTML form.
<option data-hidden="true" value="">SELECT ONE</option>
Related
Right now the search_type which JS uses later is always "people" as can be seen in the hidden input field.
How can I make it so that the selected option's value is the value tied to the name "search_type"?
<input type="hidden" name="search_type" value="people"> <!-- This obviously needs to change-->
<div class="medium-4 columns">
<select>
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
I have tried changing the name of all the options' names to search_type but this did not work. I have also tried other things, but can't figure it out. Any help would be much appreciated.
Here is the Javascript line that calls it:
search_type: $('input[name="search_type"]').val(),
Note: I am working in Zurb Foundation
Simply put, there is no need to add another input field when you already have a perfectly usable one! change your code so that the <select> includes the name attribute, like so, and get rid of the hidden input:
<div class="medium-4 columns">
<select name="search_type">
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
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/
With input of type text the attribute required is available. It is not the case for select inputs. So how to make them required ?
FIDDLE
<form>
<select required>
<option></option><!--If this is selected require pop up will appear -->
<option>test</option><!--If this is selected form will be submitted -->
</select>
<input type="submit">
</form>
You can make them required by using html5 attribute required just like below.
<select required>
<option value="">select an option</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
</select>
View Example in jsfiddle http://jsfiddle.net/88rXX/
Set a default value then on form submission check to see if that default value has changed.
If you're using the JQuery validation plug-in, try this Validate select box
You do have to remember though that just because it's validated client side, doesn't mean you shouldn't also check server side.
use it based on html 5. otherwise you can use any plugin
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
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.