By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,626 Members | 1,182 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,626 IT Pros & Developers. It's quick & easy.

Problem with latin characters when sending a form content with AJAX

xNephilimx
Expert 100+
P: 213
lHi guys!
I'm having a little problem that's getting on my nerves, I couldn't find a solution, I also tryed googling it and I found nothing... (my field of expertise is in AS 2 and 3, but I still lack some JavaScript solid knowdlege)

The problem is that when I try to send a form's content with Ajax (I'm using the prototype library), for some reason the latin characters (accents and stuff, like ) turn a mess when I try to store them in a db, but not when I only display them with PHP. I tryed then to see if the problem was with the Ajax part, so I got rid of it and made a common submit with the form. That way worked perfectly, so this is why I think that the problem is there.

A phrase like this:
Probando acentos
(That means "Trying accents )

Ends up like this:
Probando acentos á é * ó ú

May be is when I make the query string with the Form.serialize method. I don't know... I tryed using the decodeURI() with the query -decodeURI(Form.serialize)-, and it actually got better, but still not working.

The code so far is this (I will post only the vital code):

The form:
[HTML]
<form method="post" action="actions.php" id="post_form">
<p>Ttulo:<br /><input type="text" name="postTitle" id="postTitle" style="width:100%" /></p>

<script type="text/javascript">
//<![CDATA[
var rte1 = new RichEditor("postText","100%",400,"<?=$_POST['postText']?>");
rte1.write('targetDiv');
//]]>
</script>
<input type="button" name="save" value="Guardar y Seguir Editando" />
<input type="button" name="publish" value="Publicar" />
</form>
[/HTML]

The RichText class is a class I developed that makes a rich text editor, it works perfectly so the error can't be dragged from there. Also, the issue I'm getting is also happening in the title, and that is a common text input.

The script:
Expand|Select|Wrap|Line Numbers
  1. var msg = $('message');
  2. msg.style.display = 'none';
  3.  
  4. var form = $('post_form');
  5. form.save.onclick = prepare;
  6. form.publish.onclick = prepare;
  7.  
  8. function prepare(e) {
  9.     var obj = e?e.target:window.event.srcElement;
  10.     submitForm(obj.name);
  11. }
  12.  
  13. function submitForm(method) {
  14.     var params = decodeURI(Form.serialize(form));
  15.     params += '&method=' + method;
  16.  
  17.     var req = new Ajax.Request('actions.php',{
  18.         method:'post',
  19.         parameters:params,
  20.         onLoading:loading,
  21.         onComplete:avisar
  22.     });
  23. }
  24.  
  25. function loading() {
  26.     msg.style.display = 'block';
  27.     msg.innerHTML = 'Guardando...';
  28.     Form.disable(form);
  29. }
  30.  
  31. function avisar(response) {
  32.     Form.enable(form);
  33.     msg.style.display = 'block';
  34.     msg.innerHTML = response.responseText;
  35. }
  36.  
The PHP:
[PHP]
include('config.php');
include('functions.php');

$section = $_POST['section'];
$method = $_POST['method'];

$postTitle = $_POST['postTitle'];
$postContent = $_POST['postText'];

if($section == "write_post") {
$sql = "INSERT INTO posts (
post_author,
post_date,
post_title,
post_content,
post_status,
post_comments,
post_category,
post_type
) ";

if($method == "save") {
$postStatus = 'draft';
} else if ($method == "publish") {
$postStatus = 'published';
}

$sql .= "VALUES(
1,
'',
'$postTitle',
'$postContent',
'$postStatus',
'open',
1,
'post'
)";

$dblink->createResultSet($sql, $db); //when inserting the data in the db all the latin characters are a hell of a mess
echo 'Tu post fue guardado con exito! ' . $postTitle; //but here here the $postTitle is displayed correctly
}
[/PHP]
($dblink is an instance of a class I programmed to manage db queries, it works alright, the problem only happens when I use the Ajax way to "submit" the form)

Also, my database has the latin1_general_ci collation, but I tried other variants and also UTF8 variants and all I got is a different mess each time, but a mess nontheless.... ^_^'

