<form>
<select name="filter">
<option value="1">A</option>
<option value="2">B</option>
</select>
</form>
I want to make this drag down menu post when user selected an item. How to do that?
Alright, try to minimize the JS.
It's something similar to postback in ASP.NET.
This is not possible without at least a little bit of JavaScript.
You could do something like this:
<form name="myform">
<select name="filter" onchange="document.myform.submit();">
<option value="1">A</option>
<option value="2">B</option>
</select>
</form>
Postback in ASP.NET uses JavaScript, it just hides it from you. If you do not want to use javascript, I do not believe you can accomplish what you are asking.
Related
I'm new to HTML and trying to use a datalist. I need to limit it to display only 5 items and the rest to be viewed using scrolldown. Is there any way?
My code :
<form>
<input list="Android" name="Android">
<datalist id="Android">
<option value="Alpha">
<option value="Beta">
<option value="Cupcake">
<option value="Doughnut">
<option value="Eclairs">
<option value="Fryo">
<option value="GingerBread">
<option value="HoneyComb">
<option value="Icecream Sandwich">
<option value="Jelly Bean">
<option value="Kitkat">
<option value="Lollipop">
<option value="Marshmallow">
<option value="Nougat">
</datalist>
<input type="submit">
</form>
This is the output of my code
Thanks in advance!
Well, that's not possible to do, the datalist layout is defined by the browser the same as it does with the select tag and there is very little flexibility on customization. Your example comes from Chrome; in Firefox, it shows only 6 items and on Edge it shows something similar with limited size as well.
The proposed solution is using something else rather that using datalist, if you can't live with the datalist design Chrome offers, try some other component with a similar behavior, like dropdown select, autocomplete, autosugest, typeahead, etc.
I am trying to show content depending on the option selected from the user. I tried this way
<select class="form-control" id="Intervencion" >
<option selected disabled></option>
<option (click)="show">Yes</option>
<option>No</option></select>
<div *ngIf="show"><p>Text to show</p></div>
I do not understand the problem. There is a special directive for this?
... You don't seem to know how basic HTML works. Sorry to say that, but you have to be aware of what you're doing is completely barbaric.
Here is the solution for you :
<select [(ngModel)]="intervencion">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div *ngIf="intervencion === 'yes'">Text to show</div>
That being given, you should really follow Angular's tutorials, because that's one of the first examples they give to explain how ngModel works.
I am trying to use a form action attribute in AngularDart to redirect to the specified url. In plain html I would do something like this:
<form action="http://localhost:8082" method="GET">
<select name="q">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="9">9</option>
</select>
<input type="Submit" value="Guess">
</form>
How would I implement this functionality with AngularDart?
Thanks in advance
In Angular you would instead do the request in code, because form action="..." would reload the application or even another page which usually is not what you want in a single page application (SPA):
<form (ngSubmit)="onSubmit()"
and then post the form in Dart code like shown in the question in Dart: AJAX form submit
I haven't done this myself in years and don't have a full example, but it should get you going.
Is there an easy way to implement a typeahead using Polymer's <paper-input> element?
The HTML <datalist> tag seems to implement that for normal <input> tags and I could dynamically update the data list using templates.
However, this does nothing:
<paper-input
label="Topic"
list="dl">
</paper-input>
<datalist id="dl">
<option>a</option>
<option>aa</option>
<option>aaa</option>
<option>ab</option>
</datalist>
Besides the fact you misuse options,
<datalist id="dl">
<option value='a'></option>
<!-- WRONG: <option>a</option> -->
</datalist>
I would suggest you to take a look into paper-input code and use paper-input-decorator with plain input as they do for paper-input:
<paper-input-decorator id="decorator">
<input list="dl" is="core-input">
<datalist id="dl">
<option value='a'></option>
<option value='ab'></option>
<option value='ac'></option>
<option value='ffa'></option>
</datalist>
</paper-input-decorator>
Polymer/paper-input has been deprecated, the currently supported version is PolymerElements/paper-input.
To use a datalist with paper-input in Polymer 1.0+:
<paper-input-container>
<input list="choices" is="iron-input">
<datalist id="choices">
<option value='a'></option>
<option value='ab'></option>
<option value='ac'></option>
<option value='ffa'></option>
</datalist>
</paper-input-container>
Vaadin Combo Box https://vaadin.com/elements/-/element/vaadin-combo-box is a good apache-2 licensed option for a typeahead that fits in with the paper elements.
Checkout this element. It's an element has the typeahead function.
https://github.com/cheonhyangzhang/paper-typeahead-input
Here is the demo & doc page
http://cheonhyangzhang.github.io/paper-typeahead-input/components/paper-typeahead-input/
I am creating a page in JSP where I have a dropdown list and once the user selects a value he has to click on the go button and then the value is sent to the Servlet.
</select>
<input type="submit" name="GO" value="Go"/>
How do I make it so that it does it on change? E.g. when the user selects John all his details are retrived from the DB and displayed. I want the system to do it without having to click the go button.
Just ask assistance of JavaScript.
<select onchange="this.form.submit()">
...
</select>
See also:
HTML dog - JavaScript tutorial
Simple JavaScript will do -
<form action="myservlet.do" method="POST">
<select name="myselect" id="myselect" onchange="this.form.submit()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</form>
Here is a link for a good javascript tutorial.
other than using this.form.submit() you also can submiting by id or name.
example i have form like this : <form action="" name="PostName" id="PostID">
By Name : <select onchange="PostName.submit()">
By Id : <select onchange="PostID.submit()">
To those in the answer above. It's definitely JavaScript. It's just inline.
BTW the jQuery equivalent if you want to apply to all selects:
$('form select').on('change', function(){
$(this).closest('form').submit();
});