I am trying to create a simple HTML question form with drop down menu options. After the user selects the answer choices I want them to hit submit and the form just updates the page with the answers selected. I don't want the answers to be uploaded to a database, just simply want the answers to be displayed/page updated (eg the drop down menus are no longer active).
This is what I have:
<label for="InputOne">Input One</label>
<select id="InputOne">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<label for="InputTwo">Input Two</label>
<select id="InputTwo">
<option val="1">a</option>
<option val="2">b</option>
<option val="3">c</option>
<option val="4">d</option>
</select>
<input type="submit" value="Submit">
</form>
so for instance if a person selects "2" and "c" from the drop down menu and hits submit, how do i get the page just to update so now the text displayed "Input One 2 Input Two C" without the drop down menu and submit buttons active/displayed. thank you.
Related
I have some issue with this:
<select name="whatever">
<option value="pizza">pizza</option>
<option value="pasta">pasta</option>
<option value="sandwich">sandwich</option>
<option value="cheese">cheese</option>
</select>
Select control always when i "run" it show me as first in drop-down menu a pizza and that mean a pizza is selected by default. So, how i can change this if i want to post cheese to be a default(current active in drop-down)
This down is just a example how i want to work my select, you see down a placeholder=5 , that mean this number control will by default use a 5 and i want to do the similar thing with my select control.
<input type='number' placeholder=5 min=0 max=10 step=1>
Thank you!
You simply just put the attribute of selected on to the option you want as your default.
You can use a JavaScript function to get the value from your table and assign this value as the selected option of the drop-down. The options for a select drop-down are identified by an index starting at 0.
In the demo below, I've used buttons to call the JS function. Click on the button to change the selected option:
var sel = document.getElementsByName("whatever")[0];
function defaultOption(option) {
sel.options[option].selected = 'selected';
}
<button onClick="defaultOption(0)">pizza</button>
<button onClick="defaultOption(1)">pasta</button>
<button onClick="defaultOption(2)">sandwich</button>
<button onClick="defaultOption(3)">cheese</button>
</br>
</br>
<select name="whatever">
<option value="pizza">pizza</option>
<option value="pasta">pasta</option>
<option value="sandwich">sandwich</option>
<option value="cheese" selected>cheese</option>
</select>
<select class="form-control" id="rating" name="rating">
<option value="5">5</option>
<option value="4">4</option>
<option value="3" selected>3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
I have a dropdown menu that I'm using to make a form using Flask.
Is there anyway to allow the user to keep selecting dropdown options?
Meaning to say, each time the user chooses an option another dropdown menu is rendered below and the previous one will display an [x] to delete that selection.
So, if the user wants to select multiple options they can do so, and I can have the flask app output these selections as a list
For example, I have
<label class="form">Menu</label>
<select id="selection" name="select" required>
<option value="" selected>--Select an Option--</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
...
</select>
This would only give a a drop down menu when the user clicks on the input box with their mouse. But I want to give them the option to be able to type in the input box such as:
If the user types in option1 it would direct them to the "Option 1" drop-down menu, etc. And if the user types in any other words that are not included in the drop-down list it would show "Invalid Input".
Yes there is! A text input with a list attribute:
<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Boston">
<option value="Cambridge">
</datalist>
EDIT: for the autocomplete, try Bootstrap Typeahead
HTML5 validation not working On OnChange select box form Submit .
If i have use submit button validation work ,
but i need onChange form submit and html% validation
<form action="do.php" method="post">
<select id="myselect" name="myselect" onchange="this.form.submit()" required="">
<option value="">
select
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
<option value="4">
Four
</option>
</select> <select id="myselect2" name="myselect2" onchange="this.form.submit()" required="">
<option value="">
select
</option>
<option value="5">
five
</option>
<option value="6">
six
</option>
<option value="7">
seven
</option>
</select>
</form>
this was condition On change form submit with out validate other select box .
please help .
HTML5 validation applies only when the form is submitted using HTML constructs. If it is submitted with a script, no HTML5 validation takes place. Thus, you need to code your own validation in JavaScript.
Reference: HTML5 LC, 4.10.22.3 Form submission algorithm, where item 4 list the conditions for performing validation, including the requirement that the “submitted from submit() method flag” is not set.
You may use this 'hack' http://jsfiddle.net/MGhA7/.
You specify <select required="required"> so value can not be empty, and then add <option value="" selected disabled>empty</option> so default value is empty and can not be selected again.
EDIT: a little more explanation.
This way, form can not be submitted because "selected" value is actually "" (empty), which is not allowed by "required" attribute; and when user changes selection, the default value can not be selected again because of "disabled" attribute.
Imagine that I have a fictional website where a user can sign for some courses. Let's say that there are 3 different kinds of courses: mathematics, languages and biology. User can choose multiple courses in one form.
I would like to have a form where a user chooses if he wants a course from mathematics or languages or biology and then he can choose the one he wants.
User will select what kind of course he wants,
<select type="text" name="course">
<option value="0">mathematics</option>
<option value="1">languages</option>
<option value="2">biology</option>
</select>
and according to what user selected there would be another select with specific courses of that kind. So if user chooses mathematics, next select would be filled with courses from mathematics
<select type="text" name="topic">
<option value="0">algebra</option>
<option value="0">calculus</option>
...
</select>
In the end there would be a button which will recreate this so the user can add as many courses to his application as he wants.
Can you give me any hints how to do this? Or is there some better way, how to do this?
Thanks
Some pseudo-code / diagram which might help
// Display Main Options (Math, Lang, Bio)
<select type="text" name="course">
<option value="math">mathematics</option>
<option value="lang">languages</option>
<option value="bio">biology</option>
</select>
// OnChange of the Main Options, check which option is checked
// Display Secundairy Options menu according to the chosen Main Option
// Note the IDs of these selects and the values of the Main Options
<select type="text" name="subCourse" id="math">
<option value="SimpleAlg">Simple Algebra</option>
<option value="AdvAlg">Advanced Algebra</option>
<option value="xx">...</option>
</select>
// OR
<select type="text" name="subCourse" id="lang">
<option value="BasEng">Basic English</option>
<option value="AdvEng">Advanced English</option>
<option value="xx">...</option>
</select>
// OR
<select type="text" name="subCourse" id="bio">
<option value="xx">...</option>
</select>
// Display button which adds the selected course to a list
// OnClick on the button, update a shown list of selected courses
<ul id="selectedCourses">
<li id="BasEng">Basic English [<a onclick="removeCourse()">X</a>]</li>
</ul>