I want some input element be $setPristine when I submit the form. Because after I submit the form, I would empty the model bind to the input element, in case of user can totally input something new again. But once I empty the model, the input element would empty too, so the validate information would show, for required.
So I want $setPristine after submit the form. I figure out two ways:
One:
I use expression in the ng-submit, like:
<form ng-controller="FormController" name="userForm" ng-submit="userForm.$valid?submitForm(),userForm.keywordsInput.$setPristine(): ''">
But this syntax seems wring because angular report error information in the console.
Two
I could pass form to the submit function, then $setPristine in the submit function :
$scope.submit = function (form) {
form.keywordsInput.$setPristine()
}
But I also don't this is a good practice, because in the angular official reference site, it suggest:
Do not use controllers to:Manipulate DOM.
Is this way a kind of manipulating DOM?
So is there a better way to achieve this job？
I had the same issue logging undefined $setPristine(). But,in the view it works.
<button class="button button-stable button-block " type="submit" ng-click="register(registerData);formName.$setPristine();"> Submit </button>
When you submit the form, you must have set some function to run in the "ng-click" attribute
Add formName.$setPristine(); after it
Related
I am new to javascript so it might be a simple question for many.
I have used form sumbit in thymeleaf and am trying to add a JS validation before the form is submitted to the spring mvc controller. I can perform these two actions separately (individual tasks). However I could not really make them work one after the other (js function and form submit). Submit action is triggered by a button inside the form.
<form th:action="#{/user/trigger}" th:object="${triggers}" method="post">
<input type="hidden" name="tradeDate" th:value="${trigger.id.tradeDate}">
<button type="submit" id="ignore" name="action" value="ignoreOrder" class="btn btn-primary btn-sm">Ignore</button>
</form>
The js function is like below:
$(".ignore").click(function() {
//do some processing;
return false;
});
So can someone can help me to rewrite this code which will first call the JS function and submit the form to the java spring mvc controller? Thanks in advance.
The issue with your approach is that after your java-script is validating the code, your html 'submit' button is submitting the form as they're executing one after another. You haven't done anything to prevent the form submission after the validation is getting failed.
To overcome this issue, what you can do is to submit the form through your JavaScript code manually only when your validation is successful.
So your code will look something like this -
1.) Changes in Html code, instead of creating the button type as 'submit', make it as a normal button and run your javascript validation function on its click -
<form th:action="#{/user/trigger}" th:object="${triggers}" id="myForm" method="post">
<input type="hidden" name="tradeDate" th:value="${trigger.id.tradeDate}">
<button type="button" id="ignore" name="action" onclick="myValidationFunction()" value="ignoreOrder" class="btn btn-primary btn-sm">Ignore</button>
</form>
2.) Changes in Javascript code, now after clicking on the above button your javascript validation function will execute and after the validation is successful submit the form manually using the form id, something like this -
function myValidationFunction(){
if( some_condition ){
//validation failed
return;
}
//validation success , when above mentioned if condition is false.
$("#myForm").submit(); // Submit the form
}
For more information about using submit in jquery, refer the official documentation -
https://api.jquery.com/submit/
for jquery, it return a list, so:
$('#search_form')[0].submit();
I have a form with some input, and then a button that open a directive a modal popover where there is another form. the pristine state does not detect the changes in the directive.
How to solve this?
<form name="createFeeForm"
<input....
<input....
{{show the data from the something-popover}}
<something-popover....</something-popover>
<button ng-disabled="createFeeForm.$pristine">SAVE & CLOSE</button>
</form>
for the directives template.html
<form name="somethingForm">
<input...
<input...
<button ng-disabled="somethingForm.$pristine">SAVE & CLOSE</button>
</form>
The parent pristine will detect all input changes on input tag, except for the directive
I had a similar situation, and I couldn't trigger any kind of form behavior when it was a form inside another form (I wasn't using a directive, it was directly on the same file).
I'm using something like this:
The form triggers a modal id on href (in my case, I need to pass an Id, so I used a function for it):
<a data-toggle="modal" ng-click="passId(id)" href="#modalDirective">Open Modal</a>
and then, outside the form, you add the directive (usually I do it on the end of the page):
</form>
<something-popover....</something-popover>
When the page renders, Angular will load the template and the modal will be accessible, and yopu will have two separeted forms that you can handle.
Hope it helps!
I have the super awesome jQuery validate and form plugins working all over my site without problems. Unfortunately, for one of my forms I have this weird problem where no form data gets submitted regardless of what I type into the form's textboxes.
To show you what I mean, when I console.log the field data before typing ("stored data") and upon submission ("live data") this is what I get (serialized using $.param):
stored data: full_name=&email_address=&password=
live data: full_name=&email_address=&password=
So nothing is being submitted on this form, whereas the "live data" for all other forms on my site which use the exact same JS codebase display whatever is inputed.
UPDATE Here's a JSFiddle for this form.
UPDATE 2 I'm realizing that this form's elements aren't being recognized by Javascript. So the background doesn't turn red if I do this.
$('#email_address').focus(
function(){
$(this).css({'background-color' : 'red'});
});
Wow this is totally confusing, thoughts?
You have
$(document.body).on('click', ".ajaxFormBtn"
and
<button data-loading-text="Saving..." class=" btn btn-green btn-large txt24"
value="Sign up" id="signupModalBtn" ><i class="icon-key icon-signin"></i>
Sign up</button>
Notice anything missing from the button's class attribute?
I'm writing form and adding html5 validation attributes to its input like "required", "autofocus". I use Javascript to submit the form using document.myForm.submit() but it doesn't validate the form against the html5 validation attributes as they aren't there.
Any Suggestions?
It appears that triggering a click on the submit button does have the correct effect: http://jsfiddle.net/e6Hf7/.
document.myForm.submitButton.click();
and in case you don't have a submit button, add an invisible one like:
<input type="submit" style="display:none" name="submitButton">
The pimvdb's answer is based on a workaround to include a hidden submit button.
HTML5 provides javascript functions to achieve the same thing without a submit button. As Tigraine pointed out, Mozilla documents two validity checking methods for 'form' elements:
checkValidity() return true/false and doesn't show anything to the end user
reportValidity() return true/false and ALSO shows the validation messages to the end user (like the normal submit button click does)
<!DOCTYPE html>
<html>
<body>
<form name="testform" action="action_page.php">
E-mail: <input type="email" name="email" required><br/>
Report validity<br/>
Check validity<br/>
Submit
</form>
</body>
</html>
Why not simply call the validation manually before you do document.myForm.submit()
What validation framework do you use and what AJAX library?
In case you use jQuery here is the code to prevent the submit:
$('#myForm').submit(function(evt) {
if (! $('#myForm').validate()) {
evt.preventDefault();
}
});
And trigger the submit through:
$('#myForm').submit();
This would call the validation whenever submit is triggered.. And if the validation fails it prevents the submit from executing.
But I'd look at your validationframework as it usually should do this already
In case you don't use any JavaScript framework you may want to have a look at: element.checkValidity(); and how to invoke the HTML5 validation from JavaScript before even calling submit.
I want to trigger the submit event of the form the current element is in. A method I know works sometimes is:
this.form.submit();
I'm wondering if there is a better solution, possibly using jQuery, as I'm not 100% sure method works in every browser.
Edit:
The situation I have is, as follows:
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select></label>
</p>
</form>
I want to be able to submit the form on change of the <select>.
What I'm looking for is a solution that works on any field within any form without knowing the id or name on the form. $('form:first') and $('form') won't work because the form could be the third on the page. Also, I am using jQuery on the site already, so using a bit of jQuery is not a big deal.
So, is there a way to have jQuery retrieve the form the input/select/textarea is in?
I think what you are looking for is something like this:
$(field).closest("form").submit();
For example, to handle the onchange event, you would have this:
$(select your fields here).change(function() {
$(this).closest("form").submit();
});
If, for some reason you aren't using jQuery 1.3 or above, you can call parents instead of closest.
this.form.submit();
This is probably your best bet. Especially if you are not already using jQuery in your project, there is no need to add it (or any other JS library) just for this purpose.
I have found that using jQuery the best solution is
$(this.form).submit()
Using this statement jquery plugins (e.g. jquery form plugin) works correctly and jquery DOM traversing overhead is minimized.
Similar to Matthew's answer, I just found that you can do the following:
$(this).closest('form').submit();
Wrong: The problem with using the parent functionality is that the field needs to be immediately within the form to work (not inside tds, labels, etc).
I stand corrected: parents (with an s) also works. Thxs Paolo for pointing that out.
You can always JQuery-ize your form.submit, but it may just call the same thing:
$("form").submit(); // probably able to affect multiple forms (good or bad)
// or you can address it by ID
$("#yourFormId").submit();
You can also attach functions to the submit event, but that is a different concept.
Your question in somewhat confusing in that that you don't explain what you mean by "current element".
If you have multiple forms on a page with all kinds of input elements and a button of type "submit", then hitting "enter" upon filling any of it's fields will trigger submission of that form. You don't need any Javascript there.
But if you have multiple "submit" buttons on a form and no other inputs (e.g. "edit row" and/or "delete row" buttons in table), then the line you posted could be the way to do it.
Another way (no Javascript needed) could be to give different values to all your buttons (that are of type "submit"). Like this:
<form action="...">
<input type="hidden" name="rowId" value="...">
<button type="submit" name="myaction" value="edit">Edit</button>
<button type="submit" name="myaction" value="delete">Delete</button>
</form>
When you click a button only the form containing the button will be submitted, and only the value of the button you hit will be sent (along other input values).
Then on the server you just read the value of the variable "myaction" and decide what to do.
In JQuery you can call
$("form:first").trigger("submit")
Don't know if that is much better. I think form.submit(); is pretty universal.
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select>
</label>
</p>
**<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
</form>
<!--
this.form.submit == this.form.elements['submit'];
-->