I am wondering, is there way to disable the form submition on enter key press inside one of the input in Vue js. I am currently having simple form with button and one input and i am handling the submit with #submit.prevent="submitFunctionClickFunction"
Try adding #keydown.enter.prevent on the input field.
Related
When pressing enter after writing something in input box field, value is not getting submitted in angular 8.
Which event should I use in order to make it work properly?
You can use (keyup.enter) for that.
StackBlitz example
I'm learning reactive forms and writing a simple application to help my understanding. I've got a couple text inputs that are used to modify the FormGroup and there is a button in place to execute the function that does so, but I find that I've been naturally hitting enter when trying to fill in those fields and accidentally triggering the form submit. I'm wondering if there is a way to prevent the normal submit behavior on the enter key, but only while some fields have focus, I would like to keep the enter key submit functionality in all other cases and not disable it entirely.
This can be done by adding validations in Reactive form fields.
Plus for specific fields, you can listen for change event / focus event and set a bool to stop form submission. Set disabled property on submit input / submit button with value of bool. So when specific fields will have focus / change event (whatever functionality is required) the submit input / button will be disabled. However, to enable the submit input set bool to false in blur (lost focus) event ((blur)="methodhere($event)") of the field(s). This will again enable the submit input.
Another way is for specific fields, you can listen for change event / focus event and set a bool to stop form process in form submit method. i.e. form will be submitted but will not process further in form submit method.
Try adding validations, and only submit when the forms are valid.
I have two forms, a login form and a register form on the same page and each has its own submit button. If I fill in bad data and click on submit button on register form, I get the form back with errors ( expected). If I now enter sign in details on signin form and click on signin form's submit button, the register form gets submitted.
This is strange behaviour. I am not sure where to start search for this. I am using firefox to test this.
Thanks
Well, you will need to debug it step by step.
Check your form nesting and follow good structure, make sure both form are not overlapping with each other or not being closed properly.
Give you form a proper ID and NAME. Be careful when two forms have the same name From Name Attr.
Based on your structure and your question, make sure you have a different submit buttons for each form and that button is placed within the form nesting.
Same as for the forms, give your submit button a proper unique ID and NAME .
Choose whether you want to submit by your using submit in html, or having JS to submit the form for you JS submit form.
If you are using HTML5, you can separate the button from the FORM. They can run separately. Means dynamic association between the form and it's submit button by having submit button placed anywhere and can submit a form located in different place. Check Association of Controls and Forms & HTML5′s New “form” Attribute.
Please post some code in order for us to have a better understanding of your issue.
Good luck.
I have an application where in a signed in user searches a database and is displayed a table of results. These results are basically listings of events. I give the user then, the privilege to "keep" or "discard" any event (using radio buttons beside each event).
Now however, I wish to implement a functionality whereby, the user at the end can click just one "update" button and all changes are affected (since keeping one button for each record will be very user unfriendly). That is, I am looking equivalently to submit multiple forms with just one submit/update button.
Is this possible ?
You need to use javascript, I suggest you using JQuery. Using AJAX you need to submit each form - this way page will not be redirected once you submit a form!
Then, within each forms assign individual IDs for each form. Then, assign your submit button an id for example mySubmit. Up next, add following code:
$('#mySubmit').click(function(){
// submit form1 by ajax...
// submit form2 by ajax...
});
You may see jQuery's http://api.jquery.com/jQuery.post/ for further information on how to submit a form using ajax.
As long as all of the radio buttons and submit button are part of the same form, you don't need to worry about submitting multiple forms because there won't be any. You can have multiple submit buttons in a single form, you can give them different values to know which button was clicked.
If you don't want to use jQuery then use javascript to form a list of data separated by say ~ character and set this string to some hidden field and submit using document.formx.submit()
You will need to parse the string on server side to get the data in correct format.
I have a form with two submit buttons - one for Cancel and the other is for Saving form values to the DB . When Enter key is pressed, the Cancel button submits the form instead of the Save button submitting the form. How can I make the Save button submit the form when Enter key is pressed?
Thanks,
Your form should not have two submit buttons. Have the Save button be of type submit, and the Cancel button be of type button.
EDIT: I'm going to update this answer to handle several issues that were brought up.
Nothing I've seen in the HTML specification (i.e. the DTD) disallows two submit buttons in one form, but the exact issue the OP mentioned can occur. In his or her case, the solution is to make the Cancel button of type button and add in the following JavaScript:
<input type="button" value="Cancel" onclick="window.location.href='nextpage.html';"/>
Here, one would replace nextpage.html with the appropriate URL. Or, this.form.action can be the new location if the redirection is to the action of the form.
If the OP wants to be safe and avoid JavaScript, this could only be a (perhaps styled) hyperlink.