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.
Related
At this moment I'm working on a project where we use Aurelia in combination with Material Design Components. Because the project is fairly new, we are using MDC version 0.13.
We are using multiple select fields and some of them should have an initial value, like the snippet below:
<select value.bind="_PersonID" class="mdc-select mdc-list-item__end-detail">
<option model.bind="null">Select person</option>
<option repeat.for="person of Persons" model.bind="person.ID">${person.Name}</option>
</select>
This works great and like we expected it to work. But now we want this kind of behavior with the mdc-select structure & styling. For that we use the following:
<div mdc-select role="listbox" class="mdc-select mdc-list-item__end-detail">
<span class="mdc-select__selected-text">????</span>
<div class="mdc-simple-menu mdc-select__menu">
<ul class="mdc-list mdc-simple-menu__items">
<li class="mdc-list-item" role="option" repeat.for="person of Persons" model.bind="person.ID">${person.Name}</li>
</ul>
</div>
</div>
The problem with this piece is that we've only a "CurrentPersonId". But we have to define the name in the tag. In the documentation of MDC, it also declares an "aria-selected" attribute in the li. When we put that on the li tag, it won't update the span on init.
I'm using Protractor to run an automated script, on one of the pages there are two drop down menus that are located below/above each other. The two of them seem identical only that they have different ng-model names etc. I can sucessfully select an element from one of the drop down menus but I can't for the other. It's kind of wrecking my head as to why one works and the other doesn't. Here is the code for the drop down menu where I can select an element
<select class="form-control ng-pristine ng-invalid ng-invalid-required" ng-model="user.sourceOfFunds" required="" ng-class="{submitted:invalid}">
<option value="">Select</option>
<option value="Savings">Deposit</option>
<option value="Inherited">Current</option>
<option value="Other">Savings</option>
</select>
element(by.model('user.sourceOfFunds')).sendKeys('Savings');
My other dropdown menu is as follows:
<select class="form-control ng-pristine ng-invalid ng-invalid-required" ng-model="user.investFigure" required="" ng-class="{submitted:invalid}">
<option value="">Select</option>
<option value="<20">Less than 20K</option>
<option value="20-50">20K-50K</option>
<option value="50-100">50K-100K</option>
</select>
element(by.model('user.investFigure')).sendKeys('Less than 20K');
or
element(by.model('user.investFigure')).sendKeys('20');
I get "element not found" when I try to select an item from the second drop down menu. I'm at a bit of a loss as to why this is happening
Using sendKeys to select a dropdown option seems odd to me, even if it works. Given #alecxe's fine suggestions, perhaps the issue is visibility, but try another way and see if sendKeys is your issue.
I use this code on tests with multiple selects every day without issue. Maybe it'll work for you...
var selectOptionByText = function(text) {
return element(by.cssContainingText('option', text)).click();
};
Call thusly...
selectOptionByText('Less than 20');
selectOptionByText('20');
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.
I need to have a combobox on my Lotus Notes Page that I open in WEB...
<input list="myList" name="myList">
<datalist id="myList">
<option value="item 1">
<option value="item 2">
<option value="item 3">
<option value="item 4">
<option value="item 5">
</datalist>
<input type="submit">
as option values (list of items) I want to pull data from some Notes view.
Any ideas?
Thanks
Here is how you can do it (just one way)
<input list="myList" name="myList">
<datalist id="myList">
<computed text>
</datalist>
<input type="submit">
And computed text must have a formula (with #DbColumn) that generate options. This code just an example.
You will need to define view_name, column_number and possible database (if the view is in another database).
_col := #DbColumn(""; ""; "All"; 2);
_options := "<option value=\""+_col+"\">";
#Implode(_options; #NewLine)
Here is a result (my view has only 2 values, 'index' and 'test'):
Also keep in mind that there is a limit (64Kb if I remember correctly) for result of #dbcolumn.
You could also do a more advanced solution, if you want a fancy combobox.
Use a jQuery plugin that support Ajax/JSON for the choices, and then create a Lotusscript agent on the server that return the values.
If you look at this presentation you perhaps get some ideas.
I have used that method in some applications, you get nice features like type-ahead, sorting and much more for free there.
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!