javascript and utf-8 / special characters help

Question

SHORT VERSION OF QUESTION: So basically my question is: How can I set the javascript to use UTF-8 so that å ä ö are supported, so my javascript can add the correct values to the drop list options?

LONGER EXPLANATION: Im using javascript to fill 'options' in a drop down list on my main page. The drop down lists are in a form which calls a php script, which querys a mysql database.

The problem is, Im using special characters such as å ä ö in my mysql database. And when I query the mysql database like this:

    SELECT * FROM database WHERE city = $city

it doesnt find anything.

This because $city contains special characters set by the javascript. But if setting the $city variable without javascript, for example in my html document with

      option value=åäö

then it will work. This means the javascript is the problem, and it sets the special characters to something else instead, and this makes the query not to find anything.

javascript that populates my drop down list:

                    if(document.nav_form_main.nav_city_list.value == '4'){
        removeAllOptions(document.nav_form_main.nav_city_list);
        addOption(document.nav_form_main.nav_city_list, "Göteborg",             "Göteborg", "");
        addOption(document.nav_form_main.nav_city_list, "goteborg_closeby", "Angränsande områden", "");
        addOption(document.nav_form_main.nav_city_list, "1", "Hela Sverige", "");
        addOption(document.nav_form_main.nav_city_list, "other_area", "-- Välj område på nytt --", "");
    }
    function removeAllOptions(selectbox)
    {
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
    //selectbox.options.remove(i);
    selectbox.remove(i);
}
    }


    function addOption(selectbox, value, text )
    {
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
    }

MY HTML MAIN DOCUMENT USES: ISO 8859-1

WHEN ECHOING "ÅÄÖ" it works in my PHP code. BUT WHEN ECHOING THE VARIABLE FROM THE JAVASCRIPT THE ÅÄÖ IS REPLACED BY WEIRD SYMBOLS

Answer 1

Here is how I solved this problem:

document.getElementById("somewhere").innerHTML="mytext";
myoption = document.createElement("option");
myoption.value="myvalue";
myoption.text=document.getElementById("somewhere").innerHTML;
myselect.add(myoption,null);

"somewhere" is an unused, or hidden, or special created element in the page.

when javascript reads from innerHTML, you get the correct characters.

Answer 2

Try these before sending to/after receiving from server...

function encode_utf8( s ) {
  return unescape( encodeURIComponent( s ) );
}

function decode_utf8( s ) {
  return decodeURIComponent( escape( s ) );
}

Answer 3

To avoid any kind of problems you should make sure you treat your content properly both at the client and server sides.

With PHP: utf8_encode() and utf8_decode()

With Javascript use use webtoolkit.utf8.js : Utf8.encode() and Utf8.decode()

Answer 4

As far as I can see, you problem is on the server side, not the client side. In other words, the problem is in your php, not your javascript. Try making a simple php script to output your javascript request.