I'd really appreciate any help you can provide me.
Thanks a lot!

Best regards
The_Nephilim
Oct 23 '07 #1
Share this Question
Share on Google+
7 Replies


Ferris
100+
P: 101
hi
You need to encode your URL before sending it to PHP page by javascript,but I have no idea how to decode it in PHP,maybe you needn't to do it cos' php can decode automatically just like asp.


my suggestion:
change


Expand|Select|Wrap|Line Numbers
  1. function submitForm(method) {
  2.     var params = decodeURI(Form.serialize(form))
into

Expand|Select|Wrap|Line Numbers
  1. function submitForm(method) {
  2.     var params = encodeURI(Form.serialize(form));

and try it again...



I also wrote a simple test page about encoding and decoding in Javascript,and it works with latin characters.I wish will help you. :)



[HTML]
<html>
<head>
<title>encode & decode in latin characters</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<script language=javascript>
function encode()
{
var str = document.getElementById("txt1").value;
if (str!="")
{
var result = encodeURI( str ); //ATTENTION!!!
document.getElementById("txt2").value = result;
alert ( str +"\nencode to\n"+result);
}
else
{
alert ("please input the origin url first,thanks.");
}
}
function decode()
{
var str = document.getElementById("txt2").value;
if (str!="")
{
var result = decodeURI( str ); //ATTENTION!!!
document.getElementById("txt3").value = result;
alert ( str +"\ndecode to\n"+result);
}
else
{
alert ("please input the encoded url first,thanks.");
}}
</script>
<body>
origin &nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" size="40" id="txt1" value="http://test.com/?param1= &param2= "/>
<br>
encoded url
<input type="text" size="40" id="txt2" value=""/>
<br>
decoded url
<input type="text" size="40" id="txt3" value=""/>
<br>
<input type="button" id="btnen" value="encode" onclick="javascript:encode();"/>
<input type="button" id="btnde" value="decode" onclick="javascript:decode();"/>
</body>
</html>
[/HTML]
Oct 23 '07 #2

xNephilimx
Expert 100+
P: 213
Hi! Thanks for the reply!
I tryed without the decodeURI, and it's not working.
The thing with the encodeURI is that it also encodes the ampersands (&) that concatenates the data in the query string, and there's no way to decode that in php, because it doesn't recieve ir as a string, but as post data.

As I said before, the problem appears only when I save the data in a DB, when working only with PHP there is no problem. That's what gets me lost...

I'll try making the querystring myself to see if there's some kind of problem with the Form.serialize method of the prototype library.

Thanks anyways!!

Best regards,
The_Nephilim
Oct 23 '07 #3

Ferris
100+
P: 101
hi

if php can read your querystring,it seems no problem in your client side code.

if the characters turns to mess in DB,you need to check the default charset in your DB settings and Apache php Server configure. if they are not the same charset , the mess will come up.

hope it helps.
Oct 24 '07 #4

xNephilimx
Expert 100+
P: 213
Hi ferris, thanks.
The charset in my DB is latin1_general_ci
When I store the data without the ajax part it displays well, it only happens when using Ajax. That's the weird part.

Kind regards
The_Nephilim

hi

if php can read your querystring,it seems no problem in your client side code.

if the characters turns to mess in DB,you need to check the default charset in your DB settings and Apache php Server configure. if they are not the same charset , the mess will come up.

hope it helps.
Oct 24 '07 #5

xNephilimx
Expert 100+
P: 213
I finally solved it, just changed the encoding of the pages to UTF-8.
Thanks for your help anyways!

Best regards,
The_Nephilim
Oct 30 '07 #6

P: 1
hi,

im having the same problem here....

where do you put the UTF-8 encode? in which pages?

thx
Feb 19 '08 #7

acoder
Expert Mod 15k+
P: 16,027
hi,

im having the same problem here....

where do you put the UTF-8 encode? in which pages?

thx
Set the headers of the pages. If it's set properly on the server-side pages, use the setRequestHeader method of the XMLHttpRequest object.
Feb 20 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.