I am using ajax to post a form to my localproxy which then posts to affiliate client and also my database. However it keeps either not posting using ajax or coming up with an error. I used this exact code format on other sites without a problem.
my ajax code
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
$.ajax({
type: "POST",
url: "/localProxy.php",
data: $('#form').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
});
And here is my current form header and submit code
<form id="form" name="form" >
<input type="submit" name="submit" id="submit" value="Enter" />
Either the default submit activates bypassing the ajax or the alert message comes up.
Make sure you have no error in your localProxy script or it does exist. I also noticed you have a missing function enclosure in your code:
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
$.ajax({
type: "POST",
url: "/localProxy.php",
data: $('#form').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
}); // <--- I just added this and it's submitting properly
});
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
$.post('/localProxy.php', $('#form').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
});
});
});
try with this. this is shorthand version of ajax call. bt im nt sure this is OK or NT.
Related
I use this code to submit a form
<script type="text/javascript">
var frm = $('#blogform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
ev.preventDefault();
});
</script>
<form id="blogform" action="/my_url" method="post">
...
</form>
My problem is that if the submission is successful I want to be able to empty the form field.
var frm = $('#blogform'); must be var frm = $('#myform'); according to the form sample you provide in the question. And in order to reset your form, Use trigger or reset before alert(data):
$('#myform').trigger("reset");
or
$('#myform')[0].reset();
In your php code you can check whether the submission is successful or not and process that data the jquery like below:
if(data){
$('#myform')[0].reset();
alert(data);
}else{
return false;
}
Hope this may help you.
You can use JavaScript reset() method.
what is wrong with this ajax request? the page is still reloading without giving any popups. if i remove everything after the "event.preventDefault();" it will stop page reload so i figure it must something with how i'm using the ajax method. This is for a php-self validating form
<script type="text/javascript">
//attach submit event handler to the form
$('#rsgform1').submit(function(event) {
//prevent the form from submitting by default
event.preventDefault();
//Clear result div
$("#rsgresult").html('');
//get values from from
var values = $(this).serialize();
// do an ajax request
$.ajax({
url: "contact.php",
type: "post",
data: values,
success: function(){
alert("success");
$("#rsgresult").html('Submitted successfully');
},
error:function(){
alert("failure");
$("#rsgresult").html('There is error while submit');
}
});
</script>
You forgot to close the ajax call...
<script type="text/javascript">
//attach submit event handler to the form
$('#rsgform1').submit(function(event) {
//prevent the form from submitting by default
event.preventDefault();
//Clear result div
$("#rsgresult").html('');
//get values from from
var values = $(this).serialize();
// do an ajax request
$.ajax({
url: "contact.php",
type: "post",
data: values,
success: function(){
alert("success");
$("#rsgresult").html('Submitted successfully');
},
error:function(){
alert("failure");
$("#rsgresult").html('There is error while submit');
}
});
});
</script>
Try return false at the end of the callback function.
And don't forget to balance your braces as others have mentioned.
your script has a missing pair of closing brackets }) at the end
$('#rsgform1').submit(function (event) {
//prevent the form from submitting by default
event.preventDefault();
//Clear result div
$("#rsgresult").html('');
//get values from from
var values = $(this).serialize();
// do an ajax request
$.ajax({
url: "contact.php",
type: "post",
data: values,
success: function () {
alert("success");
$("#rsgresult").html('Submitted successfully');
},
error: function () {
alert("failure");
$("#rsgresult").html('There is error while submit');
}
});
});// <-- missing this closing pair
You have an error in your JS. When an error occurs, the page refreshes.
<script type="text/javascript">
$('#rsgform1').submit(function(event) {
event.preventDefault();
$("#rsgresult").html('');
var values = $(this).serialize();
$.ajax({
url: "contact.php",
type: "post",
data: values,
success: function() {
alert("success");
$("#rsgresult").html('Submitted successfully');
},
error:function() {
alert("failure");
$("#rsgresult").html('There is error while submit');
}
}); // Missing
});
</script>
trying to send POST request to script via ajax, not calling the script
<script>
function claimitem() {
var val=document.getElementById('itemid').value;
alert(val); //shows as 4 correct
$.ajax({
type: "POST",
url: "scripts/claim.php",
data: {id: val},
dataType: "json",
success: function(data) {
alert("success"); //does not show
}
});
window.location = "profile.php";
}
</script>
here i am calling the javascript function
<input type="submit" onclick="claimitem()" class="btn" value="claim - <?php echo $ebase;?> PP">
my claim.php looks like this what is wrong with my ajax call???
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['id'])) {
...
}
When you call $.ajax, you're starting an asynchronous task. This task, involving a request, doesn't stop the script so the following line is immediately executed.
As the following line replaces the page, it ends the script, including the ajax request. You must call this line in the callback to let the time for the ajax request :
$.ajax({
type: "POST",
url: "scripts/claim.php",
data: {id: val},
dataType: "json",
success: function(data) {
alert("success"); //does not show
window.location = "profile.php";
}
});
code looks ok better add some alert to error as if some problem with your ajax helper.
something like.
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
Hope you have added this to your head tag
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
then try to change input type="button"
<input type="button" onclick="claimitem()" class="btn" value="claim - <?php echo $ebase;?> PP">
I am trying to have my form validate before the ajax runs but can't seem to get the coding right for this to happen.
if i seperate them i can post using ajax with no validation or validation but it posts the default way
here is my current code i am trying
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
if (spry.widget.form.validate('#form') == true)
{
$.ajax({
type: "POST",
url: "localProxy.php",
data: $('#form').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
};
});
});
figured it out
$(document).ready(function(){
// ajax code start
$('#form').on('submit', function (e){
e.preventDefault();
Spry.Widget.Form.onSubmit = function(e, form)
{
if (Spry.Widget.Form.validate(form) == false) {
return false;
}
{
$.ajax({
type: "POST",
url: "localProxy2.php",
data: $('#consult').serialize(),
success: function (response) {
document.location = '/thank-you';
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
};
};
});
});
I am at a loss here with some simple jQuery. I have the following code in a separate file:
$(document).ready(function(){
//$("#trackit").click(function() {
$.ajax({
type: "POST",
url: 'include/trackit.php',
data: "trackingNum=123456",
success: function(data) {
alert(data);
}
});
//});
});
That works just fine, on page load it returns the expected data to the alert window.
But, if I remove the comments from this line:
$("#trackit").click(function() {
to capture the form's submit button, I get no return data.
Here is the abbreviated form info:
<form action="<?php htmlentities($_SERVER['PHP_SELF']);?>" name="tForm" id="tForm" method="post">
<button type="submit" class="buttonTracking" id="trackit" name="trackit">Track It!</button>
</form>
Am I just overlooking some simple error here?
Correct working code would be this:
$(document).ready(function(){
$("#trackit").click(function() {
$.ajax({
type: "POST",
url: 'include/trackit.php',
data: "trackingNum=123456",
success: function(data) {
alert(data);
}
});
return false; // to cancel form submission and subsequent page refresh
});
});
I'd say it's because the #trackit button is also a submit button. The click action is executing your javascript AND submitting the form. You need to change the code to:
$(document).ready(function(){
$("#trackit").click(function() {
$.ajax({
type: "POST",
url: 'include/trackit.php',
data: "trackingNum=123456",
success: function(data) {
alert(data);
}
});
return false;
});
});