I want to submit two form into two url and want to submit from two another functions of a Controller.
<form method="post" url="{ '/url1' }">
</form>
<form method="post" url="{ '/url2' }">
</form>
<button type="submit">Submit</button>
Is it possible to do without AJAX??
Simple answer : no, without ajax you can't send two requests.
Complicated answer: unless the first one carries the data for both then in the first response, it sends the second request with the data for it. Which is so complicating things, you should just do it in one request.
You can use jQuery to submit both forms like in the example below:
First of all, add an id to your button like this
<button type="submit" id="submitBtn">Submit</button>
Add ID to your forms:
form method="post" id="form1" url="{ '/url1' }">
form method="post" id="form2" url="{ '/url2' }">
I don't know what is wrong with the stakoverflow editor, that is why i deleted the "<" sign.
3. Now handle the jQuery click event:
$(document).ready(function(){
$('#submitBtn').on('click',function(){
$('#form1').submit();
$('#form2').submit();
});
});
You could give the forms different ids but same action.
Then in the controller called by the submit button, let IF statements check for the form ids and return the respective view desired eg
$requests = $request->all();
$form_Id = $requests['form1_Id'];
if($form_Id != 'id_of_first_form') {
return view('url2');
}else{
return view('url1');
}
If you have a main page form and a modal form and you wanna submit both in order, you can do it with javascript like this
// cause double submits at once
function doubleSubmit()
{
$.post($('#recordPaymentForm').attr("action"), $('#recordPaymentForm').serialize(), function(response) {
$('#submitEditOrderButton').trigger('click');
});
return false;
}
Leave your main page form as it is and change your modal form on submit attribute like this
<form id="recordPaymentForm" method="POST" action="/orders/{{$order->id}}/payments" onsubmit="return doubleSubmit(event)">
Please not that we first submit modal form and then we trigger on click event of submit button (submitEditOrderButton) on the main page. In this example, we first submit payment form and then we trigger click event of main page form which cause a form submit on the main page.
Related
I have a view. In this view
<form id="validate'>
some fields are here.
</form>
<form>
</form>
<input type="Submit" value ="Submit" >
Now submit button will not work since it is in below and I want form id="validate" to get posted.
Since I have to do some JS validation on form id="validate" this will also not work.
My question here is how to post the form and validate the form. Let em know, I f I am not clear here.
It is easy with JQuery if you are using it
<form id="validate'>
some fields are here.
</form>
var validation = $('#validate').validate();
if validation is successfull
$('#validate').submit();
else
//do something else
Is it possible to allow multiple clicks on a sigle submit button of a form? I have a form where I want to perform an action on the first submission (first click) and a different action on the second submission (second click).
I am basically using ajax to populate a div in the form during the first submission and I want to submit the form on the second click.
I have tried to put by button in the div to by updated, and after the first click, I update update the div and re-creating the button in the updated div. But if I use this method, how can I set the action method of the newly created button in my controller method for Ajax?
My controller method returns something like
return Content( mystring + <input type='button' value='continue submission'/>
if i use this approach, how do I set the action method of the buttton, or is there another way of doing this?
Use two buttons with JavaScript:
Button 1 is shown initially. On click, it hides itself, shows button 2, and performs your action 1.
Button 2 is hidden initially. It is unhidden by button 1 and on click, it performs your second action.
This looks a little weird but I can tell you how to do this. Take an input type="submit" and make it hidden. Have a variable as var flag = false; When user first clicks you input type="button" call a function and do your stuff and make sure to make the flag=true; In the function itself check if flag=true; the trigger the event of your input type="submit".
Like as follows:
<input type="button" id="btn1" onclick="perfromAction()" value="submit"/>
<input type="submit" id="btn2" value="submit" style="display:none"/>
<script type="text/javascript">
var flag=false;
function performAction()
{
if(flag){
$("#btn2").trigger("click");
}
else{
//do processing
flag=true;
}
I try to made nested form with validation. All works fine, but when I remove one of nested form, validation continue to use removed form. I made jsfiddle example http://jsfiddle.net/sokolov_stas/VAyXu/
When example runs, form are valid. If click "+" button, nested form will be added and valid will be false. Then click "-" button, and valid will be false all the same.
The question is: How to remove dynamic created form from validation processing.
Well, for one thing, a <form> inside of a <form> is not valid HTML.
Second, you're not supposed to be doing DOM manipulation from inside the controller. The controller is for "business" logic. See the section on controllers here
For what you're doing, you'd probably be better off using one form, with an ng-repeat inside of it, and adding additional elements to an array:
<form name="myForm" ng-controller="FormCtrl" ng-submit="doSomething()">
<div ng-repeat="item in items">
<input ng-model="item" type="text" required/>
</div>
<a ng-click="addItem()">+</a>
<a ng-click="removeItem()">-</a>
<button type="submit">Submit</button>
<div>Form valid: {{myForm.$valid}}</div>
</form>
and the controller:
function FormCtrl($scope) {
$scope.items = [];
$scope.addItem = function() {
$scope.items.push(null);
};
$scope.removeItem = function() {
$scope.items.pop();
};
$scope.doSomething = function () {
//your submission stuff goes here.
};
}
I have an strongly typed view for my model and what I'd like is that when the user clicks on submit, a confirmation box pop up confirming that the user does indeed wish to submit the form, if they click cancel then it shouldn't fire the HttpPost Action for that View, is this possible?
Of course it is possible. I like to use an unobtrusive approach. Here is a simplified example:
jQuery(document).ready(function () {
jQuery('[data-confirm]').click(function (e) {
if (!confirm(jQuery(this).attr("data-confirm")))
{
e.preventDefault();
}
});
});
Then you only need to add a data-confirm attribute to your submit button for example
<input type="submit" data-confirm="are u sure?" />
Of course you can use this attribute on links, buttons, etc. you are not restricted to submit buttons only, and if you want to implement a fancier confirm dialog later than you will have to replace the code only in one place.
function doSubmit()
{
if(window.confirm("ARE YOU SURE TO PERFORM THIS ACTION"))
{
return true;
}
else return false;
}
call doSubmit() function on onsubmit event of the form,
Eg- onsubmit="return doSubmit()
you can add a simply jQuery call for that.
at the end of your view add:
<script type="text/javascript">
$("form").submit(function() {
return confirm('Are you sure?');
});
</script>
or, add a
onsubmit="return confirm('Are you sure?');"
as a new element property
I believe this can be done by overriding the submit button using jquery. Jquery .submit()
This way, when the person hits submit you can show a message and either submit it or cancel it.
I have a form + layout like so:
<form ...>
<div id="editor">
[form html]
<input type="submit" value="Submit form" />
</div>
</form>
And the following javascript:
$(function() {
var form = $('#editor').parents('form');
alert(form.length); // this alerts "1"
$(document).on('submit', 'form', function() {
alert('document form submit fired'); // this works as expected (alerts)
});
form.on('submit', function() {
alert('selected form submit fired'); // this is never alerted
});
});
This form is not loaded via ajax. When the page loads, the first dialog alerts "1". However when submitting the form, only one alert is fired -- the one that triggers submit for all forms in the document.
Why would this happen?
It does work. Something else is happening which is preventing the second alert from firing.
Your form selector is incorrect.
Try and do this
$("form").on('submit', function() {
Pretty sure this should work
Actually if nothing is being loaded through ajax or dynamically through javascript
You can just do
$("form").submit(function() {
EDIT
Scratch my above. Didn't see you set the value of form. Check out http://jsfiddle.net/s3fvM/1/. Seems to be working fine to me. both are firing and alerting.