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>
Related
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
}
<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
I already tried this in single php file but doesn't work out, so i tried now in two separate php file one for form and another one for process.
How to submit the form on a div or link click?
Code i tried
$(document).ready(function(){
jQuery('.web').click(function () {
$("#g_form").submit();
alert('alert');
});
});
FORM
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
Here is the process file code p.php
<?php
if(isset($_POST['f1'])){
echo $_POST['f1'];
} ?>
When i click the submit button the form is submitting but when i click the .web div it is not submitting the form even i get the alert message but not submitting.
What wrong am doing here? It'll be helpful if i get a idea.
.submit() docs
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see
DOMLint.
You give your submit button a name of submit, which the above passage tells you will cause "confusing failures"
So if you accessed the dom element and looked at the .submit property you would see that since you name the button submit instead of .submitbeing a function its a reference to the buttons dom element
HTML
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
JS
//Get the form element
var form = $("#g_form")[0];
console.log(form.submit);
//prints: <input type="submit" value="submit!" name="submit"/>
And when you change the submit name
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="psubmit"/>
</form>
<div class="web">click</div>
JS
var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] }
so simply give your submit button a different name that does not conflict with a form's properties.
You can trigger submit button click.
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" id="f_submit" name="submit"/>
</form>
<div class="web">click</div>
$(document).ready(function(){
jQuery('.web').click(function () {
$("#f_submit").trigger( "click" );
alert('alert');
});
});
DEMO : http://jsfiddle.net/awladnas/a6NJk/610/
HTML (provide a name for the form, strip the name from the submit):
<form action="p.php" name="g_form" id="g_form" method="post">
<input type="text" name="f1" value="">
<input type="submit" value="submit!"/>
</form>
<div class="web">click</div>
JavaScript
//use jQuery instead of $ in the global scope, to avoid conflicts. Pass $ as parameter
jQuery(document).ready(function($){
//use on(), as it's the recommended method
$('.web').on('click', function () {
//use plain JavaScript. Forms are easily accessed with plain JavaScript.
document.g_form.submit();
alert('alert');
});
});
Change the name of the submit and Try,
<input type="submit" value="submit!" name="mySubmit"/>
Remove the submit from the form and try again:
<form action="http://test.com" id="g_form" method="GET">
<input type="text" name="f1" value=""/>
</form>
<div class="web">click</div>
I changed the action to a real URL and the method to a GET so something is seen changing.
Fiddle
$(".web").live('click', DivClick);
function DivClick(){
$("#g_form").submit();
}
I have a form which I want to submit upon button click which is outside the form, here is my HTML :
<form id="checkin" name="checkin" id="checkin" action="#" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
Here is my jQuery :
$("button").live('click', function() {
$("#checkin").submit();
});
$("#checkin").live('submit', function() {
});
When I click submit button inside the form its submitting ok, but its not submitting when I click on the button which is outside the form tags, why? how can I fix this ?
You are selecting all the <button> elements but you are trying to select an <input>.
It works when it is inside the form because the the normal submit functionality runs.
Change the selector to match the element you actually have: input[type=submit]
Better yet, forget about the JS and just structure your HTML better so that the submit button is inside the form.
If you're handling the form processing using JavaScript, then you'll want to return false in your button and form processing code.
I was able to achieve identical results using the JavaScript below, and the two HTML examples (with the button inside and outside of the form element).
JavaScript/jQuery
$("button").live('click', function() {
$("#checkin").submit();
return false;
});
$("#checkin").live('submit', function(){
alert("Hello world!");
return false;
});
HTML Example 1
Button inside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
<button>test</button>
</form>
HTML Example 2
Button outside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
<button>test</button>
As I said, both examples performed as expected. You may want to double-check your button listening code to ensure that you are in fact using the button element. If you're using an element with the id attribute set to button, then you'll want to ensure you are using the proper jQuery selector:
$("#button").live('click', function() { // ...
you can have a simple hyperlink outside of your form like this
click to submit and that's all you need