Apostrophe problem in selection menu

[xerxesw3]

I have a form which uses javascript to build a selection menu populated by values read from an XML file on the server. The values are names, some of which contain an apostrophe (e.g. O'Brien). All the values appear correctly in the menu.

 

When a user selects a value from the menu, further javascript is executed using the selected value. However, if one of the options containing an apostrophe is selected, the javascript only picks up the characters before the apostrophe (i.e just the O from O'Brien). How can I get it to pick up the entire string?

[Ingolme]

Are you using some intermediate system between the Javascript and the XML file?

 

Javascript on its own shouldn't have a problem with the apostrophes if it's directly reading data from the XML DOM tree.

[xerxesw3]

Are you using some intermediate system between the Javascript and the XML file?

 

Javascript on its own shouldn't have a problem with the apostrophes if it's directly reading data from the XML DOM tree.

There's no problem reading the XML to populate the select list - the problem comes when processing the user's menu selection after they press the Submit button. In order to get the value of the selected option, the javascript calls the following function, passing the name of the select box to the 'name' parameter -

    function GetChoice(name) {        var start = location.search.indexOf("?" + name + "=");        if (start < 0) start = location.search.indexOf("&" + name + "=");        if (start < 0) return '';        start += name.length + 2;        var end = location.search.indexOf("&", start) - 1;        if (end < 0) end = location.search.length;        var result = '';        for (var i = start; i <= end; i++) {            var c = location.search.charAt(i);            result = result + (c == '+' ? ' ' : c);        }        return unescape(result);    }      

This works fine for all values except those containing an apostrophe, when only the characters preceding the apostrophe are returned.

[Ingolme]

I see. Which script is populating the list? I believe that it's creating code that might look like this:

<select>    <option value='apostrophe's problem'>apostrophe's problem</option>    ...</select>

[xerxesw3]

The list is populated by the same script; the relevant code is as follows -

    xmlhttp.open("GET", "webdata/RegisteredPlayers.xml", false);    xmlhttp.send();    xmlDoc = xmlhttp.responseXML;    document.write("<select name='player';>");    var x = xmlDoc.getElementsByTagName("Player");    for (i = 0; i < x.length; i++) {        //populate the list with player name        document.write("<option value='");        document.write(x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue);        document.write("'>");        document.write("</option>");    }    document.write("</select>");

So, yes, it does appear to be generating code similar to the example you gave. However, the name including the apostrophe appears correctly in the select list. It is only when the name is selected that the problem occurs, i.e. when the GetChoice function is called after the user presses Submit.

[Ingolme]

You need to replace ' and " with ' and ". That will solve the problem.

 

The way you're using document.write is a problem. When document.write is called it tries to correct bad HTML.

For example, the string "<option value='" will be transformed into "<option value></option>".

 

To fix this, build the entire string first, then call document.write() just once.

 

Putting it all together:

var value;var str = "<select name='player'>";for (i = 0; i < x.length; i++) {    str += "<option value='";    value = document.write(x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue);    value.replace(/'/g, "'");    value.replace(/"/g, """);    str += value;    str += "'>";    str += "</option>";}str += "</select>";// Write the string to the documentdocument.write(str);

As a footnote, document.write() will cause your page to be completely erased and written over if it's called after the page has finished loading (for example, if you have it inside an event handler).

 

To be safe, add HTML to the document by changing the innerHTML of an element instead of using document.write()

[xerxesw3]

That didn't work, but it did help me find the solution. I replaced the single quotes surrounding each name in the list with double quotes, i.e. changed...

str += "<option value='";

to...

str += "<option value="";

...etc., and that fixed it. Thanks for your suggestions.

[Ingolme]

That will fix the apostrophe problem but then it will cause a problem when your XML values have " in them.

 

You have to replace the ' and " with HTML entities ' and "