Is it possible to to include multiple (or a single) <input type = hidden> nested within an <optgroup>'s <option>?
For example, I might have
<select>
<optgroup label="North America">
<option value="Canada">Canada</option>
<input type="hidden" name="capital" value="Ottawa">
<option value="United States">United States</option>
<input type="hidden" name="capital" value="Washington D.C.">
<option value="Mexico">Mexico</option>
<input type="hidden" name="capital" value="Mexico City">
</optgroup>
...
</select>
If I choose "Canada" could I get "Ottawa" and only "Ottawa" submitted also?
What you are asking for is not exactly possible, but it sounds like the result you want is...
<select name="capital">
<optgroup label="North America">
<option value="Ottawa">Canada</option>
<option value="Washington D.C.">United States</option>
<option value="Mexico City">Mexico</option>
</optgroup>
...
</select>
When the user selects "Canada" from the drop-down, the value "Ottawa" will be submitted to the server.
Related
This question already has answers here:
How do I make a field required in HTML?
(16 answers)
Closed 2 months ago.
<label for="select-choice">Birthday:</label>
<select name="select-choice" id="select-choice">
<option value="0" selected disabled>Month</option>
<option value="january">Jan</option>
<option value="february">Feb</option>
<option value="march">Mar</option>
<select name="birthday-day" id="day">
<option value="0" selected disabled>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<select name="birthday-year" id="year">
<option value="0" selected disabled>Year</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
The Sign Up or Register page is okay but I could not validate the birthday, When I try filling it on a browser I expect it to demand or require birthday option, every other input option was demanding or requiring me to input an information but if I purposely did not fill the birthday and hit the submit button it will go through just like that, please how do I validate the birthday using HTML?
You just need to add "required" to each of your selects and then just add an empty value instead of a "0" value. When you press a button, it will detect it has no value and will automatically make the select required.
<form>
<label for="select-choice">Birthday:</label>
<select name="select-choice" id="select-choice" required>
<option value="">Month</option>
<option value="january">Jan</option>
<option value="february">Feb</option>
<option value="march">Mar</option>
</select>
<select name="birthday-day" required>
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="birthday-year" id="year" required>
<option value="">Year</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
<button>submit</button>
</form>
For example, I have 3 different select options:
<select name="FirstOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select name="SecondOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select name="ThirdOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
So, when I click a button, I want to get all the values of all 3 select options and insert the values into the database.
Right now, I'm using this button with a href tag but looks like it's very wrong:
Reserve
What's the best way to do this?
Wrap the selects inside a form and put a submit button.
Add your ID as hidden fields.
Your HTML code should now be something like this :
<form method="post" action="../reservation-confirmation">
<select name="FirstOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select name="SecondOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<select name="ThirdOption">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<input type="hidden" value="" name="tour_id" >
<button type="submit" name="submit'> Submit </button>
</form>
On the server-side, process the responses by targeting
if(isset($_POST['submit']))
$FirstOption$=$_POST['FirstOption']
$SecondOption$=$_POST['SecondOption']
$ThirdOption$=$_POST['ThirdOption']
... //Add them into your database.
Remember to use prepared statements.
I'm wondering if i can divide the <datalist> into sections like <optgroup> does. Many thanks!
Codes below:
<label>Location:</label>
<select>
<optgroup label="classroom">
<option>1A</option>
<option>1B</option>
</optgroup>
</select><br>
<label>Location</label>
<input type="text" name="location" class="form-control-lg" list="location">
<datalist id="location">
<option value="Classroom">
<option value="1A">
<option value="1B">
</datalist>
<form action="/xyz.jsp">
<select required>
<option selected disabled hidden>Select one of your active items...</option>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
The issue here is, when I specify require it does not act properly because the first field is selected.. it ends up producing NULL instead of actually requiring user to enter a choice...
Anything I can do to fix this?
It is because you have to make the first option value the empty string. You will have to come with another value for your "none" option.
See also Can I apply the required attribute to <select> fields in HTML5?
This is pure HTML.
<form action="/xyz.jsp">
<select required>
<option value="" selected hidden>Select one of your active items...</option>
<option value="none">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
Does anyone know why a form field name would cause Chrome's autofill to stop working correctly? If you open the fiddle I've created in Chrome, you'll notice the Card Number field populates correctly, but not the expiry month and year. If you change the name of the BirthDate.MM select list to BirthDate.Foo and BirthDate.YYYY to BirthDate.Bar; and then and re-run, the credit card autofill works as expected. Now, an obvious suggestion would be to simply disable the bday- autofill and change the those values to "off" or completely remove the autocomplete attribute. Astoundingly, removing the autocomplete attribute or changing the bday- values to "off" on those fields then breaks the address autofill!!!
The solution to the autofill problem itself is simply change the field names. What I want to know is why? Can anyone clarify how I unwittingly poked Chrome's field name sniffing feature?
<fieldset>
<legend>Payment Information</legend>
<div><input autocomplete="cc-number" id="CreditCard_CardNumber" maxlength="16" name="CreditCard.CardNumber" pattern="\d*" required="" type="text" placeholder="Card Number" value="" /></div>
<div>
<label for="CreditCard_ExpirationMonth">Expires:</label>
<select autocomplete="cc-exp-month" id="cardExpirationMonth" name="CreditCard.ExpirationMonth" required="">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select autocomplete="cc-exp-year" id="cardExpirationYear" name="CreditCard.ExpirationYear" required="">
<option value="">Year</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
</select>
</div>
</fieldset>
Use the lower-case version of your names.
For me , using Name as name attribute is not working, autofill recognizes the field as CC !!
If I change it to name , works like a charm.
Hope this helps!