Javascript Populate Form


So, I'm trying to build a livesearch-esque function into my site (similar to grepointel, when you search for a town ID and it comes back with the town name and the player's name). I've got the search to work, I have returned the results, that all works. I'm now trying to have it so when the user clicks on the TR element, it populates the fields with the data the PHP script returned.

I checked the page, and its getting all of the values properly, and its calling the function like this:

<tr class="town_result" onclick="popForm('1234', 'SomePlayer', 'Some MRA', 'Someplayers Town', '175')">
Here's the Javascript (my javascript is pretty bad, lol):
function popForm(town_id, player_name, alliance_name, town_name, town_points) {
And here is the form:

<form method="post" action="add_claim.php">
<table class="add_claim">
<tr class="even_row" id="add_claim_headers">
<td><label for="town_id">Town ID</label></td>
<td><label for="player_name">Player Name</label></td>
<td><label for="alliance_name">Alliance Name</label></td>
<td><label for="town_name">Town Name</label></td>
<td><label for="town_points">Town Points<label></td>
<tr class="odd_row">
<td><input type="text" id="town_id" name="town_id" autocomplete="off" onkeyup="queryDB(this.value)" /><div id="targetDiv"></div></td>
<td><input type="text" id="player_name" name="player_name" readonly="readonly" /></td>
<td><input type="text" id="alliance_name" name="alliance_name" readonly="readonly" /></td>
<td><input type="text" id="town_name" name="town_name" readonly="readonly" /></td>
<td><input type="text" id="town_points" name="town_points" readonly="readonly" /></td>
<td><input type="submit" id="add_claim" value="Add Claim" /></td>
When clicking on the TR, I get this in the console (for Google Chrome):
Uncaught SyntaxError: Unexpected token ILLEGAL                                                             index.php:1
I set them to readonly because I want them to either populate the form with AJAX, or submit without it, and let PHP handle it. I tried removing the readonly attribute, but the exact same error occurred, so I left it in.

Any ideas?


By testing in firefox opposed to Chrome, I found that it seems to be breaking at times based on city names with apostrophes in them (among other characters). I changed the characters to their HTML versions before putting them into the database:

PHP is processing them properly (when I run the script via command line, the output shows the format as above), however, once the values are passed through AJAX to javascript, the values are changed to the literal character, which of course breaks the function call.

Any idea on how I can fix this? I'm quite confused.

Also, for whatever reason, even when I try a city that has no spaces, no special characters, etc, Firefox's Error Console seems to think I'm not ending the function call properly, and points an arrow at the single quote at the beginning of the last value, and doesn't show the single quote after it, or the closing parenthesis which are present in the source.



OK, I figured out part of the issue. It seems the points had a new line character from the data file that made it into the database. I used the PHP function trim() to clean it up, and it works fine now, so long as there are no apostrophes in the data. Which brings me back to the problem of retaining the HTML special characters in javascript.


The data already has those characters in it, but once its passed to HTML via AJAX, they become the literal characters. I may be on to something, but I'm still figuring out its viability.


Is this code:
<tr class="town_result" onclick="popForm('1234', 'SomePlayer', 'Some MRA', 'Someplayers Town', '175')">
created by a php script? There lies your problem.

A quick fix is to to simply write " instead of '
Please post the code that handles that output in PHP if this does not solve your problem.