Form data to PHP through AJAX - php

Question

Used this script many times to pass 1 or 2 values to a PHP file, works fantastic. Using it now to pass 7 values and only the first 2 get through.
$(document).ready(function(){
$("form#send_note").submit(function() {
var to_user = $('#to_user').attr('value');
var from_user = $('#from_user').attr('value');
var defaultpic_from = $('#defaultpic_from').attr('value');
var defaultpic_to = $('#defaultpic_to').attr('value');
var your_username = $('#your_username').attr('value');
var message_title = $('#message_title').attr('value');
var message_contents = $('#message_contents').attr('value');
$.ajax({
type: "POST",
url: "../inbox/send_note.php",
data: "to_user="+ to_user +"& from_user="+ from_user + "& defaultpic_from="+ defaultpic_from + "& defaultpic_to="+ defaultpic_to + "& your_username="+ your_username + "& message_title="+ message_title + "& message_contents=" + message_contents,
success: function(){
$('form#send_note').hide(function(){$('div.success2').fadeIn();});
}
});
return false;
});
});
I have double checked all of the names, all is in order it's just the values after from_user (defaultpic_from) and so on won't go through.
I believe it's the way I have the "data:" listed. I am a complete newbie when it comes to javascript so any advice on the properway to get these through would be fantastic!

Answer 1

1) you know with jquery you can just do this, right?
var defaultpic_from = $('#defaultpic_from').val();
2) also, you don't need to turn the & into an entity, but as mentioned, you should be using encodeURIComponent in the values
3) have you verified all the variables actually have values before the ajax request gets made? what happens when you look in POST? Are you getting the members in POST, but no values? or no keys and no values?
4) Try using Chrome's Network tab in the developers tools to examine the request and response
here is an example I am using now, where params is nvp string and sync is true
var callService = function(sync, params, successCB, errorCB){
console.log('ENTER callService');
$.ajax({
type : 'POST',
url : 'required/core/Service.php',
async : sync,
data : params,
dataType : 'json',
success : function(data){
console.log('ENTER POST SUCCESS');
successCB(data);
},
error : function(){
console.log('ENTER POST ERROR');
errorCB();
}
});
};
what would be really helpful if you could go into the request and response headers and show them to us. you could have PHP echo
echo json_encode($_POST);
to make it easier to get the response

Answer 2

I bet the value of your default pic is terminating the query string. You can wrap your vars like this to ensure they are properly escaped:
$(document).ready(function(){
$("form#send_note").submit(function() {
var to_user = encodeURIComponent($('#to_user').attr('value'));
var from_user = encodeURIComponent($('#from_user').attr('value'));
var defaultpic_from = encodeURIComponent($('#defaultpic_from').attr('value'));
var defaultpic_to = encodeURIComponent($('#defaultpic_to').attr('value'));
var your_username = encodeURIComponent($('#your_username').attr('value'));
var message_title = encodeURIComponent($('#message_title').attr('value'));
var message_contents = encodeURIComponent($('#message_contents').attr('value'));
$.ajax({
type: "POST",
url: "../inbox/send_note.php",
data: {to_user:to_user, from_user:from_user, defaultpic_from: defaultpic_from, defaultpic_to:defaultpic_to, your_username:your_username, message_title:message_title, message_contents:message_contents},
success: function(){
$('form#send_note').hide(function(){$('div.success2').fadeIn();});
}
});
return false;
});
});
You will need to urldecode the post vars in php but that should do it.