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.
Related
I'm having issues when trying to type in the input field of the HTML form is getting autorefresh as soon as I try to write on it, it is occurring just in phones link of the page: https://cheerful-cranachan-2e938c.netlify.app/?prefijos=%2B55&celular=12312#
I think most likely is regarding a slider interval of images I have on the page but I don't want to take it off.
<form action="#">
<label for="prefijos"></label>
<select name="prefijos" id="prefijos">
<option value="+57">+57</option>
<option value="+58">+58</option>
<option value="+55">+55</option>
<option value="+59">+59</option>
<input class="phone" type="text" name="celular" placeholder="Celular">
</select>
<button class="btn btn-form">Enviar</button>
</form>
I have a simple HTML form with a select element. The purpose is this is to use Wordpress's built in query parameters to allow users to sort the posts in an archive. Date Added, Title, etc.
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date&order=asc">Oldest First</option>
<option value="date&order=dsc">Newest First</option>
<option value="title&order=asc">Alphabetical (A-Z)</option>
<option value="title&order=dsc">Alphabetical (Z-A</option>
</select>
<input type="submit" value="Filter" />
</form>
The option values are being passed through to the URL fine, but the URLs are encoding, causing the URL to look like this:
www.example.com/songs/?orderby=date%26order%3Dasc
Instead of this:
www.example.com/songs/?orderby=date&order=asc
This is simply how HTML forms work.
The value attributes are arbitrary text. The browser is sending the form request to www.example.com/songs/?orderby=<value>, where you happen to be setting the <value> to "date&order=asc", "date&order=dsc", etc.
The orderby's value has to make it to the server intact. & and = are reserved characters in a URL's query component, so that is why they are being percent-encoded when the orderby field is added to the URL query, thus allowing the server to properly receive the <value> that the user selected for orderby in the HTML.
To do what you want, you need to treat orderby and order separately in the HTML. I would add a separate <select> for order, eg:
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date">Date</option>
<option value="title">Title</option>
</select>
<select name="order" id="sortbox">
<option disabled selected>Order by:</option>
<option value="asc">Oldest First, Alphabetical (A-Z)</option>
<option value="dsc">Newest First, Alphabetical (Z-A)</option>
</select>
<input type="submit" value="Filter" />
</form>
If you wanted to make the order list a little cleaner, you could use client-side scripting to manipulate the display texts of the order options whenever the user selects a different orderby option.
I am making a form where user can select their branch.
This is my form-
<form method="post" [formGroup]="formData" (click)="dataSubmit()" >
<div class="form-group">
<label for="branch">Select Branch</label>
<select [formControl]="branchControl" class="form-control" id="branch">
<option value="cs">CS</option>
<option value="it">IT</option>
<option value="me">ME</option>
<option value="ece">ECE</option>
<option value="civil">CIVIL</option>
<option value="ene">ENE</option>
<option value="eie">EIE</option>
</select>
</div>
</div>
The problem is when I am selecting any branch, It automatically submit branch without clicking on submit button.
How to stop that. Please help
You are using Angular2+ not AngularJS, here is the form tutorial. The reason your form is submitted when you select a branch is because of this code:
<form method="post" [formGroup]="formData" (click)="dataSubmit()" >
The (click)="dataSubmit()" tells angular to submit the form if anything in the form is clicked. Replace it with: (ngSubmit)="dataSubmit()"
You can now change your button to:
<button type="submit"></button>
Now the form will only be submitted if you click your button.
It works when apply click event on button
<button (click)="dataSubmit()" type="submit"></button>
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();
});
<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.