I have a form that includes some Knockout code, but the form is being submitted too early. I have the following
<form data-bind="submit:addItem">
Add illness: <input type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
</form>
The button is interfering with my Razor form, I assume that because it is of type="submit", so when I click this button unfortunately the form is being submitted, when all I want to use this button for is to call a Knockout function.
So I guess one way to solve the problem is to not use the code above, but I don't know what the alternative would be. Hopefully I don't need to put type="submit" right there, because I need to save that functionality for when I submit my final form much much later
Try this:
<form data-bind="submit:addItem.bind($data)">
I use the .bind in all my click events as it stops the click events being fired on applying of bindings and also allows you to pass extra parameters.
Related
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');
});
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()">
In a Windows 8 Javascript app I'm trying to validate the user's input and keep the results on screen after the user presses Apply by using the following:
<form>
<input id="test" type="number" min="1" max="10" />
<button id="button" type="button">Apply</button>
</form>
But when I click Apply the validation doesn't work. It only works if I replace type="button" with type="submit". The problem is that submit refreshes the page and the results disappear. What can I do?
Here is an example of what I'm trying to do: JSFiddle
UPDATE:
I changed my code to this:
<buton id="button" type="submit" onsubmit="doTest(); return false;">Apply</button>
but it still refreshes my page.
Form validation does not fire until the onSubmit event fires, the behavior is as designed.
One thing you could do is set the for to have an "onSubmit" event, change the button to a submit type, then in the onSubmit function call the event.stopPropigation to stop the page from doing a full postback.
I am building a PhoneGap application using JavaScript, HTML and jQuery Mobile.
All the HTML is in the same file, separated into <div data-role="page"> as pages.
Several pages have a form including one or more text/selection input and a submit button.
The submit is not a traditional form submit button but a button which using onClick runs a JavaScript function which can do many things.
I want the form to have this features:
When pressing the button and after running the function, clear the form.
In some cases the function should change the page.
The enter button on one of the inputs should submit the form (Activate the function).
Should I use the form HTML tag? If so what should I use for action? How to clear the form?
etc.
If you are trying to bind onClick to an input type="submit" then you're gonna have a bad time.
Unfortunately even if you return false or e.preventDefault when clicking that button, the form still sends the submit trigger so once your onClick code is finished then it will submit.
Example:
<form action="woot.php" method="POST">
<input type="submit" value="submit" onClick="alert('You clicked me! How could you?! It's cool the form will still go to woot.php. return FALSE wont help you either.'); return FALSE;">
</form>
What you probably want to do:
<form action="woot.php" method="POST">
<input type="submit" value="Submit" onSubmit="alert('You aint goin nowhere!'); return FALSE;">
</form>
What you should do:
<form action="woot.php" method="POST">
<input type="button" value="Button" onClick="alert('Away with you!'); window.location = 'http://www.google.com/';">
<input type="button" value="Button" onClick="someCoolFunction();">
</form>
I wouldn't use type="button", especially if you want to have the best chance of the form submitting when the user presses enter.
Use your regular form <input type="submit"> and then your JavaScript:
$('form').submit(function(e) {
// all your form handling here;
if (your_form_was_validated_and_handled) {
$('input[type!="submit"]').val('');
}
e.preventDefault();
});
Generic fiddle: http://jsfiddle.net/
You can still use the form tag, as it's useful for markup.
Just make sure that your buttons have attribute
type="button"
otherwise the button will submit the form by default.
To reset the form:
function resetForm() {
$('#form').each(function(){
this.reset();
});
}
I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>
Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?
The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.