How to submit form on change of dropdown list? - html

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();
});

Related

Required function is not working in HTML form

I already apply <Required> tag in HTML <Select> but not working. The form is still able to proceed to the next step even not select anything at first step. Anyone know to solve it?
<label>Region :</label>
<select id="Region" class="custom-select form-control" required>
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
Have you declared your web page using HTML5? Make sure you declare the following statement at the beginning of the page
<!DOCTYPE html>
The required attribute is only available in HTML5 and only supported by specific browsers... w3schools Required Attribute
Having tested your original code in HTML5, it works.
You could get rid of the select option tag entirely, and place the value select option in the select tag itself.
<label>Region:</label>
<select value="Select Option" id="Region" class="custom-select form- control" required>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
Your code works it depends on the browser you use or the way that you are using it. I wrote a sample code for you. Hope it may help you:
<!DOCTYPE html>
<html>
<body>
<form >
<label>Region :</label>
<select id="Region" class="custom-select form-control" required>
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
<input type="submit">
</form>
</body>
</html>
So in the code above if you do not choose anything it will not let you submit.

AngularDart - Use Form Action

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.

Create a custom autocomplete list for an input field

I need to create a custom auto-complete list of suggestions for an input field. So far I have associated an event handler to the input event to the html input element, so that when that event triggers, I can fetch the suggestions.
The problem is how would I show these suggestions. By default, input elements can display suggestions, but is it possible to customize/access those suggestions?
If not, what would be the alternatives?
Preferably I would like not to use external libraries.
You may use 'datalist' tag but it doesn't work in IE <= 9
<!DOCTYPE html>
<html>
<body>
<form>
<input list="country" name="countru">
<datalist id="country">
<option value="U.S.">
<option value="France">
<option value="China">
<option value="Cambodia">
<option value="Chile">
<option value="Canada">
<option value="Poland">
</datalist>
<input type="submit">
</form>
</body>
</html>
Run the code and try typing 'C' and then 'a'.

How to make select elements required?

With input of type text the attribute required is available. It is not the case for select inputs. So how to make them required ?
FIDDLE
<form>
<select required>
<option></option><!--If this is selected require pop up will appear -->
<option>test</option><!--If this is selected form will be submitted -->
</select>
<input type="submit">
</form>
You can make them required by using html5 attribute required just like below.
<select required>
<option value="">select an option</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
</select>
View Example in jsfiddle http://jsfiddle.net/88rXX/
Set a default value then on form submission check to see if that default value has changed.
If you're using the JQuery validation plug-in, try this Validate select box
You do have to remember though that just because it's validated client side, doesn't mean you shouldn't also check server side.
use it based on html 5. otherwise you can use any plugin

How to make post works in select element in HTML

<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.