This may be an iterative question and answer process because I'm not sure which code to paste. I have a custom, advanced search form (which uses ng-submit) that passes a query object into a controller method and calls a service. When the user has entered some input into one or more fields, pressing the submit button (which uses ng-click) successfully calls the methods and submits the query. However, if the user presses enter to submit the form, those same methods are called, but the query object is missing the bound values of the input fields. I've stepped through with breakpoints and have verified that all of the above is what's happening, but am unsure where the problem lies. Is there a difference in Angular's data binding process between ng-click and pressing the enter key? Do I need to call prevent default somewhere? Let me know what code I need to add to this post to help with troubleshooting. Thanks!
For anyone who may encounter this problem in the future, it turns out that the problem was that the enter key was firing both the Clear and Submit buttons, as the default behavior for a button is submit. It just happened to be firing the Clear button first, otherwise we never would have noticed the problem. The solution was simply to add "type=button" to the clear button.
Related
I am facing an issue in my Struts2 application. Basically, on textfields, I have validations such as missing value, wrong value etc. There is then a button below these fields which submits the form when all validations are successful.
Suppose, I blur out of a textfield with a wrong value, the validation fires an error below this textfield. Now, when I supply a correct value and directly click on the upper half of the button, the validation clears and the page also submits along with it simultaneously. However, when I click on the lower half of the button, the validation just clears but the page does not submit at all. This behaviour is consistent across the application.
Now, the QA team has raised a defect for this as it could hamper user experience.
Could anyone suggest a possible fix for this other than calling the submit button click event on the mousedown event? We tried that but its causing side effects.
I cannot show the exact code as there are many collaborating CSS classes for this scenario which could cause confusion. If anyone could try to give a brief solution, it would be extremely helpful!
You need to perform the same function regardless of what part of the composite is invoked. If you click a submit button it should submit, if you click reset button it should reset. If you click cancel it should return to the previous page. Different functions of the same control mislead the user experience because it doesn't perform expected behavior of the button.
My office is working with LiveCycle ES4 and I'm kinda new to it. I have a form that contains some custom validation javascript which gets called in the submit event of a submit button, which works fine. The form is deployed in Livecycle Workbench, which replaces the in-form submit button with the workbench 'complete' button.
We're running into a problem where if a user enters data in one of the required fields, then clicks the Workbench Complete button, the exit event for that field doesn't fire, which means the rawValue is not set to the value the user entered. So when the validation runs as part of the submit event, it fails, even though the user has entered text in that field.
Is there some way to change this up so it shifts focus out of the current field when clicking the Workspace button?
There are ways the ensure that this does not happen.
One of the ways to do this is to place an if statement in the submit button code so that the form submission happens only when the rawValue of that field is populated. If the if statement does not evaluate to true, the submit code does not execute and you dont have to worry about this problem.
Also, If the field is not populated, your code can also set the focus to that field so that the user is automatically navigated to the field in question.
Hopefully this strategy helps. Please let me know if you have any other questions.
Thanks,
Armaghan.
We have an autosave and an explicit save for a particular form (it's a long form, and we don't want the user to lose data). For an explicit save, invalid data will block the save from occurring and an XHR will not be sent back to the server. However, for the autosave, we want the data to be saved (if possible) regardless of front-end validation.
What we need to have happen is, if the save is successful on the backend, the front-end should mark the form as no longer being dirty. But... and here's the sticker - it should not remove any validation errors/error messages from the form.
From what I'm seeing (or at least from what I understand), .$setPristine() will un-dirty the form, but it will, problematically, also remove validation errors.
Is there a way to un-dirty the form without removing the validation errors so that the autosave doesn't run when it's already performed a save, but so that the user still has the feedback of which fields are invalid so that they can fix the issues?
Thanks!
A form's $pristine/$dirty states are not connected to the $valid/$invalid states.
Your error messages shouldn't be removed (unless you use $pristine/$dirty in the condition that shows/hides the messages).
So, you can call the FormController's $setPristine() method in your autosave function, which will "un-dirty" the form, but will not affect the validation and error messages.
See, also, this short demo.
E.g.:
* In the fiddle above, enter something in one field (so it becomes valid and the form becomes dirty).
* The Save button gets enabled.
* Pressing the Save button sets the form's state to $pristine, so the button gets disabled (this simulates the autosave).
* The errors messages are still visible though (and the form's validity state does not change).
I am working on learning JQuery and creating a simple HTML / JS calculator. I used a standard HTML form to allow the user to enter the data they want calculated and when the user clicks submit my JS / JQuery calculates and spits out the answer.
My question is what would be the semantically correct way to deal with the HTML form action being that Im not actually posting any data? I dont want to leave it default because when I click my to trigger an event it changes the URL and I dont want to use POST because Im not posting anything. Any help is appreciated!
I would replace the submit button with a normal button, and prevent the form being "submitted" at all. then use javascript to do the calculations on button click. This way the form never gets submitted, and you don't need a method or action at all.
If you really want to do a request at all, you probably just want to do a GET...check the list of HTTP request methods here to see if another one would better fit your needs.
If you are doing everything with javascript, though, you shouldn't be submitting anything at all. Try changing the submit button into a link (or just a regular button) and bind your calculator logic to its click event.
Don't specify any action(Default is GET). Use an html button which would call the js function on the click event. That would do the work on client side
You don't actually need to put input elements inside a form. Since you don't intend to submit the form, I would just omit it entirely.
I'm debugging a weird problem with two simlar search forms - when user types some search criteria in a text box and hits enter, one form returns results and another just reloads. And it happens only in IE - FF treats both forms as expected. I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
How do I find what form element caused submit event?
Thanks,
Andrey
Sounds like the single textbox form bug in IE.
To get around it, you can use Javascript to handle the enter key press, or just insert a blank hidden textbox. Lame, I know.
I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
Yes. Browsers may, largely at their whim, treat enter as clicking on a submit-button, just submitting a form, or nothing. Put general form submission stuff in form.onsubmit, rather than an onclick on the first submit button.
You could sprinkle your form elements with onclick events to set a hidden form variable with a different value per element, then sniff the results either with a DOM inspector or through something like Fiddler.
There may be a way to simply have a form onsubmit() event that you can extract the triggering element from the event object, but I'd have to dive into the docs to see if this is possible... if I get chance I'll do some looking.
I think I may help you much If you provide your two forms code. However, check to see for the following submit button code:
<input type="submit" value="Submit">
When you use this, then when you press Enter among the corresponding form, the form will be submitted. If you wish to check something before submitting you can use JavaScript Function like the following:
<input type="button" onclick="javascript_function_name();" value="Submit">
Thanks. If this can not help you, please express the situation more briefly.