<form name="v" ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter OUTER FORM:
<input type="text" ng-model="text" name="texta" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
<form name="x" ng-submit="submitInner()">
Enter text and hit enter INNER FORM:
<input type="text" ng-model="textInner" name="text" />
<input type="submit" id="submits" value="Submit" />
<pre>lists={{listInner}}</pre>
</form>
</form>
example : Plnkr
I have an angular form inside a form. When I select inner field and hit enter, the outer form submit action is called.
I am expecting it to call the inner form submit action
Am I expecting wrong, if yes why? and how to achieve the intended behavior
Below is from angular doc(https://docs.angularjs.org/api/ng/directive/form):
If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will
trigger the click handler on the first button or input[type=submit]
(ngClick) and a submit handler on the enclosing form (ngSubmit)
Nested forms are not allowed per HTML standards, but you could make it working using ng-form directive instead of form element.
For having nested form you need to replace all the inner form's with ng-form and those form which are trans-piled to ng-form would no longer support ng-submit event. You should add those form method on ng-click of button & also change input type from type="submit" to type=button"".
Markup
<form name="v" ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter OUTER FORM:
<input type="text" ng-model="text" name="texta" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
<ng-form name="x">
Enter text and hit enter INNER FORM:
<input type="text" ng-model="textInner" name="text" />
<input type="button" id="submits" value="Submit" ng-click="submitInner()"/>
<pre>lists={{listInner}}</pre>
</ng-form>
</form>
Plunkr Here
Related
When I submit form by using below function it is submitting but values are not passed through this function. I use all functions but nothing found:
document.getElementById("postad").submit();
Form is given below.
<form action="register.php" id="postad" method="post">
<input class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
<input class="button" type="button" name="save" value="Publish" onclick="send();" />
</form>
Your form contains two form controls. Neither will be a successful control (i.e. one that appears in the submitted data), but for different reasons.
Only form controls with name attributes can be successful. Your text input doesn't have a name. (It also doesn't have a default value, so you need to type in it first).
Buttons can only be successful if they are the submit button used to submit the form. Your button isn't a submit button and you use JavaScript to submit the form.
There is no name attribute in your input text fields
<input name="post_title" class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
.........^
I've a problem with my form. I want to make standard PHP form but AngularJS is blocking the "Submit" button.
When I click the "Submit" button, it returns some errors in console. And remember I don't want to dynamically submit.
The error is:
An invalid form control with name='' is not focusable.
This example
<body ng-app="mainApp">
<form action="post.php" method="post">
<div ng-controller="MainCtrl">
<label for="titlex">Title</label>
<input id="titlex" class="form-control" type="text" maxlength="75" min="10" name="titlex" required>
</div>
<input type="submit" value="Send">
</form>
</body>
This issue pops up in different cases:
You have a hidden form element that has a required attribute for validation.
You hide an form element before send your data.
Some required form elements does not have a name attribute.
Your submit input does not have a name attribute.
You can try to add a name attribute to your submit input:
<input type="submit" value="Send" name="send">
or you can setup your form to be not validated by the browser mechanics by using
<form name="myform" novalidate>
Try adding name attribute in input tag.
Only form elements with a name attribute will have their values passed when submitting a form.
<input type="submit" value="Send" name="send">
Hope this solves your problem.
I have a very simple form:
<form>
<fieldset>
<input id="in1" type="text" data-validate="required">
</fieldset>
<fieldset>
<input id="in2" type="text" data-validate="required">
</fieldset>
<input id="btn" type="button" value="Insert your datas" onclick="insert()">
</form>
If third input (id:"btn") had type="submit", notify/verify would work well.
I don't need to submit this form (because I have to launch an insert() function on button onclick),
so I deleted the submit type of my button and unfortunately no notifications appear on my page now.
I may add an handler (like this: $(".elem-demo").notify("Hello Box")) as notify docs suggest, but that is a custom notification, good, but I want to take advantage of verify.js data-validate..no extra-code required for a simple validation like "required" or "number".
How can I fix that?
I wish I was clear of my issue and thanks to answer me.
You can keep the button type submit and can override the default form submission behavior on submit button click via event.preventDefault()
<form id="my-form" onSubmit="myFunction(event)">
<fieldset>
<input id="in1" type="text" data-validate="required">
</fieldset>
<fieldset>
<input id="in2" type="text" data-validate="required">
</fieldset>
<input id="btn" type="submit" value="Insert your datas" onclick="insert()">
</form>
This your function which will be called on form submission.Access the form via its id and call validate to check form for errors.
Calling validate will trigger validation on every element in the form. It accepts a callback function callback(success) which will be called after validation.
function myFunction(e){
e.preventDefault();
$("#my-form").validate(callbackFunction);
// call your other function
}
I've got a problem regarding my contact form page. I did callback after clicking the submit button. I tried not to fill name textbox but form still submits.
My code:
function sendFeedback() {
alert("Thank you for the feedback :)");
}
<form>
<p class="font3">Name:</p>
<input name="name" type="text" maxlength="50" size="30" required/>
<br />
<p class="font3">Email:</p>
<input name="email" type="email" placeholder="" required/>
<br />
<p class="font3">Subject:</p>
<input name="subject" type="text" required/>
<br />
<p class="font3">Message:</p>
<textarea name="comment" row="80" cols="30" required></textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="sendFeedback()">
<input type="reset" value="Reset">
</form>
You should change <form> to <form onsubmit="test()",where test() would go something like this:
test(e){
e.preventDefault();
/* do some validations here */
document.querySelector("form").submit();
}
Hope it helps
The form submitting and your alert triggering are two completely different things. The required attributes you have on the inputs are working correctly. If you leave any of the required inputs blank, the form will not submit to the server, instead you'll trigger standard error messaging in whatever browser you're using (usually a red outline and a popover).
The bit of JavaScript you have (i.e. your alert) will trigger regardless of whether the form submits successfully or not since it's executed BEFORE the submit goes through. You need to either do something like e.preventDefault() or return false at the end of your function, but that will prevent the form from being submitted altogether.
As #dvenkatsagar said, your best option is to change your onclick to onsubmit.
I'm new to Angular, but very old with google.
I cannot find out how to submit this form using Angular, like how we do in jQuery.
<form>
<input type="text" />
<button type="button" class="saveDraft">Save Draft</button>
<button type="submit">Submit</button>
<form>
I want to submit this form from a save draft button, but not a normal submit button.
jQuery we use
$('.saveDraft').click(function () {
$('form').submit(); // this will submit form
});
You could have ng-submit directive on form, When you click on submit button it call the method mentioned in ng-submit directive.
Markup
<form name="myForm" ng-submit="submit()">
<input name="name" type="text" ng-model="name"/>
<button>Save Draft</button>
<button type="submit">Submit</button>
<form>
Read here for how form work in AngularJS?
Update 1
If you wanted to perform validation of button click but making its type as button itself would be some thing look like below using ng-click directive
Markup
<form name="myForm" ng-submit="submit()">
<input name="name" type="text" ng-model="name"/>
<button type="button" ng-click="manualSubmit()">Save Draft</button>
<button type="submit">Submit</button>
<form>
Code
$scope.manualSubmit = function(){
//do your the process of adding hidden fields.
//then submit a form
//if you don't want to submit on some cases then put it in condition block
$('form').submit(); // this will submit form
}
But technically I wouldn't prefer to do this approach as using jQuery with make
problem Angular digest cycle.
If you really wanted to add hidden field inside a form, so I would keep them on form itself rather than adding them dynamically before submitting a form. And will use ng-submit directive.
For filling up those hidden values you could use ng-value directive with scope variable in it. What that ng-value directive will do is, it will update the those hidden field, suppose scopeVariable value is changed from controller will update the hidden field value.
<form name="myForm" ng-submit="submit()">
<input name="name" type="text" ng-model="name"/>
<input type="hidden" name="somehiddenfield" ng-value="scopeVariable"/>
<button>Save Draft</button>
<button type="submit">Submit</button>
<form>
Update 2
As per comment you wanted to submit a form manually using angular, for that you could have directive in place which will submit a form. You don't need ng-submit in such case.
Markup
<button type="button" my-submit="callback()">Save Draft</button>
Directive
app.directive('mySubmit', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
element.on('click', function(event){
//do stuff before submitting
element.parent.submit(); //manually submitting form using angular
if(attrs.callback)
scope.$eval(attrs.callback);
})
}
}
})
Update 2 Plunkr
Here you have an example:
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
And documentation:
https://docs.angularjs.org/api/ng/directive/ngSubmit
you just replace you code with this
<form name="myForm" ng-submit="submit()" action=" name of other page" autocomplete="on">`
<input name="name" type="text" ng-model="name"/>
<button onClick="draft(this.form)">Save Draft</button>
<button type="submit" name="submit">Submit</button>