I need to serialize two forms in the same ajax function with one call. I have tried the following but it just serialize the last one.
function sssssss2(page){
var form1 = document.myform1;
var form2 = document.myform2;
var dataString1 = $(form1).serialize() + '&page=' + page;
var dataString2 = $(form2).serialize() + '&page=' + page;
$.ajax
({
type: "GET",
url: "load_data.php",
data: {dataString1, dataString2}
success: function(ccc)
{
$("#container").html(ccc);
}
});
}
It doesn't work. How may I serialize both of them within the same function?
Try this one
var dataString1 = $(form1).serialize() + '&page=' + page +$(form2).serialize();
data: {dataString1}
Related
I have 2 pages one is chart page and another one is detail page. On click the chart bar I get the value and pass it to post method and get the response from another page.
Chart page:
$('.bar').click(function() {
$.ajax({
url: 'detail',
dataType: 'json',
data: filtervalues_rightclick,
type: 'post',
success: function(response) {
url_value = 'http://domain/detailview';
$url = url_value + response.query_string;
window.open($url, "_blank");
}
});
});
Get the value from the detail view. I want to retail the post response in second page (detail_view) even in page refresh. So I have passed the value in the URL. Is there any other way without passing parameter in the URL?
Yes, you can set cookie in the AJAX request like below and the use it on other page:
$('.bar').click(function() {
$.ajax({
url: 'detail',
dataType: 'json',
data: filtervalues_rightclick,
type: 'post',
success: function(response) {
url_value = 'http://domain/detailview';
$url = url_value + response.query_string;
setCookie('pageurl', url, 1);
}
});
});
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
I am posting this questions due to the previous one being so long (It might create confusion if I cut parts up in it). I made the question more simple in this post :).
jQuery code:-
function op_prof(id) {
var attr_u_search = $(".u_search").attr('id');
var dataString = 'u_search=' + attr_u_search;
alert(dataString);
$.ajax({
type: "POST",
url: '/script/profile.php',
data: dataString,
cache: false,
success: function(data) {
$('#ui_profile').show();
$('#ui_profile').html(data);
location.hash = 'profile' + 'id=' + dataString;
$(".searchbox").val('');
$("#usr_suggest").hide();
}
});
};
PHP:-
echo "<tr id='" . $id . "' class='u_search' height='40px' onclick='javascript:op_prof(1)'><td width='40px'><img class='avatar' src='$avater' /></td><td>" . $fname_ . " " . $lname_ . "</td></tr>";
}}
I am having trouble retrieving the ID of each div (each one has a unique ID). It seems that the jQuery captures the ID of the div on top (the first div) instead of capturing the IDs of all the divs.
Screen shots:-
http://prntscr.com/118dhv
http://prntscr.com/118dus
P.S: I am 100% sure that there is an error in the jQuery :-> prntscr.com/118eb5
Try to modify the on-click attribute of tr
From this:
onclick='javascript:op_prof(1)
To this:
onclick='javascript:op_prof(this)'
And the js to this:
function op_prof(obj) {
var attr_u_search = obj.id;
....
Since you're using jQuery already, here's a full jQuery solution:
$("tr.u_search").on("click", function() {
var attr_u_search = $(this).attr('id');
var dataString = 'u_search=' + attr_u_search;
alert(dataString);
$.ajax({
type: "POST",
url: '/script/profile.php',
data: dataString,
cache: false,
success: function(data) {
$('#ui_profile').show();
// $('#ui_profile').html(data);
location.hash = 'profile' + 'id=' + dataString;
$(".searchbox").val('');
$("#usr_suggest").hide();
}
});
};
Is first param of 'ob_prof' always = 1?
javascript:op_prof(1)
The attr() method sets or returns attributes and values of the selected elements.
When this method is used to return the attribute value, it returns the value of the FIRST matched element.
use $.each()
api.jquery.com/jQuery.each/
I'm trying to add ajax form submission to a PHP web app I'm working on using jquery. The form is being submitted and writing to a database, but it'll still doing it all with a refresh.
Here's my code:
$("form#form_customer").submit(function() {
var customer123first_name = $('input[name=customer123first_name.]');
var customer123last_name = $('input[name=customer123last_name.]');
var customer123date_of_birth = $('input[name=customer123date_of_birth.]');
var customer123email_address = $('input[name=customer123email_address.]');
var customer123telephone_number = $('input[name=customer123telephone_number.]');
var customer123picture = $('input[name=customer123picture.]');
var customer123id_picture = $('input[name=customer123id_picture.]');
var customer123id_expiration = $('input[name=customer123id_expiration.]');
var data = 'customer123first_name=' + customer123first_name.val() + '&customer123last_name=' + customer123last_name.val() + '&customer123date_of_birth=' + customer123date_of_birth.val() + '&customer123email_address=' + customer123email_address.val() + '&customer123telephone_number=' + customer123telephone_number.val() + '&customer123picture=' + customer123picture.val() + '&customer123id_picture=' + customer123id_picture.val() + '&customer123id_expiration=' + customer123id_expiration.val();
$.ajax({
url: "inc/createObject.php",
type: "POST",
data: data,
cache: false,
success: function(data){
$('form_success').fadeIn();
}
});
return false;
});
Everything I've read online for this specific issue has found the return false; call to be in the wrong place or not there at all. I've checked mine is in the right place, I just can't find a reason why it's refreshing.
I know jquery is working because I use it to do popups windows which are working fine.
If you want to see the code in context, go to www.sfyfe.com/studioadmin
The problem is caused by the dot at the end of the selector on your $('input[name=customer123... lines. The dot isn't doing anything, and it's making the selector invalid. Removing the dots should fix the problem. Hope this helps!
Maybe
$("form#form_customer").submit(function(e) {
e.preventDefault();
});
You should send the data in JSON format , using : " data : data " is not valid ,
try:
$.ajax({
url: "inc/createObject.php",
type: "POST",
data:{dataField : data },
Your code should be like this.
$("form#form_customer").submit(function() {
var customer123first_name = $('input[name=customer123first_name]');
var customer123last_name = $('input[name=customer123last_name]');
var customer123date_of_birth = $('input[name=customer123date_of_birth]');
var customer123email_address = $('input[name=customer123email_address]');
var customer123telephone_number = $('input[name=customer123telephone_number]');
var customer123picture = $('input[name=customer123picture]');
var customer123id_picture = $('input[name=customer123id_picture]');
var customer123id_expiration = $('input[name=customer123id_expiration]');
var data = 'customer123first_name=' + customer123first_name.val() + '&customer123last_name=' + customer123last_name.val() + '&customer123date_of_birth=' + customer123date_of_birth.val() + '&customer123email_address=' + customer123email_address.val() + '&customer123telephone_number=' + customer123telephone_number.val() + '&customer123picture=' + customer123picture.val() + '&customer123id_picture=' + customer123id_picture.val() + '&customer123id_expiration=' + customer123id_expiration.val();
$.ajax({
url: "inc/createObject.php",
type: "POST",
data: data,
cache: false,
success: function(data){
$('form_success').fadeIn();
}
});
return false;
});
I'm working on an existing script at the moment which uses Ajax, something I've never worked with before. I have a variable set in my javascript file which gets its value from an input field on my page. I need to use Ajax to post this to my PHP page only I've no idea where to start,
Im not sure what code you would need to see, but My javascript/AJAX code is, the variable I need to pass is 'var credoff'
$(".getPoint").click(function () {
var theid = $(this).attr("id");
var onlyID = theid.split("_");
var onlyID = onlyID[1];
var credoff = parseInt($(this).children('input.credoff:hidden').val());
$.ajax({
url: 'do.php',
type: 'POST',
data: "userID=" + onlyID,
success: function (data) {
if (data != "success1" && data != "success5") {
$("#" + theid).text(data);
} else {
$("#thediv_" + onlyID).fadeOut("slow");
$('#creditsBalance').fadeOut("slow");
newbalance = parseInt($('#creditsBalance').text());
Wouldit have to be in this format?
data: "userID=" + onlyID,
"credoff=" + credoff
...
data: {
userId: onlyID,
credoff: credoff
},
...
Or you can do this:
data: "userID=" + onlyID + "&credoff=" + credoff
don't forget the ampersand! &
I have built an AJAX function that links to some PHP on the same page. The PHP worked fine but with the AJAX function there is an error and the validation is not taking place.
The AJAX
function contact() {
var ENQemail = $('#ENQemail').val();
var ENQfirstname = $('#ENQfirst_name').val();
var ENQlastname = $('#ENQlast_name').val();
var ENQmessage = $('#ENQmessage').val();
var ENQsecword = $('#ENQsecword').val();
var dataString = 'ENQemail=' + ENQemail + '&ENQfirstname=' + ENQfirstname + '&ENQlastname=' + ENQlastname + '&ENQmessage=' + ENQmessage + '&ENQsecword=' + ENQsecword;
$.ajax({
type: 'POST',
url: 'http://www.divethegap.com/update/contact',
data: dataString,
dataType:'json',
success: function(data) {
$('#ERRemail').html(data.ERRemail);
$('#ERRfirstname').html(data.ERRfirstname);
$('#ERRlastname').html(data.ERRlastname);
$('#ERRmessage').html(data.ERRmessage);
$('#ERRsecword').html(data.secword);
$("#enquiry").effect("shake", { times:4 }, 100);
},
error: function() {
$("#enquiry").effect("shake", { times:4 }, 100);
},
});
}
Could it be that one cannot have the PHP on the same page when using AJAX.
Any ideas,
Marvellous
It is always a good idea to encode request parameters. This may or may not be the source of your problem:
var dataString = 'ENQemail=' + encodeURIComponent(ENQemail) + '&ENQfirstname=' + encodeURIComponent(ENQfirstname) + '...';
Also, it looks like you are telling the AJAX function to send a JSON message (dataType:'json'). However, the data you are passing into it is not a JSON message.