Let's say I have a page with two forms displaying multiple options as below. As it is, bootstrap will allow the user to select two options and pass both fields when the form is submitted.
But I want to force the user to select from one form only, which in my case below means the user can only select a fruit or a drink but not both.
So is there a way to highlight/select only the latest option selected by the user?
I'd like to avoid using scripts if possible.
Thank you for the help.
<form action="/orderfood" method="post" role="form">
<div>
<label>Fruit</label>
<select class="form-control" name="fruit" multiple="multiple">
{{#each food.fruit}}
<option value="{{_id}}">{{food.fruit}}</option>
{{/each}}
</select>
</div>
<div>
<label>Drink</label>
<select class="form-control" name="drink" multiple="multiple">
{{#each food.drink}}
<option value="{{_id}}">{{food.drink}}</option>
{{/each}}
</select>
</div>
</form>
You can add radio buttons to the form and use an event handler to listen on either their changed or theirclick event and show the <select> that matches the currently selected radio button.
Related
I tried to Google search but I did not even know what to search for!
My current problem is: say I have a customer order an item, it will show in his list of orders and he can then edit the order in the future by clicking a button next to the order.
Currently the button submits a hidden form which contains all information needed to identify a particular order and this form is passed into the edit order page through a post request. Although the form is hidden, when page source is viewed the information will still be accessible by the user.
How do I avoid exposing the information to the user? I.e do everything in the backend.
<form method="POST" action="/edit_order">
<input type="hidden" name="owner_email" value=<%=all.owner_email %>>
<input type="hidden" name="owner_email" value=<%=all.transactionId %>>
<input type="hidden" name="start_date" value=<%=moment(all.start_date).format() %>>
<input type="hidden" name="end_date" value=<%=moment(all.end_date).format() %>>
<button type="submit" class="btn btn-secondary">Change this order</input>
</form>
Radio button checked not working in the partial view. But working in the main view page. also if I use checkbox instead of radio it works fine in the partial view.
Code:-
<label class="radio-inline">
<input type="radio" value="phonetic" name="languageSelector">
<span class="checkmark"></span>Phonetic
</label>
<label class="radio-inline">
<input type="radio" value="bijoy" name="languageSelector">
<span class="checkmark"></span> Bijoy
</label>
<label class="radio-inline">
<input type="radio" value="avro" checked="checked" name="languageSelector">
<span class="checkmark"></span>Avro
</label>
You may be having an issue with the way you're referencing your partial view. There are two ways of doing so:
#Html.Partial("_PartialExample") and #Html.RenderPartial("_PartialExample")
One is written into the HTTP response, the other is rendered as an HTML encoded string. Try both and see if that helps.
Here's more information about what I'm talking about.
https://www.c-sharpcorner.com/UploadFile/ff2f08/partial-view-in-mvc/
I have a select box. On select select box value my page will reload. How can I handle this situation in sails.js .
I am new in sails.js. Please give some solutions if anyone can do.
<select name="gender" id="gender" onChange={this.handleChange.bind(this)}>
<option value="">Select Gender</option>
<option value="M" <%= (gender == 'M')? 'selected':'' %>>Male</option>
<option value="F" <%= (gender == 'F')? 'selected':'' %>>Female</option>
</select>
You either need to use some frontend framework, or, if you want to use the embedded ejs, then in your assets/js folder add jquery and in your view add a script tag in which you can add an onChange event handler to your select.
This is my situation :
<form action=“destinationpage/”>
<select name=“localita” id=“localita” >
<option></option>
{exp:channel:entries channel="localita"}
<option>{nome_localita}</option>
{/exp:channel:entries}
</select>
</form>
How can i get the select value not using php on my action form page?
I need to have : mywebsite.com/destinationpage/SELECTVALUE
Many thanks for your help!
I have this entry form
{exp:safecracker channel="channel_name" return="url/ENTRY_ID" entry_id="{segment_3}" author_only="yes" include_jquery="no" class="nice"}
<label for="title">Week Title</label>
<input type="text" name="title" id="title" value="{title}" size="50" maxlength="100" class="input-text">
<label for="challenge">Select Challenge</label>
<select name="challenge">
<option value=""> -- </option>
{exp:channel:entries channel="channel_name2" username="CURRENT_USER" dynamic="no"}
<option value="{entry_id}">{title}</option>
{/exp:channel:entries}
</select>
...
{/exp:safecracker}
"Challenge" field dropdown returns {entry_id} correctly but not the {title}. {title} params is blank.
Any tips?
You are encountering namespace collision - {title} is populated first by your Channel Entries tag, but then overwritten by SafeCracker, as it's the outermost module tag. {entry_id} will also fail once you're editing an existing entry rather than creating a new one.
Solve this by embedding your Channel Entries tag (a snippet, as suggested by pvledoux, will not help in this case).
Nesting channel:entries in safecracker is maybe not the best way.
You'll probably get better result if you put your channel:entries tag in a snippet.