I have the following code:
$.ajax({
type: 'GET',
url: 'index.php?route=checkout/onepagecheckout/getpaypaldata',
dataType: 'json',
success: function(json) {
$('#pp_info').html(json['output']);
$('#payment').submit();
}
});
The ajax requests receives a json object containing a html form like :
<form id="payment" method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" value="_cart" name="cmd">
<input type="hidden" value="1" name="upload">
<input type="hidden" value="test#yahoo.ca" name="business">
<input type="hidden" value="Sample Item Name" name="item_name_1">
<input type="hidden" value="TESTI-1" name="item_number_1">
<input type="hidden" value="104.98" name="amount_1">
<input type="hidden" value="1" name="quantity_1">
<input type="hidden" value="0" name="weight_1">
<input type="hidden" value="Type" name="on0_1">
<input type="hidden" value="As Shown" name="os0_1">
<input type="hidden" value="Delivery Date" name="on1_1">
<input type="hidden" value="Jun 23,2012" name="os1_1">
<input type="hidden" value="Comments" name="on3_1">
<input type="hidden" value="test message" name="os3_1">
</form>
which contains the information that PayPal requires in order to process the order. Everything works fine except I believe sometimes the form gets submitted before the jQuery .html function is done with loading the html content.
Is there any callback function for .html ? or any other method that I can use to solve the issue ? the PayPal data comes as a HTML form and I can't change that part, so I only have one option which is somehow load the html content and submit the form !
You may try this
success: function(json) {
$('#pp_info').html(json['output']).promise().done(function(){
$('#payment').submit();
});
}
Related
I have a HTML form
<html>
<head></head>
<form>
<input type="text" name="question[]" />
<input type="text" name="question[]" />
<input type="file" name="image" />
<input type="submit" name="save" />
</form>
</html>
Now to submit form with ajax
I have ajax code but its not working. It's get only one value.
$("#submit").click(function() {
var que_id = $("input[type='text'][name='question[]']").val();
$.ajax({
type: "POST",
url: "action.php",
data: {"que_id": que_id},
success: function(result) {
$("#question_wrap").html(result);
}
});
});
How do I do it?
Send form data to php file using ajax
add enctype to your form
<form id="questionForm" action="" method="post" enctype="multipart/form-data">
<input type="text" name="question[]" />
<input type="text" name="question[]" />
<input type="file" name="image" />
<input type="submit" name="save" />
</form>
Pass form data to php file using serialize
$.ajax({
url: 'action.php',
data: $("#questionForm").serialize(),
method: "post",
success: function (result) {
$("#question_wrap").html(result);
}
});
access form values in PHP file using the field name
<?php
foreach($_POST['question'] as $key => $value){
// your logic
}
$filedata= $_FILES['image'];
?>
I have two forms, one for uploading a file and another for filling the form with information. I need to upload the file without refreshing the page first and then submit the form using ajax. And here are the codes:
form_file
<h1>Insert Employee</h1>
<form id="form">
<input id="name" placeholder="arabic name.." type="text" name="name_ar"/><br>
<input id="name" placeholder="english name.." type="text" name="name_en" value=""/><br>
<input id="name" placeholder="arabic department.." type="text" name="dep_ar" /><br>
<input id="name" placeholder="english department.." type="text" name="dep_en" /><br>
<input id="name" placeholder="arabic job.." type="text" name="job_ar"/><br>
<input id="name" placeholder="english job.." type="text" name="job_en" /><br>
<input id="name" placeholder="extention#.." type="text" name="ext" /><br>
<input id="name" placeholder="office#.." type="text" name="office" /><br>
<input id="name" placeholder="mobile#.." type="text" name="mobile" /><br>
<input id="email" placeholder="email" type="text" name="email"/><br>
<br /><br />
<div class="upload_form">
<form id='form1'>
<input type="file" name="userfile" size="20" />
<input type="button" value="upload" id="upload" />
</form>
<br/><br/>
</div>
<input type="button" value="Click" id="submit"/>
<input type="reset" value="Reset"/>
</form>
</div>
AND HERE IS THE AJAX: I know how to submit data using ajax but I need help for how to upload a file using ajax without refreshing the page, and then take the name of that file, send it again with the form, and save it to database.
<script>
$(document).ready(function(){
$('#upload').click(function(){
console.log('upload was clicked');
//ajax POST
$.ajax({
url:'upload/do_upload',
type: 'POST',
success: function(msg) {
//message from validation php
//append it to the contact_form id
$('#uploud_form').empty();
$('#uploud_form').append(msg);
}
});
return false;
});
$('#submit').click(function(){
console.log('submit was clicked');
//empty msg value
//$('#msg').empty();
//Take form values
var form_data = {
name: $('#name').val(),
email: $('#email').val(),
message: $('#message').val()
};
//ajax POST
$.ajax({
url:'',
type: 'POST',
data: form_data,
success: function(msg) {
//message from validation php
//append it to the contact_form id
$('#contact_form').empty();
$('#contact_form').append(msg);
}
});
return false;
});
});
</script>
Not sure whether I get it properly or not. I will try to answer as per my understanding.
You need to write server side code which will save the image on server.
I believe you are able to make the AJAX call to initiate point 1.
From your upload service (point 1), your should return the "relative path" of the image which was uploaded.
In success callback of your AJAX call (point 2) you should be able to capture the relative path.
Once the relative path has been captured you should add it to DOM or say any element.
Then you can start another AJAX call or post back (submit form) based on your requirement.
If this is not the problem then please be specific in what you need and provide more information.
I do it like this and it's work for me :)
<div id="data">
<form>
<input type="file" name="userfile" id="userfile" size="20" />
<br /><br />
<input type="button" id="upload" value="upload" />
</form>
</div>
<script>
$(document).ready(function(){
$('#upload').click(function(){
console.log('upload button clicked!')
var fd = new FormData();
fd.append( 'userfile', $('#userfile')[0].files[0]);
$.ajax({
url: 'upload/do_upload',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
console.log('upload success!')
$('#data').empty();
$('#data').append(data);
}
});
});
});
</script>
I have the following code that submits data to an asp.net-mvc controller action via jquery ajax
var queryString = "name=Joe&age=22&weight=200";
$.ajax({
url: '/MyController/Generate',
type: 'post',
data: queryString,
dataType: 'json'
});
this works fine and binds to the controller action parameter
public ActionResult Generate(MyParams p)
{
Console.Write(p.name);
Console.Write(p.age);
Console.Write(p.weight);
}
The issue now is that I need to change this from ajax to being a regular form post (I need to use regular form post as I am now returning a file from the controller action). I am trying to figure out how I can get that same querystring variable to get submitted as part of a regular form post (non ajax).
Is this possible?
try with html.beginform
#using (Html.BeginForm("Generate", "MyController","name=Joe&age=22&weight=200", FormMethod.Post, new { id = "frmMyForm" }))
{
// Your form elements
}
If you want that data to be fixed you can make a form like this:
<form action="/MyController/Generate" method="post">
<input type="hidden" name="name" value="Joe" />
<input type="hidden" name="age" value="22" />
<input type="hidden" name="weight" value="200" />
<input type="submit" />
</form>
Otherwise, if you want the data to be editable, it goes like this:
<form action="/MyController/Generate" method="post">
<input type="text" name="name" />
<input type="number" name="age" />
<input type="number" name="weight" />
<input type="submit" />
</form>
I have the following script
$(document).ready(function(){
$("#SoumettreCarte").submit(function(ev) {
alert('ok');
ev.preventDefault();
ville="bonjour";
$.post("../cartes/essai2.php", {ville:ville})
.done(function (response) {
// window.location.replace("http://localhost/projet2/cartes/essai2.php");
});
});
});
When i click on submit, i want it to redirect me to essai2.php, so i use window.location.replace, but then i lose the value of my $_POST. So my problem, is how to load another page after submitting a form with javascript without losing my $_POST. Thanks for your help.
When i try action="essai2.php", i don't get "ville" in my $_POST.
You can make a hidden field like this:
HTML
<input type="hidden" name="ville" id="ville">
You can change the input field's value like this:
JQUERY
$(document).ready(function(){
ville = 'Bonjour';
$("#ville").val(ville);
//or $("[name=ville]").val(ville);
}
you can do like this
<form action="essai2.php" class ="SoumettreCarte" id="SoumettreCarte" method="post" >
<input type="text" name="pays" id="pays">
<input type="hidden" name="lat" value="">
<input type="hidden" name="lng" value="">
<input type="submit" name="submit" id="soumettre" value="soumettre la carte" >
</form>
in jquery part do like this
var lat = "some lattitude";
var lng = "some longtitude";
$("[name=submit]").click(function(e){
$("[name=lat]").val(lat);
$("[name=lng]").val(lng);
});
<form action="essai2.php" class ="SoumettreCarte" id="SoumettreCarte" method="post" >
<input type="text" name="pays" id="pays">
<input type="hidden" name="lat" value="">
<input type="hidden" name="lng" value="">
<input type="submit" name="submit" id="soumettre" value="soumettre la carte" >
</form>
<script type="text/javascript">
$.post("../cartes/essai2.php", data:$("#SoumettreCarte").serialize())
.done(function (response) {
});</script>
you can try this one..
I am learning javascript but I still do not get to the book's chapter that could answers my question, so I will be very grateful if somebody can put me in the right track.
Here is the situation:
I am using jquery to submit a form. However I need to put two forms (of the same kind but referring to different object) and I want to use the same jquery function to submit the one I choose.
This is the jquery function:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".submit").click(function(){
var name = $("#student").val();
var mark = $("#mark").val();
var dataString = 'student='+ student + '&mark=' + mark;
$.ajax
({
type: "POST",
url: "records.php",
data: dataString,
success: function()
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
</script>
These are the forms I would like to pass to the above function depending on the one I click.
<form method="post" name="form">
<input type="hidden" id="student" name="student" value="Mandy" >
Mark: <input size="2" id="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
<form method="post" name="form">
<input type="hidden" id="student" name="student" value="Fred" >
Mark: <input size="2" id="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
Thanks
Well, first thing's first - you're going to get nowhere with the same id's on the page. Change the id's on student and mark to classes (which do not have to be unique):
<form method="post" name="form">
<input type="hidden" class="student" name="student" value="Mandy" >
Mark: <input size="2" class="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
<form method="post" name="form">
<input type="hidden" class="student" name="student" value="Fred" >
Mark: <input size="2" class="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
Then the jQuery is pretty simple - find the nearest form and seek out the student and mark by class (scoped to the form):
$(".submit").click(function(){
var $form = $(this).closest('form');
var student = $(".student", $form).val();
var mark = $(".mark", $form).val();
var dataString = 'student='+ student + '&mark=' + mark;
$.ajax
({
type: "POST",
url: "records.php",
data: dataString,
success: function()
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
Live example: http://jsfiddle.net/6Lc8R/