I'm using multiple html on my page.
<form id="form1">
<input type="text" name="foo" id="foo">
<input type="submit" value="submit">
</form>
<form id="form2">
<input type="text" name="foo" id="foo">
<input type="submit" value="submit">
</form>
When the form is submitted I am access the data as follows:bar
var bar=$(this).find('input[name=foo]').val();
That works fine, but let's say I want to change the form data back on the html page after I have processed the submitted data. How do I reference the form which was submitted?
Something like:
$(this).$('#foo').val('Hello');
Is it possible?
Thanks!
If this is an ajax call, you can store a reference to the form before submitting:
var form = $(this);
$.ajax (...).done(function (){
form.find(...).val (...)
});
Related
I am using $_SESSION to dynamically create forms for my web store. These forms hold the custom info for the product that the customer wants. This is the layout:
Page1
Customer fills out form that looks something like this:
<form action="page2" method="post">
<input type="text" name="size">
<input type="text" name="color">
<input type="submit" name="submit" value="Review Order">
</form>
Page2
Customer reviews order details and has the option of adding more products. Customer goes back to page1 to order another one. All of the customer's orders will show on page2 in their respective form.
Looks like this:
Size: 1
Color: blue
Click Here To Checkout
Size: 2
Color:green
Click Here To Checkout
Size:3
color:red
Click Here To Checkout
What I want is one button that will add ALL orders to the PayPal cart. Sure they can add every order individually by clicking on Click Here To Checkout, but then they will have to go through a big loop to add multiple products.
I want the customer to be able to add as many products as possible and then click one button that adds all of the orders to the shopping cart.
This is what I tried but it obviously didn't work:
<script>
$(document).ready(function(){
$('#clickAll').on('click', function() {
$('input[type="submit"]').trigger('click');
});
});
</script>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<button id="clickAll">Submit All</button>
Here is the php script that generates the dynamic forms using $_SESSION:
<?php
if(isset($_POST['submit'])) :
$test = array(
'size' => $_POST['size'],
'color' => $_POST['color'],
'submit' => $_POST['submit']
);
$_SESSION['testing'][] = $test;
endif;
if(isset($_SESSION['testing'])) :
foreach($_SESSION['testing'] as $sav) {
?>
<form action="paypal.com/..." method="post">
<input type="text" name="size" value="<?php echo $sav['size']; ?>">
<input type="text" name="color" value="<?php echo $sav['color']; ?>">
<input type="submit" name="submit" value="Click Here to Checkout">
</form>
<?php } endif; ?>
So the question is, how can I submit all of the forms with ONE button?
Have you tried to do it with $.ajax? You can add an foreach, or call another form on the Onsucces function. Another approach is changing all to one form with an array that points to the right "abstract" form:
<form action="" method="post">
<input type="text" name="name[]">
<input type="text" name="example[]">
<input type="text" name="name[]">
<input type="text" name="example[]">
<input type="text" name="name[]">
<input type="text" name="example[]">
<button id="clickAll">Submit All</button>
</form>
And in php:
foreach ($_POST['name'] as $key => $value) {
$_POST['name'][$key]; // make something with it
$_POST['example'][$key]; // it will get the same index $key
}
Here is a working jsFiddle: http://jsfiddle.net/SqF6Z/3/
Basically, add a class to each form and trigger() a submit on that class. Like so:
HTML (example only):
<form action="http://www.google.com" method="get" class="myForms" id="1stform">
<input type="text" value="1st Form" name="q1" />
</form>
<form action="http://www.google.com" method="get" class="myForms" id="2ndform">
<input type="text" value="2nd Form" name="q2" />
</form>
<form action="http://www.google.com" method="get" class="myForms" id="3rdform">
<input type="text" value="3rd Form" name="q3" />
</form>
<input type="button" id="clickMe" value="Submit ALL" />
jQuery:
$('.myForms').submit(function () {
console.log("");
return true;
})
$("#clickMe").click(function () {
$(".myForms").trigger('submit'); // should show 3 alerts (one for each form submission)
});
FWIW, I do this by creating an iframe, making that the target for the second form then submit both like this
//create the iframe
$('<iframe id="phantom" name="phantom">').appendTo('#yourContainer');
and create the dual submit like this:
function dualSubmit() {
document.secondForm.target = 'phantom';
document.secondForm.submit();
document.firstForm.submit();
}
works!
first create loop get all forms id and send them to ajax.
<script name="ajax fonksiyonları" type="text/javascript">
function validate(form){
//get form id
var formID = form.id;
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'ajax.php',
data: formDetails.serialize(),
success: function (data) {
// log result
console.log(data);
//for closing popup
location.reload();
window.close()
},
error: function(jqXHR, text, error){
// Displaying if there are any errors
console.log(error);
}
});
return false;
}
//this function will create loop for all forms in page
function submitAll(){
for(var i=0, n=document.forms.length; i<n; i++){
validate(document.forms[i]);
}
}
create button for submit in order
<a class="btn" id="btn" onclick="submitAll();" href="">Save & Close</a>
then stop ajax call after success.also dont forget to log to console.
this code works in popup and closing popup after all ajax completed.
I want to get the value of an <input> field using PHP.
There are two forms on my page both of POST method.
<form method="POST">
<input type="text" name="first">
<input type="submit" name="submit" value="submit">
</form>
<form method="POST">
<input type="text" name="second">
<input type="submit" name="submit1" value="Post">
</form>
How do I get the value of the second input field? Even though if I use $_POST['second'] it shows me an error:
Undefined index: 'second'
The W3C specs define that an input can be associated to only one form. It is a sign of bad design when you need to have multiple forms and the backend has to know which data is present in other forms.
The <form> element can contain arbitrary element structures like tables, it can even contain the entire document body content. You should hardly need multiple forms.
A common use-case is to have multiple submit buttons having the same name instead. Only the pressed button will be part of the form data.
<form method="post">
<input type="text" name="text_input">
<button type="submit" name="action" value="add">submit</button>
<button type="submit" name="action" value="update">submit</button>
<button type="submit" name="action" value="delete">submit</button>
</form>
Again, do not do that, however, if you really want to share a field across multiple forms for some reason, this can only be done by javascript intercepting the form submit event. This will not work when scripts are disabled by the user.
document.querySelectorAll('form').forEach(e => {
e.addEventListener('submit', function() {
document.querySelectorAll('.multi-form-input').forEach(e => e.setAttribute('form', this.id));
})
})
<input class="multi-form-input" name="common_input" type="text">
<form id="form-1" method="post">
<button type="submit" name="action" value="1">submit</button>
</form>
<form id="form-2" method="post">
<button type="submit" name="action" value="2">submit</button>
</form>
I have one form with a few submit buttons. I want to submit the form via POST to itself to process the filled out form fields... does the jquery override the submit?
$('#myButton').click('myAction') <!-- not actual code, just for the idea -->
<input type="button" type="submit" id="myButton" value="do something">
you can use something like this:
html form:
<form id="myform" method="post" name="form" action="">
<input type="text" name="name" value="">
<input type="text" name="other" value="">
<input type="submit" type="submit" name="myButton" value="do something">
</form>
js:
$('#myform').on('submit',function(e){
e.preventDefault();
var addnew='&addnew=1234';//additional data
var _data = $('#myform').serialize();
_data = _data+addnew;
console.log(_data);
});
sample jsfiddle
I am using $_SESSION to dynamically create forms for my web store. These forms hold the custom info for the product that the customer wants. This is the layout:
Page1
Customer fills out form that looks something like this:
<form action="page2" method="post">
<input type="text" name="size">
<input type="text" name="color">
<input type="submit" name="submit" value="Review Order">
</form>
Page2
Customer reviews order details and has the option of adding more products. Customer goes back to page1 to order another one. All of the customer's orders will show on page2 in their respective form.
Looks like this:
Size: 1
Color: blue
Click Here To Checkout
Size: 2
Color:green
Click Here To Checkout
Size:3
color:red
Click Here To Checkout
What I want is one button that will add ALL orders to the PayPal cart. Sure they can add every order individually by clicking on Click Here To Checkout, but then they will have to go through a big loop to add multiple products.
I want the customer to be able to add as many products as possible and then click one button that adds all of the orders to the shopping cart.
This is what I tried but it obviously didn't work:
<script>
$(document).ready(function(){
$('#clickAll').on('click', function() {
$('input[type="submit"]').trigger('click');
});
});
</script>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<button id="clickAll">Submit All</button>
Here is the php script that generates the dynamic forms using $_SESSION:
<?php
if(isset($_POST['submit'])) :
$test = array(
'size' => $_POST['size'],
'color' => $_POST['color'],
'submit' => $_POST['submit']
);
$_SESSION['testing'][] = $test;
endif;
if(isset($_SESSION['testing'])) :
foreach($_SESSION['testing'] as $sav) {
?>
<form action="paypal.com/..." method="post">
<input type="text" name="size" value="<?php echo $sav['size']; ?>">
<input type="text" name="color" value="<?php echo $sav['color']; ?>">
<input type="submit" name="submit" value="Click Here to Checkout">
</form>
<?php } endif; ?>
So the question is, how can I submit all of the forms with ONE button?
Have you tried to do it with $.ajax? You can add an foreach, or call another form on the Onsucces function. Another approach is changing all to one form with an array that points to the right "abstract" form:
<form action="" method="post">
<input type="text" name="name[]">
<input type="text" name="example[]">
<input type="text" name="name[]">
<input type="text" name="example[]">
<input type="text" name="name[]">
<input type="text" name="example[]">
<button id="clickAll">Submit All</button>
</form>
And in php:
foreach ($_POST['name'] as $key => $value) {
$_POST['name'][$key]; // make something with it
$_POST['example'][$key]; // it will get the same index $key
}
Here is a working jsFiddle: http://jsfiddle.net/SqF6Z/3/
Basically, add a class to each form and trigger() a submit on that class. Like so:
HTML (example only):
<form action="http://www.google.com" method="get" class="myForms" id="1stform">
<input type="text" value="1st Form" name="q1" />
</form>
<form action="http://www.google.com" method="get" class="myForms" id="2ndform">
<input type="text" value="2nd Form" name="q2" />
</form>
<form action="http://www.google.com" method="get" class="myForms" id="3rdform">
<input type="text" value="3rd Form" name="q3" />
</form>
<input type="button" id="clickMe" value="Submit ALL" />
jQuery:
$('.myForms').submit(function () {
console.log("");
return true;
})
$("#clickMe").click(function () {
$(".myForms").trigger('submit'); // should show 3 alerts (one for each form submission)
});
FWIW, I do this by creating an iframe, making that the target for the second form then submit both like this
//create the iframe
$('<iframe id="phantom" name="phantom">').appendTo('#yourContainer');
and create the dual submit like this:
function dualSubmit() {
document.secondForm.target = 'phantom';
document.secondForm.submit();
document.firstForm.submit();
}
works!
first create loop get all forms id and send them to ajax.
<script name="ajax fonksiyonları" type="text/javascript">
function validate(form){
//get form id
var formID = form.id;
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'ajax.php',
data: formDetails.serialize(),
success: function (data) {
// log result
console.log(data);
//for closing popup
location.reload();
window.close()
},
error: function(jqXHR, text, error){
// Displaying if there are any errors
console.log(error);
}
});
return false;
}
//this function will create loop for all forms in page
function submitAll(){
for(var i=0, n=document.forms.length; i<n; i++){
validate(document.forms[i]);
}
}
create button for submit in order
<a class="btn" id="btn" onclick="submitAll();" href="">Save & Close</a>
then stop ajax call after success.also dont forget to log to console.
this code works in popup and closing popup after all ajax completed.
I have a form that when they submit it, it stores the info in the database. I need to be able to get the form data to come up on redirect page.
It does not need to fetch the database as I would love to do this PHP style. So lets say they enter there name and city. When they click submit it redirects them to a thank-you page with the results from the form on that page.
In a form, you have each element have a name, lets say name="username", in the php, yould get the value of this as either a get, or a post response, depending on the method of the form.
HTML Form
<form action="process.php" method="get">
<input name="username" type="text"></input>
<input type="submit" value="Submit"></input>
</form>
or
<form action="process.php" method="post">
<input name="username" type="text"></input>
<input type="submit" value="Submit"></input>
</form>
process.php
$someusername = $_GET['username'];
$someusername = $_POST['username'];
Form page:
<form action="thanks.php" method="post"><input type="text" name="myname" placeholder="Name" /><input type="text" name="mycity" placeholder="City" /><input type="submit" value="submit"></form>
PHP Page
print "Thanks, ".$_POST['myname']." who lives in ".$_POST['mycity']."!";