Submitting form with ajax and jQuery - javascript

I have a simple form with one select box and two options in it. Here is the related jQuery code:
$('.myCssClass').on('change', function() {
alert("This is executed");
$(this).parent().submit(function(e) {
alert("This is NOT executed");
$.ajax({
type: "POST",
url: "script.php",
data: $(this).parent().serialize(),
success: function(data)
{
alert(data);
}
});
e.preventDefault();
});
Form is a parent of a select box. So the first alert is executed when I change the select box option, but then next one is never reached. Any idea why?

This should do it. Don't bother with the submit event - it will not be triggered by a select box.
$('.myCssClass').on('change', function() {
$.ajax({
type: "POST",
url: "script.php",
data: $(this).parent().serialize(),
success: function(data)
{
alert(data);
}
});
});

You have to create the submit event listener outide the other event:
$('.myCssClass').parent().submit(function(e) {
$.ajax({
type: "POST",
url: "script.php",
data: $(this).serialize(),
success: function(data){
alert(data);
}
});
e.preventDefault();
});
$('.myCssClass').on('change', function() {
$(this).parent().submit();
});
Or as chain:
$('.myCssClass').on('change', function() {
$(this).parent().submit();
})
.parent().submit(function(e) {
$.ajax({
type: "POST",
url: "script.php",
data: $(this).serialize(),
success: function(data){
alert(data);
}
});
e.preventDefault();
});
But why two events? Just send the data on change:
$('.myCssClass').on('change', function() {
$.ajax({
type: "POST",
url: "script.php",
data: $(this).parent().serialize(),
success: function(data){
alert(data);
}
});
});

Try the following:
$('.myCssClass').on('change', function() {
alert("This is executed");
$(".form-with-class").submit();
});
$(".form-with-class").on('submit', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "script.php",
data: $(".form-with-class").serialize(),
success: function(data){
alert(data);
}
});
});

$('.myCssClass').on('change', function() {
alert("This is executed");
$(this).parent('form#id').submit(); // improve performance by reducing the traversal
});
$("#form-with-id").on('submit', function(e){
e.preventDefault();
var data = $(this).serialize();
$.ajax({
type: "POST",
url: "script.php",
data: data,
success: function(data){
alert(data);
}
});
});
Hope this works.

when a handler is provided it just registers the handler but it does not perform the actual submit.
You may want to call:
$(this).parent().submit();
after your handler is registered. Furthermore, within your handler, you have to refer to the form just by "$(this)" (not: "$(this).parent()"), since the handler belongs to the form.
But since you'd call the submit explicit, there is no point in registering a handler which you then invoke. You could fire your ajax-request directly:
$('.myCssClass').on('change', function() {
alert("This is executed");
$.ajax({
type: "POST",
url: "script.php",
data: $(this).parent().serialize(),
success: function(data)
{
alert(data);
}
});
});

Related

How do I redirect to another page in JS / jQuery after sending a form?

I'm trying to make a JS script that works on the same form page. Everything works up until redirecting after a successful login.
$(document).ready(function() {
$('#loginForm').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'goLogin.php',
type: 'POST',
data: $(this).serialize(),
dataType: 'html'
}).done(function(data) {
$('#results').fadeOut('slow', function() {
$('#results').fadeIn('slow').html(data);
window.setTimeout(function() {
window.location.href = 'index.php';
}, 5000);
});
}).fail(function() {
alert('Error!');
});
});
});
$.ajax({
url: 'goLogin.php',
type: 'POST',
data: $(this).serialize(),
dataType: 'html',
success: function(data){
$('#results').fadeOut('slow', function() {
$('#results').fadeIn('slow').html(data);
window.setTimeout(function() {
window.location.href = 'index.php';
}, 5000);
});
},
error: function(data){
alert('Error!');
}
});
Please check this code...Replace your ajax section...

How prevent that an user change the input value?

I've a website with the post, and when an user comment its I send an Ajax request.
$(document).on('submit', '.theFormComment', function(e){
var data_to_send = $(this).serializeArray(); // convert form to array
data_to_send.push({name: "cs_spotale", value: $.cookie("c_spotale") });
$.ajax({
type: "POST",
url: '/post/addComment',
data: $.param(data_to_send),
dataType: 'json',
success: function(data){
console.log(data);
if(data.user_id !== data.user_to_id) {
$.ajax({
type: "POST",
url: "/notification/addNotification",
data: {
post_id: data.the_post,
user_from_id: data.user_id,
user_to_id: data.user_to_id,
action: data.action,
cs_spotale: $.cookie("c_spotale")
},
dataType: 'json',
success: function(x){
socket.emit('sendNotification', {data: data, type: x.type, image: x.image});
},
error: function(){}
});
}
$('#comment-box-'+ data.the_post).val('');
$("input[id='csrf_prot']").val(data.c);
$(data.html).prependTo("#comment-" + data.the_post);
if(data.own !== data.username){
socket.emit('notify', data.own, data.username);
}
socket.emit('updateComment', {permaRoom: data.the_post, html: data.html});
},
error: function(data){
console.log(data);
}
});
e.preventDefault();
return false;
});
I saw that if I change the input value of my hidden field "post_id", the comment goes to another "post_id". There is a way to prevent this problem? Or any other idea?

