Problem with latin characters when sending a form content with AJAX

[xNephilimx]

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:10 0%" /></p>

<script type="text/javascript">
//<![CDATA[
var rte1 = new RichEditor("pos tText","100%",4 00,"<?=$_POST['postText']?>");
rte1.write('tar getDiv');
//]]>
</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:

var msg = $('message');
msg.style.display = 'none';
 
var form = $('post_form');
form.save.onclick = prepare;
form.publish.onclick = prepare;
 
function prepare(e) {
    var obj = e?e.target:window.event.srcElement;
    submitForm(obj.name);
}
 
function submitForm(method) {
    var params = decodeURI(Form.serialize(form));
    params += '&method=' + method;
 
    var req = new Ajax.Request('actions.php',{
        method:'post',
        parameters:params,
        onLoading:loading,
        onComplete:avisar
    });
}
 
function loading() {
    msg.style.display = 'block';
    msg.innerHTML = 'Guardando...';
    Form.disable(form);
}
 
function avisar(response) {
    Form.enable(form);
    msg.style.display = 'block';
    msg.innerHTML = response.responseText;
}
 

The PHP:
[PHP]
include('config .php');
include('functi ons.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->createResultSe t($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]

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

function submitForm(method) {
    var params = decodeURI(Form.serialize(form))

into

function submitForm(method) {
    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=javasc ript>
function encode()
{
var str = document.getEle mentById("txt1" ).value;
if (str!="")
{
var result = encodeURI( str ); //ATTENTION!!!
document.getEle mentById("txt2" ).value = result;
alert ( str +"\nencode to\n"+result);
}
else
{
alert ("please input the origin url first,thanks.") ;
}
}
function decode()
{
var str = document.getEle mentById("txt2" ).value;
if (str!="")
{
var result = decodeURI( str ); //ATTENTION!!!
document.getEle mentById("txt3" ).value = result;
alert ( str +"\ndecode to\n"+result);
}
else
{
alert ("please input the encoded url first,thanks.") ;
}}
</script>
<body>
origin &nbsp;&nbsp;&nb sp;&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="javasc ript:encode();"/>
<input type="button" id="btnde" value="decode" onclick="javasc ript:decode();"/>
</body>
</html>
[/HTML]

[xNephilimx]

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]

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]

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.

[xNephilimx]

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

Best regards,
The_Nephilim

[w3rm]

hi,

im having the same problem here....

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

thx

[acoder]

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 setRequestHeade r method of the XMLHttpRequest object.