I have an ng-repeat that creates a table of data. Each entry has several properties, including IP Address, MAC Address, author and more. I have a textbox that automatically sorts IP address, but I also want to provide a dropdown that allows users to select which property they would like to filter by.
For example, the default behavior is that by typing "12" into the box, only entries with "12" in the IP Address will be displayed. But if the user selects "Author" from the dropdown and types "Mark" into the textbox, only entries with "Mark" as the author will be displayed.
I tried setting the textbox's ng-model to "selectFiler.value" but that didn't work.
<form>
<select ng-model="selectFilter">
<option value="incident_at">Incident Date</option>
<option value="ip_addr" selected="selected">IP Address</option>
<option value="mac_addr">MAC Address</option>
<option value="created_at">Created On</option>
<option value="author">Author</option>
<select>
<input type="text" placeholder="Search by IP" ng-model="filterTable.ip_addr">
</form>
Here's some code, but because I'm using ui-router and templates for the full project I can't get the data to display in Plunker:
http://plnkr.co/edit/kNqx1g3HidEM0ORzsSJt?p=preview
How can I make this work?
Try using typeahead from angular-bootstrap library.
Related
I have this option selector which updates url adding ?type=size, type depends on option selected. I use $_GET to then get the data from url.
The problem is, after entering value in inputs (name, price, etc) before, then on selection part the page refreshes and the input data I entered before is gone.
<label>Type</label>
<select name="type" onchange="location = this.value;">
<option>Select...</option>
<option value="?type=size">Size</option>
<option value="?type=weight">Weight</option>
<option value="?type=dimension">Dimension</option>
</select>
How can I fix this?
I would like to have a text-input field that also has an optional drop-down. The ideal ui would look like a text input on default and accept text but when you click an arrow, a drop-down will show. It would also be nice to have the drop-down be implemented with select2 to allow easy searching of values (and that's what I've tried already).
My first attempt used the tagging feature in select2 but it's not exactly what I want as the user will type and then have to select their new input. The default is also not a text-input in this case. Thanks for any help. Also the options can't be hard-coded as we're polling a db for the items that the list would show.
updates:
An example would be something similar to this: jqueryui.com/datepicker/#icon-trigger... where the default is an input text field and we have a button to select the date, but in this case, it's a button which would overlay a drop-down on the text-field.
I also looked at datalist and that would work but I don't think you can not hard-code the options.
Something like this: http://jqueryui.com/autocomplete/#combobox .. would be perfect. But changes would be that it has to accept any entered option rather than reject it and also grab from a list instead. I'm not too familiar with front-end stuff, so if this is possible to do, can you let me know how and the basic idea? I don't think the list can be populated with something like a http get request?
try using datalist html tag:
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
We have a registration form that uses jQuery-Calx to auto calculate the total of the selected items and would like to store the option value in a database after the form is submitted.
How should we define the value used in the calculation to do so? We want to calculate but also want to store “Event Name” if chosen into the database.
We have made some progress trying to follow comments here - http://www.xsanisty.com/project/calx2/comment-page-2/#comment-5678
Here is one of the drop down menus:
<select class="form-control" name="####" data-cell="A1">
<option value="0">Please select</option>
<option value="Event Name 15" data-next="15" >Event Name $15</option>
<option value="10">Ten</option>
</select>
Here is script (not working):
$('#registration').calx({
data:{
A1:{ value: $('[data-cell="A1"]').attr('data-next')}
}
});
We are trying to calculate the total of 5 drop down menus based on the "data-next" value instead of the select option value.
So we can then enter the option value "Event Name" into a database using php (we know how to do this part)
Thank you for any help.
I'm trying to create auto responder message templates with respect the the subject the visitor chooses. I checked formmail and I found how it's done as in setting up templates to be picked up from fmtemplate directory.
http://www.tectite.com/fmhowto/autorespond.php
However, before the auto-responder sends anything, I'd need to check the "Subject" selection and send the appropriate auto-responder template.
The way I think it should be done is as follows. Have the values of the select tag set like the following.
<select name="subject" id="subject" class="subject_category"">
<option value="first_option">First Option</option>
<option value="second_option">Second Option</option>
<option value="third_option">Third Option</option>
<option value="fourth_option">Fourth Option</option>
</select>
And some how have the following hidden tag instructed by formmail
to replace the file name of the autorespond HTML into the option chosen by the user.
Is there a way to embed javascript in place of arhtml.html file so it reads off the select option and constructs a html name accordingly?
<form method="get" action="http://example.com/" name="currencies">
<div>
Currencies:
<select onchange="this.form.submit();" class="select" name="currency">
<option value="USD" selected="selected">US Dollar</option>
<option value="EUR">Euro</option>
<option value="GBP">GB Pound</option>
<option value="CAD">Canadian Dollar</option>
<option value="AUD">Australian Dollar</option>
</select>
<input type="hidden" value="index" name="main_page"/>
</div>
</form>
when i select the GB Pound, all the function is ok except that the default selected is still US Dollar.when i delete the selected="selected" in <option value="USD"... when i change to Australian Dollar. the item shows on the select drop list is still US Dollar. why?
The "default" selection applies when the page first loads, and will be either the option with the "selected" attribute, or the first option when none were specified as "selected".
The View Source facility shows what the browser originally received from the webserver, not the current state of everything on the page after the user (or JavaScript) has changed things.
If you use JavaScript to get values of fields (e.g., in response to some user action) the current values will be reported.
When you submit the form, the current values of your form fields will be sent to the web server and can be accessed by your server-side code.
If the result of submitting the form is to redisplay the same page and you want the previously selected option to still be selected then you should use server-side code to apply the "selected" attribute to the appropriate option. What server-side technology are you using? PHP? (Or JSP, .NET, ...?)
When you choose "Australian Dollar" the action url will have "currency=AUD" but the HTML code itself does not change. The selected="selected" still stays with the US Dollar.
You could use some simple jQuery to move the selected attribute if you like in the DOM, but if you refresh the page, you will still have the same, original HTML you started with.