Ajax not working, won't do what I want

Ajax will not submit no matter what.
I've been trying for hours...
script:
<script>
$(document).ready(
$("#submit").click(function(e) {
e.preventDefault();
$.ajax({
url: "https://maps.googleapis.com/maps/api/geocode/json?address=birmingham&key=AIzaSyCczrRP8E0BYmt9uGie0J3SgCn9ahdOhxc",
type: "GET",
dataType: "html",
success: function (data) {
alert(data);
}
});
});
});
</script>
Try this:
$(document).ready(function({
$("#submit").on('click', function(e) {
e.preventDefault();
$.ajax({
url: "https://maps.googleapis.com/maps/api/geocode/json?address=birmingham&key=AIzaSyCczrRP8E0BYmt9uGie0J3SgCn9ahdOhxc",
type: "GET",
dataType: "html",
success: function (data) {
alert(data);
}
});
});
});
I also changed the event method, but you should choose the one corresponding your jQuery version!!
P.S re-check the ({})
You've not written document ready properly. Please check below code :
<script>
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
$.ajax({
url: "https://maps.googleapis.com/maps/api/geocode/json?address=birmingham&key=AIzaSyCczrRP8E0BYmt9uGie0J3SgCn9ahdOhxc",
type: "GET",
dataType: "html",
success: function (data) {
alert(data);
}
});
});
});
</script>
I hope this resolves your issue.
PS:
FYI check the alternative ways to write document ready : Documentation
Happy Coding

making ajax call fire only once

I have an ajax call that is being fired multiple times.
I have used e.stopImmediatePropagation() and return false to prevent it from firing more than once. Is there another sure shot way to prevent ajax call more than once.
$(document).on('click', '#button1', function(e){
$.ajax({
url: 'http://www.page.com',
data: data,
method: 'POST',
success: function(data){
},
error: function(err){
}
});
e.stopImmediatePropagation();
return false;
});
You can use jQuery .one()
$(document).one('click', '#button1', function(e){
$.ajax({
url: 'http://www.page.com',
data: data,
method: 'POST',
success: function(data){
},
error: function(err){
}
});
});
var n = null;
$(document).one('click', '#button1', function(e){
$.ajax({
url: 'https://gist.githubusercontent.com/anonymous/9a6997f09de9b68c59b2/raw/f7d7b756005ad6d2b88cf0211f78a2990d7d2dc7/content.json',
data: {},
method: 'HEAD',
success: function(data, textStatus, jqxhr) {
console.log(jqxhr.getAllResponseHeaders())
$("body").append("<br>textStatus: " + textStatus + "<br>count: " + ++n)
},
error: function(err){
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">click</button>
You can use jquery.data() to store a boolean to indicate whether your function has been run before.
$(document).on('click', '#button1', function(e) {
$button = $("#button1");
if ($button.data("pressed") !== true) {
$.ajax({
url: 'http://non-existentpage',
data: {},
method: 'POST',
success: function(data) {
alert('ajax');
$button.data("pressed", true);
},
error: function(err) {
alert('ajax');
$button.data("pressed", true);
}
});
}
});
#button1 {
border: 1px solid #000;
display: inline;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button1">ajax</div>
You could also add a condition checking if the button has already been clicked by setting a variable to true after it has been clicked:
window.document_clicked = false;
$(document).on('click', '#button1', function(e){
if(!window.document_clicked){
$.ajax({
url: 'http://www.page.com',
data: data,
method: 'POST',
success: function(data){
window.document_clicked = true;
},
error: function(err){
}
});
}
});
Adding async: false to your current function
or USE .click
$('#button1').click(function(e){
});
Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called.
$(document).on('click', '#button1', function(e){
$.ajax({
url: 'http://www.page.com',
data: data,
async: false,
method: 'POST',
success: function(data){
},
error: function(err){
}
});
e.stopImmediatePropagation();
return false;
});
Try this instead
$('#button1').click(function(e){
$.ajax({
url: 'http://www.page.com',
data: data,
method: 'POST',
success: function(data){
},
error: function(err){
}
});
Much simpler and it should fix that issue of multiple ajax calls.
You also shouldn't have to return false.

how send variable in other form is this code is correct?

$("#delete").click(function() {
deleterecord();
});
function deleterecord(){
var id = $("#iduser").val();
alert("aw"+id);
var id = $('#iduser').attr();
e.preventDefault();
pressed = "delete"
$.ajax({
type: "post",
url: "IngSave.php",
data: "&idshit="+ id,
data: "&gagawin="+ pressed,
success: function(){
alert("ATTENTION");
$("#usertbl").html(data);
}
});
return false;
}
I'm not getting the variables $_POST['idshit']; and $_POST['gagawin']; in IngSave.php file.
Try this:
$.ajax({
type: "post",
url: "IngSave.php",
data: {idshit:id,gagawin:pressed},
success: function(){
alert("bitch");
$("#usertbl").html(data);
}
});
You have two data params incorrectly in your ajax call, change it to
$.ajax({
type: "post",
url: "IngSave.php",
data: "idshit="+id+"&gagawin="+pressed, // or - { idshit:id,gagawin:pressed }
success: function(){
alert("bitch");
$("#usertbl").html(data);
}
});

Categories

Resources