I am trying to submit a form without reloading the page. I have tried using this script with no success:
$('#formId').submit(function(e){
$.ajax({
type: "POST",
url: 'serverSide.php',
data: $('#formId').serialize(),
success: function(data){
alert(data);
}
});
e.preventDefault();
});
Does anyone know what I am doing wrong?
Using return false will usually do the trick
$('#formId').submit(function(e){
$.ajax({
type: "POST",
url: 'serverSide.php',
data: $('#formId').serialize(),
success: function(data){
alert(data);
}
});
e.preventDefault();
return false;
});
Try putting preventDefault before the AJAX. This way the default actions are prevented before the ajax-request is triggered
$('#formId').submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: 'serverSide.php',
data: $('#formId').serialize(),
success: function(data){
alert(data);
}
});
});
Related
I have a situation where I make an ajax call, on returning from which (successfully), I make an another ajax call with the returned data and submit the page. The pseudo code looks something like this:
$.ajax({
url: 'first_page.jsp',
type: 'POST',
dataType: 'JSON',
data: {...}
}).done(function(response) {
$.ajax({
url: '2nd_page.jsp',
type: 'POST',
dataType: 'JSON',
data: {...}
});
thisPage.submit();
});
The inner ajax call is not executed if I do not comment out the 'submit' line. I do not understand the behaviour. Can someone please help me with this.
Thanks
You need to execute submit on second ajax sucess.
For example
$.ajax({
url: '',
type: 'GET',
data: {
},
success: function (data) {
$.ajax({
url: '',
type: 'GET',
data: {
},
success: function (data) {
//do your stuff
}
$("input[type='submit']").click(function(event){
event.preventDefault();
$.ajax({
url:'abcd.php',
method:'post',
type:'json',
async:false,
success:function(response){
$.ajax({
url:'abcde.php',
method:'post',
type:'json',
data:{res:response},
success:function(response){
console.log(response);
}
});
$("form").submit();
}
});
});
Try this one.Its working correctly.
I'm realy struggling on a peace of code by hours:
$('#property_image_uploader').on('submit',function(e) {
var formData = new FormData(this);
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
$.ajax({
contentType: 'application/x-www-form-urlencoded;charset=UTF-8'
, method: 'post'
, url: 'property_info_box.php'
, data: {id: parseInt(data)}
, success: function(page){
$('#property_info_box', parent.document).html(page);
return false; }
});
},
error: function(data){ console.log(data); }
});
});
$("#property_image_chooser").on("change", function(e){
$("#property_image_uploader").submit();
});
The problem is that everytime $('#property_image_chooser') changes, the $('#property_image_uploader') submition is fired twice. I've tried to place e.preventDefault() and e.stopImmediatePropagation() in everywhere inside this two functions and THIS problem went away, but then, the page that is loaded on second ajax call freezes, and no button can be trigged anymore...
Thanks to all the problem is solved by adding the e.preventDefault() at the submition and removing the 'return false' on the the second ajax call. The final code looks like this:
$('#property_image_uploader').on('submit',function(e) {
var formData = new FormData(this);
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
$.ajax({
contentType: 'application/x-www-form-urlencoded;charset=UTF-8'
, method: 'post'
, url: 'property_info_box.php'
, data: {id: parseInt(data)}
, success: function(page){
$('#property_info_box', parent.document).html(page); }
});
},
error: function(data){ console.log(data); }
});
});
$("#property_image_chooser").on("change", function(e){
e.preventDefault();
$("#property_image_uploader").submit();
});
Thank you all very much...
Following this previous link, I tried a new AJAX code, but still getting the same result (Data is inserted correctly, but can't stay in the same page).
$(function(){
$("#form1").on("submit", function(e){
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize(),
dataType: 'json',
success: function(data) {
alert($('#form1').serialize());
});
e.preventDefault();
});
});
The form has an id="form1" and submit button inside this form is id="insert".
Any help is appreciated, need to fix this today.
The success function should be closed before closing AJAX function. You forgot to add a closing }:
$(function(){
$("#form1").on("submit", function(e){
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize(),
dataType: 'json',
success: function(data) {
alert($('#form1').serialize() + "&insert=yes"); // add this
} //<--------------------------------------- You missed this
});
e.preventDefault();
});
});
You are sending the insert key as a parameter to post, but it doesn't work because you are not adding it while sending to AJAX. So add that and it works.
I have an ajax call that works great the first time the form is submitted after that all javascript on the page seems to break. As well as the form won't submit with ajax again.
Here is my ajax call:
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
},
});
event.preventDefault();
});
I'm getting no errors in my console. Any ideas what might be causing this?
I solved the issue, the main page content was changing. Which was causing the javascript to unload. So I need to use Jquery .on/.live and then it works. For what ever reason this worked fine on one server and not on another.
Use as below: No Need to define event.preventDefault();
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
$('input:submit').removeAttr("disabled");
},
});
return false;
});
Remove disabled after submitting the form. And remove the , mentioned by #JustinRusso.
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
$('input:submit').removeAttr("disabled");
}
});
event.preventDefault();
});
How to send ajax success response to jQuery Modal (jQuery Modal Site) when i click submit and automatically show modal with response. This is my ajax to post:
$('#rincian').submit(function() {
$.ajax({
data: $(this).serializeArray(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$('#rinci').html(response);
}
});
return false;
});
UPDATE
Answered by Jossef
I have changed it to $('#rinci').html(response).modal();
$('#rincian').submit(function() {
$.ajax({
data: $(this).serializeArray(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$('#rinci').html(response).modal();
}
});
return false;
});
http://jsfiddle.net/5WEVL/
$('#clickme').click(function() {
$.ajax({
url: '',
success: function(response) {
$('#modal-div').html(response).modal();
}
});
});
add .modal(); and it should work