Html:
<form class="allforms" method="POST" action="/auth/myaccount/personal">
<input type="hidden" name="_method" value="PATCH">
...
</form>
<button id="allsubmit" class="btn btn-info">Continue</button>
jquery:
$(document).ready(function(){
$("#allsubmit").click(function(){
$('.allforms').submit();
});
});
I have 3 forms in my html code like above.
My button is out of any my forms.
How to have one submit button for all my forms. I tried the click function but it doesn't work. Why?
Form submission is a synchronous action, so when you submit a form and then immediately submit a different form in your page, the first form's submission is canceled.
What you can do instead is make sure the forms are submitted asynchronous (using ajax):
$(function() {
$("#allsubmit").click(function(){
$('.allforms').each(function(){
valuesToSend = $(this).serialize();
$.ajax($(this).attr('action'),
{
method: $(this).attr('method'),
data: valuesToSend
}
)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH1">
<input type="submit" />
</form>
<br />
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH2">
<input type="submit" />
</form>
<br />
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH3">
<input type="submit" />
</form>
<br />
<button id="allsubmit" class="btn btn-info">Continue</button>
A few notes
This will not work with forms that have file-uploading (enctype="multipart/form-data")
You need to decide what to do after the submission is done (because nothing in the page will change).
You can't submit forms in stackoverflow-snippets, so don't try to run this here :)
I didn't test it but try this one:
$("#allsubmit").on("click", function(){
$('.allforms').each(function(){
$(this).submit();
});
});
Note that all of your forms have to have class="allforms" attribute
Related
If I have a simple html form with two submit buttons:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
It is possible to only post the hidden input if the "confirm" submit is clicked?
If the "goback" submit is clicked the hidden input should be ignored. I know how to accomplish this with JavaScript but was wondering if it can be done with just html.
For anyone wondering, this is how you do this in JavaScript:
<script>
var elements = document.getElementsByClassName('submit_form');
elements[0].addEventListener(
'submit',
function(event) {
if(event.explicitOriginalTarget.name === 'goback'){
var hiddenInput = document.querySelector("input[name='step']");
hiddenInput.setAttribute("disabled", "disabled");
}
}
);
</script>
You could put the buttons in 2 separate forms:
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="goback" value="Go Back" />
</form>
<form method="POST" class="submit_form main_form" action="myaction">
<input type="submit" name="confirm" value="Confirm">
<input type="hidden" name="secret" value="hello"/>
</form>
That way the secret field will only be posted if the confirm button is clicked.
If you want to do it in the php code you can leave your form as is
and check if isset($_POST["confirm"]) to check if the confirm button was the one clicked.
I have 2 forms on one page.
Form 1
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1">
</form>
This form is submitted by:
$('#input1').on('keydown', function(e) {
if (e.keyCode == 13) {
$('#form1').submit();
}
});
as I don't want a submit button on this form.
The 2nd form:
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2">
<button type="submit">Save</button>
</form>
Now if I press the button on the 2nd form, it submits the 1st form. Not sure why that happens as the submit button is inside the second <form> tag.
Also; as form 1 will be on many pages (it's a search bar in a navigation bar) I'd like to 'future proof' this so that I don't run into problems in the future when I place multiple forms on a page. Ideally that would mean that this issue is fixed by changing form 1.
Update
Stupid mistake...! I had $('form:first').submit(); on the <button type="submit">Save</button> somewhere else in my code, so the first form got submitted...
make this change in form 2
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1">
</form>
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2">
<button type="submit" form="form2">Save</button>
</form>
read this to know more about form attribute
Something else is going on.
try hitting enter in these two fields - you will see there is no need for script
$("form").on("submit",function(e) {
e.preventDefault();
console.log(this.id + " submitted");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" method="get" action="action1.php">
<input type="text" id="input1"> Submits on enter
</form>
<hr/>
<form id="form2" method="post" action="action2.php">
<input type="text" id="input2"> Submits on enter or on click
<button type="submit">Save</button>
</form>
I'm not getting form values on submit of two forms with the same class.
When I submit one of the forms,
a) Jquery submit event is called but values are empty
b) the submit event is skipped and I'm taken right to the php file where I enter the info into a database
My Jquery
$(document).ready(function(){
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName= this.firstName.value;
// do other stuff
//complete AJAX call
});
});
My forms
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
Am I not binding correctly? Haven't had issues like this before. I've always been able to get unique input values based on the form that was submitted.
my be you can use function eq jquery for this
$(function() {
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName = $('.newStaff input[name="firstName"]').eq(0).val();
alert(firstName);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="1 2 3"/>
<input type="submit" value="submit" />
</form>
<br/>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="a b c"/>
<input type="submit" value="submit" />
</form>
I am trying to code a post form which sends the form to another window and then reloads the window in which the form was submitted in.
page2 is not on the same domain as page1 and i can't access the code of page2.
My current form on page1 looks like this:
<form target="_blank" method="post" action="https://www.page2.com">
<input type="hidden" name="input1" value="input1value">
<input type="submit" value="Submit" onclick="function1();window.location.refresh()">
</form>
The form is being send successfully and the function is being executed but the tab won't refresh.
Try this..
<form target="_blank" method="post" action="https://www.page2.com">
<input type="hidden" name="input1" value="input1value">
<input type="submit" value="Submit"onclick="window.location.reload();">
</form>
While your use case is not obvious at the moment, this might be useful.
Handle submit using script, prevent the default action, post the form and then reload the page.
<form id="myForm" target="_blank">
<input type="submit" value="Submit" onclick="wait(event);" >
</form>
script
function wait(e)
{
e.preventDefault();
document.getElementById('myForm').submit();
console.log('done!')
window.location.reload();
}
try this code this will refresh you page 1.
function function_one(){
$.ajax({
url: 'show.php',
type: 'POST',
data: {'value': $("#input1").val()},
success: function(data){
window.location.refresh();
}
});
}
<form target="_blank">
<input type="text" name="input1" value="input1value" id="input1">
<input type="submit" value="Submit" onclick="function_one()">
</form>
<p id="asfasf"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Here is one form example. It is working good without any issue.
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="3">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="5">
<button type="submit" value="submit"> Add to Cart</button>
Now I have to create the same form but a little modification needed. I have my markup like this
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8">
<button type="submit" value="submit" data-value="10" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="3" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="5" data-name="id">Try Now</button>
</form>
To submit the form I have used this jQuery.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('button[type=submit]').click(function() {
var Id = jQuery(this).attr('data-value');
var Name = jQuery(this).attr('data-name');
alert(Name);
})
});
</script>
But from this point of jQuery I don't know what to do next. So can someone kindly tell me how to submit the form by jquery with the same values as used above markup?
Update
Yes I can change my markup if you think so.
First of all, your HTML is not correct. Move the inputs inside of the form:
<form action="..." class="form-horizontal" method="post" accept-charset="utf-8">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
</form>
You can have any number of forms like above. In the JavaScript side you have to catch submit event for all forms. In the submit handler, this will be the form that was submitted.
$(document).ready(function () {
$("form").on("submit", function () {
$.ajax({
type: "POST",
url: formUrl,
data: $(this).serializeArray(),
success: function (data) {
/* handle success */
},
error: function (data) {
/* handle error */
},
dataType: "json" // remove this if the server doesn't send json data
});
return false; // prevent default browser behavior
});
});
Note $(this).serializeArray() - this returns an array like this:
[{
name: "some-input-name",
value: "some-input-value"
}, ...
Also, you may checkout the return false usage: When and why to 'return false' in JavaScript?