currently working on an assignment and trying to code it to have titles as shown in the picture. Current code looks like this:
<section for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option selected disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option selected disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>
Picture of what I need for formatting, Hogwarts and Other is how I want it to look
Looks like you had it, just have to take the selected off of the 2 disabled options!
<label for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>
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 am trying to hide the placeholder text in a dropdown menu from showing up as a selectable option. I have searched other options on stack overflow and tried the following solution but none have worked:
<option style="display:none" >Select Stop</option>
<option value="" disabled selected hidden >Select Stop</option>
<option value="" disabled selected style="display: none;">Select Stop</option>
My code looks like this which WORKS in stackoverflow but not when I put it into my site using latest version of chrome...
<select>
<option value="" disabled selected hidden>Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
Not sure what are you actually trying achieve, to hide the select or option simply add disabled to them, see below, i have 2 select, one with option disbaled other one the entire select disabled
<select>
<option value="">Select Stop</option>
<option value="home" >home</option>
<option value="school" disabled>school</option>
<option value="office" >office</option>
</select>
<select disabled>
<option value="" >Select Stop</option>
<option value="home" >home</option>
<option value="school" >school</option>
<option value="office" >office</option>
</select>
Maybe you might want to add some JQuery into your file
$(function() {
$('.location').find('option:contains(office)').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='location'>
<option value="select stop">Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
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!
There is a requirement in my project like.,
I have select box in desktop view and in mobile only options has to be displayed.
I got stuck how to display all the options without selecting select box .
<h3>Desktop View</h3>
<select name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<br/><br/><br/><br/>
<h3>Mobile View</h3>
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
Thanks
Demo
Just give multiple for your select box and it'll display like that...
<select multiple name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>