Develop Reference

Prevent double submission AND allow "required" fields

Starting off with a simple form that requires an email address:
<form action="NextPage.php" method="post">
<input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email">
<button type="submit">Submit</button>
</form>
(Non-essential features like labels and other fields have been removed for troubleshooting purposes.)
Some time ago, I was having trouble with double submission. I remember trying many different solutions, but the only one to work I found here.
So, I implemented that solution:
<form action="NextPage.php" method="post">
<input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email">
<button type="submit" onclick="this.form.submit(); this.disabled = true;">Submit</button>
</form>
This was over a month ago, and I forgot all about it until just now. The "required" attribute now doesn't do anything as this.form.submit(); seems to override required.
A lot of the solutions to this problem require a lot of plugins or extra features, but is there an elegant solution?
The most elegant solution possible would be pure html, but I expect I'll need javascript also. I'd like to avoid downloading libraries or installing plugins if at all possible.
Examples:
Solution using angularJS
Solution using jQuery
All I want is a form that doesn't submit twice on double clicking, and honours the required attribute. Ideally without having to learn a new library or markup language. I wouldn't mind writing a couple of lengthy javascript functions if I needed to. Even a page that redirects to the next page wouldn't be too inelegant.
(I also know PHP and SQL, but I don't think either of them would help here.)
Is this even possible?

Instead of disabling the button in the onclick attribute of the button, disable it in the onsubmit attribute of the form.
You need to give the submit button a name, and then you can refer to it as this.<name> in the onsubmit attribute. Or you could give it an ID, then you could use document.getElementById("<id>") to refer to it.
<form action="NextPage.php" method="post" onsubmit="this.submitButton.disabled = true;">
<input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email">
<button type="submit" name="submitButton">Submit</button>
</form>
The reason your code needed to call this.form.submit() is because clicking on a disabled button doesn't trigger the default form submission. But if you put the disabling code in the onsubmit attribute, it only runs once the form submission process has started.

For jQuery fans:
$('form').submit(function(){
$(':submit').attr('disabled','disabled');
});

Can't submit HTML form inside Angular 2 application

I'm trying to include static HTML form inside my Angular 2 (beta2) app but it doesn't do anything when I hit the submit button.
Here's the HTML I use:
<form action="upload_path" method="POST">
<input type="text" name="text" />
<button type="submit">Send</button>
</form>
How can I enable my form to work with Angular2?

With
<form ngNoForm ...>
you can prevent Angular from handling the form.

If you want to use the action attribute of HTML form, you need to disable the behavior of the NgForm directive that catches the submit event and prevents it from being propagated. See this line: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/ng_form.ts#L81.
To do that simply add the ngNoForm attribute to your form:
<form ngNoForm action="https://www.google.com" target="_blank" method="POST">
<input name="q" value="test">
<button type="submit">Search</button>
</form>
In this case, a new window will be opened for your form submission.
That said, Angular2 tackles SPAs (Single Page Applications) and in most use cases, you need to stay in the same page when submitting a form. For such use cases, you can leverage the submit event with a submit button:
<form [ngFormModel]="companyForm" (submit)="onSubmit()">
Name: <input [ngFormControl]="companyForm.controls.name"
[(ngModel)]="company.name"/>
<button type="submit">Submit</button>
</form>
Hope it helps you,
Thierry

Angular 2 adds an event handler to forms submit event and blocks the forms form being sent. This is done for the sake of normal AJAX use case where you don't actually want to submit the form (and thus reload the page), but instead catch it on JavaScript and send an AJAX request (or handle the data other ways).
You can bypass this by using your custom event handler which will be called first and in which you send the form already before it goes to the Angular's handler.
To do this, you need to add onsubmit="this.submit()" on your form element like this:
<form action="upload_path" method="POST" onsubmit="this.submit()">

AngularJS forms not finding input elements

At some point during the development of my app, AngularJS forms stopped working... Yes that means they used to work. That is, form elements are supposed to create their own scope with every <input /> by their name. However all my forms are now completely empty, as if I had no input elements with the name attribute. Now I can't make any sort of form validation. I've tried even the most trivial forms and still nothing:
<form name="form>
<input type="text" name="input" required />
</form>
Any suggestions as to how to debug this?

Hi to do validation your input have to have model directive please see here: http://jsbin.com/deref/1/edit
<form name="form">
<input type="text" name="foo" required ng-model="input.model"/>
<span ng-show="form.foo.$error.required">required</span>
</form>

Try console.log on the scope
console.log($scope.form);
If you have your controllers set up correctly, your form should be attached to the scope of controller.

Angular form submitting despite validation error

I've written a form with Angular.js that requires a field to be filled out before it is submitted. The validation works correctly (the field shows a validation error when I submit the form) but the form still seems to perform its ng-click action.
Are angular forms supposed to submit despite validation errors? What's the best way to prevent it from submitting if there are validation errors?
Here's the form in question:
<form role="form">
<div class="form-group">
<label>Book Id</label><br>
<input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
</div>
<button type="submit" ng-click="sendBookUpdate(BookToSend)">Send Book Update</button>
</form>

Angular doesn't prevent forms from submitting when there are validation errors.
Actually with the snippet you pasted, the errors are shown just because by default error validation is provided with html5.
You should check the docs: https://docs.angularjs.org/guide/forms
Basically you have to name your form:
<form name="myForm" role="form">
and then you can prevent your form from submitting inside your controller with:
$scope.sendBookUpdate(BookToSend, form) {
if (form.$invalid) {
return; // and add any error to the view if you want
}
...
}
another option is to prevent submitting from the view:
<form name="myForm" role="form" ng-submit="myForm.$valid && sendBookUpdate(BookToSend)">

You could disable the button until the form has valid data
<button type="submit" data-ng-disabled="form.$invalid">Send Book Update</button>

EDIT:
When I wrote the answer below, I was under the assumption that the ngClick was completely separate from any form submission handlers that angular uses. I was wrong, however, as shown in the comments below. I'll keep this answer up, despite its inaccuracy, to inform those that come here with the same misunderstanding as I had, since, to me at least, it's kind of counter-intuitive to have an ng-click double as a submit handler.
ng-click is separate from the form's submit handler, and will run every time you click the button regardless of whether or not it passes the validation checks.
The solution to your problem would be to take sendBookUpdate(BookToSend), and place it in an ng-submit attribute on the form itself. See the code below:
<form role="form" ng-submit="sendBookUpdate(BookToSend)">
<div class="form-group">
<label>Book Id</label><br>
<input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
</div>
<button type="submit">Send Book Update</button>
</form>
Let me know if that helps.
Edit:
Here's some more info regarding ngSubmit:
https://docs.angularjs.org/api/ng/directive/ngSubmit

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!

You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>

You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.

I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously