jQuery AJAX success for certain form - javascript

I'm using the following code to submit multiple forms via AJAX:
var formData = $(this).closest('.bookroom1, .bookroom2, .bookroom3, .bookroom4, .bookroom5').serializeArray();
formData.push({ name: this.name, value: this.value });
$.ajax({
type: 'POST',
url: AJAX_URL,
data: formData,
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('.bookroom1, .bookroom2, .bookroom3, .bookroom4, .bookroom5')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
}
});
I want to add some JavaScript in the success/response function but only for a particular form e.g.
if ( .bookroom5 ) {
// do stuff
}
Does anyone know the best approach to doing this other than creating separate $.ajax functions for each form?
Any help much appreciated!

var $form = $(this).closest('.bookroom1, .bookroom2, .bookroom3, .bookroom4, .bookroom5');
var formData = $form.serializeArray();
formData.push({
name: this.name,
value: this.value
});
$.ajax({
type: 'POST',
url: AJAX_URL,
data: formData,
dataType: 'json',
success: function (response) {
if ($form.hasClass('bookroom5')) {
alert('you have used form bookroom5')
}
}
});
Save the form before then use it later to check the class

Related

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?

Is it possible to send entire form including the files to server using jquery/ajax?

Is it possible to submit entire form (all the fields including fileupload) to server (webmethod or handler etc) using Jquery/Ajax? If yes, how?
ASPX:
$.ajax({
type: "POST",
url: "SupplierBidding.aspx/SubmitBid",
data: JSON.stringify({ id: $('#txtbidderid').val(), bidamt: $('#txtbidamt').val() }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data, status) {
span.fadeIn("slow", function () {
span.text(data.d).fadeOut('slow');
});
},
failure: function (data) {
alert(data.d);
},
error: function (data) {
alert(data.d);
setTimeout(function () {
btn.prop('disabled', false);
}, 3000);
}
});
}
WebMethod:
[WebMethod]
public static string SubmitBid(string id, string bidamt)
{
//code
return "";
}
I would like to replace data: JSON.stringify({ id: $('#txtbidderid').val(), bidamt: $('#txtbidamt').val() }) with entire form including files also.
You can use Formdata.
FormData Docs
Code example.
var fdata = new FormData();
fdata.append( 'file', input.files[0] );
$.ajax({
url: 'http://yourserver.com/upload.php',
data: fdata,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log('siceess')
}
});
Did you try jQuery Form plugin?
It handles file uploads.
Worked for me before.

how to pass a additional data with form serialized data on ajax?

How to pass an additional data with form serialize data on ajax post method?.
below is my code which was using for ajax post,
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frm.serialize(),
success: function (data) {
alert(data);
}
});
});
here, how to pass a additional_data with serialize form data
From jQuery API DOCS
The .serializeArray() method creates a JavaScript array of objects
The .serialize() method creates a text string in standard URL-encoded notation.
I think to use push , we need to use serializeArray
try to use
var frmData = frm.serializeArray();
frmData.push({name: "name", value: "test"});
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frmData,
success: function (data) {
alert(data);
}
});
});
You need to push the elements to the existing serialized data.
var frmData = frm.serialize();
frmData.push({name: nameofthevariable, value: valueofthevariable});
frmData.push({name: nameofthevariable2, value: valueofthevariable2});
frmData.push({name: nameofthevariable3, value: valueofthevariable3});
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frmData,
success: function (data) {
alert(data);
}
});
});
serialize() create a query string of the form. So you can append additional parameters into it.
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frm.serialize()+'&param1='+value1+'&param2='+value2,
success: function (data) {
alert(data);
}
});
});
serializearray() can be used to send additional parameters. PFB code for sending additional parameters.
var request = $('form').serializeArray();
request.push({name: "kindOf", value: "save"});
Ajax call
$.ajax({
url: "/ST/SubmitRequest",
dataType: "json",
//contentType: "application/json",
type: "POST",
data: request,
//data: r1,
success: function (response) {
//Setinterval();
//alert("Done...!");
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});

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);
}
});

Passing data "of two types" via jQuery/AJAX to .php file? (Syntax) [duplicate]

This question already has answers here:
jQuery: serialize() form and other parameters
(12 answers)
Closed 5 years ago.
I am very new to jQuery/AJAX and I am looking for help. This is the relevant code-snippet:
$(function () {
$('.button').on('click', function (event) {
event.preventDefault(); //prevents page from refreshing
$.ajax({
type: 'POST',
url: 'test2.php',
data: ?????
success: function (data) {
alert('form was submitted');
$('.text').html(data);
}
});
});
});
So, the data I want to pass is for one data: $('#form').serialize(), and for the other data: { test : test.name },
Basically I want to send a whole form and another parameter. How do I correctly express my wishes to jQuery?
I have tried the following options and they did not work:
$.ajax({
type: 'POST',
url: 'test2.php',
data: $('#form').serialize(), data: { test : test.name },
success: function (data) {
alert('form was submitted');
$('.text').html(data);
}
});
and
$.ajax({
type: 'POST',
url: 'test2.php',
data: $('#form').serialize(), { test : test.name },
success: function (data) {
alert('form was submitted');
$('.text').html(data);
}
});
and
$.ajax({
type: 'POST',
url: 'test2.php',
data: $('#form').serialize()
});
$.ajax({
type: 'POST',
url: 'test2.php',
data: { test : test.name },
success: function (data) {
alert('form was submitted');
$('.text').html(data);
}
});
The php document basically just echos out said data.
Help a newbie out!
Try
data = {}
data["form"] = $('#form').serialize();
data["test"] = test.name;
$.ajax({
type: 'POST',
url: 'test2.php',
data: data,
success: function (data) {
alert('form was submitted');
$('.text').html(data);
}
});
You need to supply a JSON object to the data property for your ajax. What I did was basically create a new object, and add 2 elements.
Hope this helps!
Create an object to hold all your information:
var dataToSend = {};
dataToSend.form = $('#form').serialize();
dataToSend.extraData = { test : test.name };
then post it:
$.ajax({
data: dataToSend
})

Categories

Resources