<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
Related
I am working on a form contains a drop down list and use node js. When I submit the form, if there is an error, the selected drop down list is back to unselected state. I know how to repopulate textbox input, so that it won't clear after submission. So, I used value="<%- deliveryInput%>, but it doesn't work in the same way for a drop down list. It seems that 'value' is not an attribute in select element. Is there any way to not clear the drop down list?
form.ejs
<label>DELIVERY TIME:</label>
<select name="delivery" value="<%- deliveryInput%>">
<option value="">Select Days</option>
<option value="1 Day">1 Day</option>
<option value="2 Day">2 Day</option>
<option value="3 Day">3 Day</option>
<option value="4 Day">4 Day</option>
</select>
index.js
delivery =req.body.delivery;
if (!errors.isEmpty() ||productQuantity){
res.render('form',{
errors:errors.array(),
nameInput:name,
emailInput:email,
phoneInput:phone,
addressInput:address,
cityInput:city,
postInput:post,
provinceInput:province,
product1Input:product1,
product2Input:product2,
product3Input:product3,
deliveryInput:delivery,
productError: "At leat buy one of the three products"
})
I have this other issue where I have multiple dropdowns which have the same jquery function. When I select the 1st project dropdown the the corresponding task dropdown gets selected. But when i have multiple dropdown only the first task drop down gets selected. when there are multiple dropdowns when the project is selected in the dropdown i want the corresponding task dropdown to be updated.
My Task dropdown look like this
<select id="task_id" name="tasks_id[]" size="8" multiple="1">
<optgroup label="01 CONSULT" >
<option value="1">1a Rules</option>
<option value="2">1b Vacation</option>
<option value="3" >1c Meetings</option>
</optgroup>
<optgroup label="02 SALES" >
<option value="12"> 2c Internal</option>
<option value="13"> 2d External </option>
</optgroup>
</select>
Html code
<%= select_tag "task_id[]", options_from_collection_for_select([unspecified_task], 'id', 'name', entry.task_id || unspecified_task.id) + grouped_options_for_select(active_task_options, entry.task_id.to_s) %>
I want to know how to write the jquery so that when their are multiple dropdowns and a project is selected the corresponding task drop down will be populated.
This could be because you have same id or name for multiple dropdowns.
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.
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>
I am trying to swap all the options between two Harvest Chosen select boxes. The scenario is I want to record details of a phone call. The call can either be inbound or outbound. If the call is outbound the I populate a select box (caller) with a list of possible values of those users that can make outbound calls and a second box (callee) with a list of possible values of those users they can make calls to. If the user updates the call type to be inbound then I want to swap the select boxes around so that the callee's are in the caller box and vice versa.
I very nearly have this working except each time I change the call type it keeps appending the values onto the end of the select options in each respective caller/callee select rather than completely clearing them and replacing all values.
Would appreciate some help as to why this is happening.
See http://jsfiddle.net/RyHFK
HTML
<label for="call_type">Call Type:</label>
<select name="call_type" id="call_type" class="chosen">
<option value="OUTGOING">Outgoing</option>
<option value="INCOMING">Incoming</option>
</select>
<label for="caller">Caller:</label>
<select name="caller" id="caller" class="caller chosen">
<option value="Caller 1">Caller 1</option>
<option value="Caller 2">Caller 2</option>
<option value="Caller 3">Caller 3</option>
<option value="OTHER">Other</option>
</select>
<label for="caller">Callee:</label>
<select name="callee" id="callee" class="callee chosen">
<option value="Callee 1">Callee 1</option>
<option value="Callee 2">Callee 2</option>
<option value="Callee 3">Callee 3</option>
<option value="OTHER">Other</option>
</select>
The way it's written, you are appending to the same arrays every time there is a change. Move your calleeOptions and callerOptions variables inside your change handler:
// on call type change
$('#call_type').change(function(){
var callerOptions = [];
var calleeOptions = [];
Here's a jsFiddle.