TL;DR Question
Why can I not use 2 of the same input fields in a form, and the enter button submit the form
More detailed question
Straight to the point. I'm trying to use the enter button to submit a form when an input element is focussed, which should then emit an event.
I've written a codepen here which replicates the "weird" behaviour: https://codepen.io/anon/pen/gqGMmW
As you can see, if I have more than 1 input of the same type (for example, 2 input="text" inputs, when i press the enter button when focuses on an input, it fails to emit the submit event.
In the second app example directly below it, I have the exact same form, with the exact same vuejs instantiation, but with only one input field, and when you press enter when focuses on that element it correctly emits the submit event.
I've tried to google what might be going on here, but struggling to find much of any use apart from "prevent form being submitted on enter".
I've tried adding an ID attribute, a name attribute etc to the element, and it still doesn't work as expected.
I'm not beginner at vuejs, but not an advanced JS user either, so "simple" answers would be appreciated :D
If more information is needed, please let met know and I'll provide as much as I can
Make sure that your form has either
<button type="submit">Submit</button>
or
<input type="submit" value="Submit" />
If you don't want to show the button, you can use
<input type="submit" style="position: absolute; left: -9999px"/>
You can find more information about hiding the button in this question Submitting a form by pressing enter without a submit button
On Vue 3 we can directly add #keyup.enter event in the form.
Here is an example.
<form #keyup.enter="handleSubmit($event, onSubmit)">
I tried many different solutions and none worked for me. Maybe because I had several buttons in my form of which only one was supposed to submit the form.
This was what finally worked:
Use #keyup.enter on the last element of your input like so:
<input type="text" #keyup.enter="save" />
This way the form will be submitted when the user presses enter right after they fill in the last field of your form.
P.S.
In my case I had a <v-text-field> instead of an <input> but it should make no difference.
Solved for me. Don't mount Vue on the form element. Mount Vue on a parent element of the form.
<form
id="app"
method="post"
novalidate="true"
#submit="onSubmit"
>
<div id="app">
<form
method="post"
novalidate="true"
#submit="onSubmit"
>
Related
I am using Angular 2 and I have a form with input as follows (simplified for readability's sake):
<input class="body-text1" type="text" [(ngModel)]="model.name" name="name" required minlength="1">
<!--more, similar inputs -->
I have my own angular validation, but the first input field gets a popup that is relevant to the input. For example, a plain text required input will receive a popup that says "Please fill out this field." while an input marked with type=email will say something like "Invalid email, must have #" (I forget the exact email popup text).
As far as I can tell, I did not add these popups in. I have tried adding formnovalidate / novalidate as attributes to the inputs based on a question that looked similar but it did not help.
You might need to add novalidate attribute to your form to prevent Browser default behaviour.
<form novalidate>
This popup shows because the required attribute is on the element. If you remove this, the popup will be gone, so will the validation be though.
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.
How to check the required fields of a form before submitting it in javascript ?
I'm working with Angularjs and as you probably know, I never reload the page.
I have created input text like this :
<input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>
Here is my submit button at the end of the form :
<button type="submit" ng-click="saveDelivery(newDelivery)" class="btn btn-primary">Create the delivery</button>
But when I submit, I go into "saveDelivery" first, and then I have the message from Google chrome : "Please fill in this field..."
How can I do to check the input before submitting ?
Look into the ng-submit directive.
This essentially looks in your defined form for any validation defined in your markup (required, type). All you have to do is take your click action and place it at the top of your form in the ng-submit directive.
<form ng-submit="saveDelivery(newDelivery)">
<input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>
<button type="submit" class="btn btn-primary">Create the delivery</button>
</form>
Because your button is defined as type 'submit', this will submit the form, preforming the 'ng-click' action for you. Angular will essentially hijack the submit, and validate your form before submitting it to 'saveDelivery'. All you have to do is define what you want validated, whether it is 'required' input, or it you do type="email" on your input, it will use HTML 5 email validation and make sure it is an email address.
Angular made it VERY easy to add validation to any form. Once validation is passed, Angular will then trigger your saveDelivery method!
Edit: 2014-02-12 - Here is a very simple example. Try clicking the submit button when the input field has nothing in it. Chrome will show validation message, enter something and the alert will run, but the form will not submit.
Example: http://plnkr.co/edit/uGT3scGJtCVJkWE0B7zp?p=preview
The browser will do the validation when the form is submitted I think (Note: not verified, this is just how I understand the flow of events. I may be wrong)
You might want to handle the form submit event to do your saveDelivery call as that (form submit) ought to happen after the validation but before the form is actually posted back. saveDelivery will finish before the form submits, and you can cancel it if needed also and do your own thing...
For example this answer to another post shows how to handle the form submit and prevent it from occuring; this might be useful if you want to call your saveDelivery method to do the actual saving but don't want the form to postback
https://stackoverflow.com/a/5384732/94099
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.
I have below code where i disable and enable a calendar clickable icon.
<p>
<label>
<input type="text" name="date18" id="date18" value="01/01/2012"
style="width:75px;" disabled/>
</label>
<a href="#" onclick="somecaledarrelatedstuff()" name="calid" id="calid">
<img src="icon-Calendar.jpg" alt="Click to pick a date from a popup
calendar"/>
</a>
</p>
When I add disable as above both the input field and the link to the calendar popup are disabled as well. But because the values of disabled elements are not submitted, I thought of making it read-only. However, the problem is that when it's read-only, only the input field is getting read only (not also the calendar pop up link) too, like using disable.
I know if I want to disable (just to prevent the user from editing) both input field and href I can use disabled and have a hidden input variable, and submit it and refer to that variable. But I was looking for an alternative way because I will have a lot of refactoring to do to my code if I introduce a new hidden variable.
Thanks.
If you want the input field to be disabled but still send its value upon submission of the form, you can use bit of JavaScript for that.
To achieve this, first add this bit to the <form> tag:
<form ... onsubmit="EnableInputs(this);">
Then add this JS function:
function EnableInputs(oForm) {
oForm.elements["calid"].disabled = false;
}
You can enable more elements like this, or all inputs using getElementsByTagName and looping over it.
This will just enable the element when submitting thus send its value.
Disabled does not submit values, but read-only does submit values.