We Keep Coding

Laravel form inside another form

I am in a situation where I have one form inside another form. What I'm trying to achieve is when I submit the parent form, it is submitted to a defined URL however, when I submit the child form, it is submitted to a different URL.
I know its not possible in html to use nested forms but can anyone suggest any trick or tip by using JQuery or JavaScript so that submitting the child form disables the parent form?
Below is my HTML Structure:
<form action="{{url('checkout')}}" class="mt-5 check-out-form" method="post">
<form action="{{url('user/address')}}" class="mt-5 check-out-form" method="post">
<input type="submit" value="Update Address">
</form>
<input type="submit" value="CheckOut">

You should not attempt to nest forms within each other. The HTML standards state this.
"There can be several forms in a single document, but the FORM element can't be nested."
If you're comfortable with it, simply have two different forms for the different functionality or a single form that does it all.
Bottom line is there is never a logical reason to nest a form.

I think you should create a model outside the main form and call it

Try this
<form action="{{url('checkout')}}" class="mt-5 check-out-form" method="post">
<form action="{{url('user/address')}}" class="mt-5 check-out-form" method="post">
<button onclick="$(this).closest('form').submit()">Send 1</button>
</form>
<button onclick="$(this).closest('form').submit()">Send 2</button>

ng-submit called twice in angular form

I have gone through several questions regarding this issue, but none solved my issue
I am using a form in which two submit type button calling same function. One button is send an extra variable with it on ng-click. when I submit my function is being called twice.
I am using an approach told in the second answer of this question (mostly voted)
I have not included controller as ng-controller in HTML
<form ng-submit="SaveContent(Form)">
<button type="submit">Save</button>
<button type="submit" ng-click="Data.IsSent = true">Save & Send</button>
</form>
How to handle this issue ?

The angular form docs specifies it as
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)
I inserted your code in below example and it behaves exactly like it is specified in the docs and only one submit (the first) is executed when submitting the form
angular.module("app",[]).controller("myCtrl",function($scope){
$scope.Data ={};
$scope.Data.IsSent = false;
$scope.SaveContent = function(form){
if($scope.Data.IsSent){
alert('submitted- and ngclick is invoked');
}else{
alert('submitted');
}
$scope.Data.IsSent = false;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<form ng-submit="SaveContent(Form)">
<input type="text" name="text1"/>
<button type="submit">Save</button>
<button type="submit" ng-click="Data.IsSent = true">Save & Send</button>
</form>
</div>

I had the same issue and it took me 5 days to figure it out. Do not add (ngSubmit) in the opening tag of the form.

Angularjs display and validate a form filed from a json

I'd like to display a form containing validation and a submit button.
I'm new with Angular, and I'm not intireli sure how to get started.
- I'd like to get a direction of what to do or perhaps some initial
indication, of what Controller to use.
JS:
myApp.controller('jsonCtrl', function($scope, $http) {
$http.get('form.json').success(function(result) {
});
HTML:
<form ng-controller="jsonCtrl">
<fieldset>
<div demo-directive ng-repeat="field in fields">
</div>
</fieldset>
</form>
Plunker

I'd like to display a form containing validation and a submit button.
You just need to write simple HTML for this
now, as I'm new with Angular, I apologise about that, I'd like to get a direction of what to do or perhaps some initial indication, of what Controller to use
Generally people bind a specific section to a specific controller and, obviously that is going to be the case for you.
In the controller you'll have two methods which will address to submit and validate buttons.
<my-form>
<form ng-submit="submitForm()" novalidate>
<fieldset>
<div my-directive ng-repeat="field in fields">
</div>
</fieldset>
<button type = "button" ng-click="onValidate(); return false;"> Validate</button>
<button type="submit"> Submit </button>
</form>
</my-form>
Now, the main div or body etc. which is parent for the code written above and is linked to a specific controller will have two functions to address to onValidate() & submitForm()

Scope lost in ng-include and ng-submit does not submit form while ng-click does but without values of form

I am trying to use ng-include and ng-submit for the first time. I have been trying to follow this SO question Why form undefined inside ng-include when checking $pristine or $setDirty()?. Here is how I have structured my index.html:
<div id="info" ">
<div ng-include src="'standard.html'" ng-controller="FormController as formcontrol">
</div>
</div>
In my standard.html
<uib-accordion close-others="oneAtATime"> <uib-accordion-group
heading="{{person.personID}}" ng-repeat="person in people.info">
<form name="formHolder.personForm>
<div class ="form-group">
<input type="text" name="name"
class="form-control"
ng-model="person.name"
ng-readonly="person.name">
</div>
----------
</form>
<button type="button" ng-submit="updateStatus(person.personID)"
class="btn btn-success btn-lg btn-block">Update</button>
Similarly, I have 20 more fields, of which only 4 are editable fields. Once user click update button, I want to get all the form data into an ajax call which is being made within the FormController.
In my FormController:
(function() {
angular.module('peopleInfo2').controller('FormController', ['$http','$scope', function($http, $scope) {
$scope.formHolder = {};
$scope.updateStatus =function (personID) {
console.log($scope.formHolder);
};
}]);
})();
Questions:
a) form does not get invoked when I use ng-submit, but it does when I use ng-click. I have read the differences between them and everywhere they say that I should use ng-submit. What am I doing wrong?
b) Currently, if I use ng-click then the data in $scope.formHolder is a personForm object, which has my data, all in object form within updateStatus function. Why am I not able to access them like deviceForm.personID? Why does it give me values like $modelValue and $viewValue instead of just the value bounded to ng-model in form?
c) If I use ng-click, then whenever form is submitted. it just picks up value from the last entry in the person.info array. Meaning that no matter what, only last value read by ng-repeat is accessible when trying to read values of ng-model. Why?
I will appreciate any help. I am close to get this thing, but I want to make sure that I understand things correctly as it will be used throughout the project. I was trying to use a custom directive earlier, but was suggested that that approach is not correct to render web forms and should use ng-include. Thank You.

There are some problems in your code but as the first one I think you should use ng-submit directive on your form tag. like this:
<form name="{{formHolder.personForm}}" ng-submit="updateStatus(person.personID)">...</form>
with an <input type="submit" class="btn btn-success btn-lg btn-block"/> for the submit button inside your form.
But why don't you use the ng-repeat inside your form and pass the whole array to your submit function?

How can i pass a dynamically generated form in angular form

Hi i have the following form that is dynamically created. I need to send the form while submitting the form. How can i do it.
Pluker Link
<form name="MCommForm{{item.Id}}" novalidate="">
<input type="text" name="MCommentN{{item.Id}}" ng-model="item.Comment">
<div ng-show="!(MCommForm{{item.Id}}.MCommentN{{item.Id}}.$pristine)" ng-click="grid.appScope.vm.saveComment(MCommForm(item.Id))"></div>
</form>
I have tried using MCommForm(item.Id) but its showing undefined ?
Can any one suggest ?
Many Thanks in Advance !

Try using ng-submit (ng-submit="submit(MCommForm(item.Id));")
https://docs.angularjs.org/api/ng/directive/ngSubmit