Greetings fellow programmers, I've been trying to solve this all day but I dont know much with ajax. I can handle regular forms that require refresh.
Basically I have a form where the client enters their desired quantity and a button that says add to cart with an ajax function that handles the post request.
<form id="qnt'.$ID'">
<input type="hidden" value="'.$price.'" name="price">
<input type="text" placeholder="Enter Quantity in Kilo" name="qty" required>
<button class="btn btn-danger" type="button" onclick= add('.$ID.') class="filled-button" class="add2cart">Add To Cart</button></h6>
</form>
This is the ajax request:
<script type="text/javascript">
function add(id){
qnt = $('#qnt'+id).serialize();
$('#qnt'+id).trigger("reset");
$.ajax({
url:'add2cart.php',
method:'POST',
data:{
'id': id,
'qnt': qnt
},
success:function(data){
console.log(data);
}
});
}
</script>
Now this works completely fine(Tbh a friend helped me do it) , Now I reached a situation where I want to add another variable to the form:
<form id="qnt'.$ID'">
<input type="hidden" value="'.$newPrice.'" name="newPrice">
<input type="text" placeholder="Enter Quantity in Kilo" name="qty" required>
<button class="btn btn-danger" type="button" onclick= add('.$ID.') class="filled-button" class="add2cart">Add To Cart</button></h6>
</form>
How can I pass that new hidden input with the ajax script? Thanks.
You can place the id in a hidden input in the form, then the serialize will have the id in it
<form id="qnt'.$ID'">
<input type="hidden" value="'.$ID.'" name="id">
<input type="hidden" value="'.$newPrice.'" name="newPrice">
<input type="text" placeholder="Enter Quantity in Kilo" name="qty" required>
<button class="btn btn-danger" type="button" onclick= add('.$ID.') class="filled-button" class="add2cart">Add To Cart</button></h6>
</form>
function add(id){
qnt = $('#qnt'+id).serialize();
$('#qnt'+id).trigger("reset");
$.ajax({
url:'add2cart.php',
method:'POST',
data: qnt,
success:function(data){
console.log(data);
}
});
}
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'm trying to send the value of this
<form class="paypal" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST">
<input type="hidden" name="business" value="nineteenseventees#gmail.com">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="item_name" value="'.$fetch['ShirtType'].'-'.$fetch['ShirtSize'].'-'.$fetch['ShirtColor'].'">
<input type="hidden" name="item_number" value="'.$fetch['itemnum'].'">
<input type="hidden" name="quantity" value="'.$fetch['quantity'].'">
<input type="hidden" name="amount" value="'.$fetch['ItemPrice'].'">
<input type="hidden" name="currency_code" value="PHP">
<input type="hidden" name="cancel_return" value="http://localhost/imageupload/index.php">
<input type="hidden" name="return" value="http://localhost/imageupload/paysuccess.php">
<input type="hidden" id="ordernumber" value="'.$fetch['OrderNum'].'">
<button class="btn btn-primary pull-right" type="submit" id="paypalbutton" name="paypalbutton"><i class="fa fa-check"></i></button>
When I press the button, this go to paypal. But I want it to go to paypal via ajax and also save the OrderNum to session.
I tried using AJAX but i can't seem to make it work. here it is
$('#paypalbutton').on('click', function(e){
var num = $("#ordernumber").val();
$.ajax({
type: 'POST',
url: 'redirect.php',
data: {
onumber: num
}
});
});
I'm trying to send it here: redirect.php
<?php
session_start();
require_once 'dbconnect.php';
$_SESSION['order'] = $_POST['onumber'];
echo $_SESSION['order'];
?>
$('.paypal').on('submit', function(e){
e.preventDefault();
var num = $("#ordernumber").val();
$.ajax({
type: 'POST',
url: 'redirect.php',
data: {
onumber: num
}
});
});
First of All:
<button class="btn btn-primary pull-right" type="button" id="paypalbutton" name="paypalbutton"><i class="fa fa-check"></i></button>
Second:
$('#paypalbutton').click(function(){
var num = $("#ordernumber").val();
$.post('redirect.php',{onumber:num},function(data){
if(data){
console.log(data);
$(".paypal").submit();
}
});
});
Replace this by your javascript code please and try once.
I am submitting a form which contains some text field, dropdown and a file input. The form is submitted using JQuery/Ajax and the data is sent to php. If I submit the form without using bootstrapFileInput, all the data of the form is sent to php and correctly processed but as soon as I enable bootstrapFileInput, the input file is missing while all other fields are correctly submitted.
I get no error in the console.
HTML :
<div class="form-inline">
<div id="singUser">
<form role="form" name="setLimit" id="setLimit" class="form-inline" enctype="multipart/form-data">
<input type="text" id="userid" name="userid" class="form-control" placeholder="Enter User ID">
<input type="text" id="quota" name="quota" class="form-control" placeholder="Enter Quota limit in GB">
<select class="form-control" id="ltype" name="ltype">
<option value="desktop">Desktop</option>
<option value="server">Server</option>
</select>
<input type="checkbox" id="rmlimit" name="rmlimit"> Remove Limit (Set to Shared storage)
<button type="submit" id="sgUserButn" class="btn btn-default btn-primary" >Set Limit!</button>
</div>
<span id="multUser">
<p>Select a file with a list of user ids and the limit in GB you wish to assign download the example file.</p>
<img src="img/csvex.png" id="csvexp" ><br><br>
<input class="file-input-wrapper" type="file" id="lsUsers" name="lsUsers" data-filename-placement="inside" title="Select CSV File">
<button id="mulUserButn" type="submit" class="btn btn-default btn-primary" >Set Limit!</button>
</span>
</form>
</div>
JQuery
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
$('input[type=file]').bootstrapFileInput();
$('.file-inputs').bootstrapFileInput();
$('#setLimit')
.submit(function(e) {
busyStatus();
$.ajax({
url: 'testProcess.php',
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
complete: function() {
idleStatus();
},
success: function(result) {
//$(document.body).append(result);
//alert( $(result).toArray() );
$("#result").html(result);
}
});
e.preventDefault();
return false;
});
});
PHP
<?php
print_r($_POST);
echo '<br>';
print_r($_FILES);
?>
I am really out of ideas and would really appreciate some help.
Thanks in advance.
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 am trying to post a modal form to a table using php, jquery .ajax but it never works.. tried debugging using firebug and i don't see any errors. i tested the form by using form action="notes_functions.php" and it worked fine.
Profile.php
<div class="modal-body">
<form class="noteform" id="notesmodal" method="post">
<fieldset>
<label>Title</label>
<input type="text" class="form-control" name="note_title" placeholder="Enter a title for your note">
<label>Note</label>
<textarea rows="4" cols="50" class="form-control" name="note_content" placeholder="note"></textarea>
<label>Note type</label>
<div class="panel-body">
<input type="tagsinput" id="teetete" class="tagsinput" value="" />
</div>
<label for="exampleInputFile">Attach a document</label>
<input type="file" id="exampleInputFile3">
<p class="help-block">PDF, DOCX and image files are supported.</p>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
<input type="label" name="note_account" value="<?php echo $acctname ?>"/>
</label>
</div>
<input type="hidden" name="note_creator" value="<?php echo $_SESSION['username'];?>"/>
</fieldset>
<button class="btn btn-default" id="submitnote" >ADD</button>
</form>
</div>
this is my js code
$(function(){
$("button#submitnote").click(function(){
$.ajax ({
type:"POST",
url:"notes_functions.php",
data: $('form.noteform').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("form.noteform").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
notes_functions.php
<?php
include_once 'dbconnect.php';
if (isset($_POST['note_title'])) {
$notetitle = strip_tags($_POST['note_title']);
$noteContent = strip_tags($_POST['note_content']);
$noteAccount = strip_tags($_POST['note_account']);
$noteCreator = strip_tags($_POST['note_creator']);
mysql_query("INSERT INTO account_notes (note_title, note_contents, note_account, note_creator)
VALUES ('$notetitle','$noteContent', '$noteAccount', '$noteCreator') ");
echo "Name = ".$notetitle;
echo $noteCreator;
}
?>
You should really be using .submit() rather than click (for submit-by-enter, etc.) and returning false to block conventional submits. You also need to make sure the code to bind the events runs after the form element is created. The easiest way to do this is to put it in the document ready handler.
jQuery(document).ready(function ($) {
$("#notesmodal").submit(function () {
$.ajax({
type: "POST",
url: "notes_functions.php",
data: $('form.noteform').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("form.noteform").modal('hide');
},
error: function () {
alert("failure");
}
});
return false;
});
});
And change the ADD button to be:
<input type="submit" name="submit" class="btn btn-default" id="submitnote" value="ADD" />