Connecting Tech Pros Worldwide Forums | Help | Site Map

Problem with latin characters when sending a form content with AJAX

xNephilimx's Avatar
Expert
 
Join Date: Jun 2007
Location: Buenos Aires, Argentina
Posts: 200
#1: Oct 23 '07
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>Título:<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

Ferris's Avatar
Member
 
Join Date: Oct 2007
Location: Shanghai
Posts: 102
#2: Oct 23 '07

re: Problem with latin characters when sending a form content with AJAX


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]
xNephilimx's Avatar
Expert
 
Join Date: Jun 2007
Location: Buenos Aires, Argentina
Posts: 200
#3: Oct 23 '07

re: Problem with latin characters when sending a form content with AJAX


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
Ferris's Avatar
Member
 
Join Date: Oct 2007
Location: Shanghai
Posts: 102
#4: Oct 24 '07

re: Problem with latin characters when sending a form content with AJAX


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.
xNephilimx's Avatar
Expert
 
Join Date: Jun 2007
Location: Buenos Aires, Argentina
Posts: 200
#5: Oct 24 '07

re: Problem with latin characters when sending a form content with AJAX


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

Quote:

Originally Posted by Ferris

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.

xNephilimx's Avatar
Expert
 
Join Date: Jun 2007
Location: Buenos Aires, Argentina
Posts: 200
#6: Oct 30 '07

re: Problem with latin characters when sending a form content with AJAX


I finally solved it, just changed the encoding of the pages to UTF-8.
Thanks for your help anyways!

Best regards,
The_Nephilim
Newbie
 
Join Date: Feb 2008
Posts: 1
#7: Feb 19 '08

re: Problem with latin characters when sending a form content with AJAX


hi,

im having the same problem here....

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

thx
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Feb 20 '08

re: Problem with latin characters when sending a form content with AJAX


Quote:

Originally Posted by w3rm

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.
Reply


Similar JavaScript / Ajax / DHTML bytes