Using illegal characters in a function to modify a html form

meanses · Mar 25, 2005

Basically, I'm new to JavaScript, but I have a strong background in PHP. I’ve developed this survey application to pull questions out of a db. Well I've come down to a problem where my PHP application might build a complex survey question that has checkboxes and then the very last checkbox is for a text box to enter their own answer if they can’t find one that applies to them. The problem is that if people just start typing in the box, and not select the checkbox, then I'm not going to get their data.

Thus JavaScript had to come into play, but I came across a problem. My PHP dynamically builds the form input names using a numerical counter, then a ~ followed by an alpha counter (depending on the type of question....radio, checkbox, etc). So when I try and call a function to check the box for me I come across an issue...
Apparently using numbers as the first character is an illegal operation (This didn’t surprise me as most languages have this rule). So I figured big deal.. I’ll just put a "Q" in front of the number and split it out later... Well then the ~ symbol came across as an illegal character in my name string. Anyways, you get the idea... I’m struggling with using illegal characters in a JavaScript function.

I need to find a way to make the script work given the html form below, I really can't modify the naming system without rebuilding the entire PHP application. Is there a way I can force JavaScript to use illegal characters? If it absolutely can't use a number as the first value.. I can work around that.. but the ~ system needs to stay.

Here is the sample code I'm having problems with along with my simple JavaScript function.

Code:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--

function f(x){eval("document.test." + x + ".checked=true");}

//-->
</SCRIPT>
</head>
<body>
<form action="submit.php" method="POST" name="test">
<b>What do you plan on majoring in?</b>
<table>
<tr><td><input type="checkbox" name="7~A" value="7~Behavioral Sciences~A~1"></td><td>Behavioral Sciences</tr>
<tr><td><input type="checkbox" name="7~B" value="7~Business~B~1"></td><td>Business</tr>
<tr><td><input type="checkbox" name="7~C" value="7~Communications~C~1"></td><td>Communications</tr>
<tr><td><input type="checkbox" name="7~D" value="7~Computer Science~D~1"></td><td>Computer Science</tr>
<tr><td><input type="checkbox" name="7~E" value="7~Education~E~1"></td><td>Education</tr>
<tr><td><input type="checkbox" name="7~F" value="7~English~F~1"></td><td>English</tr>
<tr><td><input type="checkbox" name="7~G" value="7~Fine Arts~G~1"></td><td>Fine Arts</tr>
<tr><td><input type="checkbox" name="7~H" value="7~Graphic Arts~H~1"></td><td>Graphic Arts</tr>
<tr><td><input type="checkbox" name="7~I" value="7~History~I~1"></td><td>History</tr>
<tr><td><input type="checkbox" name="7~J" value="7~Mathematics~J~1"></td><td>Mathematics</tr>
<tr><td><input type="checkbox" name="7~K" value="7~Nursing/Pre-Med~K~1"></td><td>Nursing/Pre-Med</tr>
<tr><td><input type="checkbox" name="7~L" value="7~Religion/Ministry~L~1"></td><td>Religion/Ministry</tr>
<tr><td><input type="checkbox" name="7~M" value="7~Science~M~1"></td><td>Science</tr>
<tr><td><input type="checkbox" name="7~N" value="7~Undeclared~N~1"></td><td>Undeclared</tr>
<tr><td><input type="checkbox" name="7~O" value="OTHER"></td>
<td><input type="text" size="35" maxlength="256" name="7~TEXT~O" onfocus="f('7~0')">(other)</td></tr>
</table>
</form>

BillyRayPreachersSon · Mar 26, 2005

If you don't want to refer to the inputs by name, you could use their position:

Code:

var inputs = documents.forms['test'].getElementsByTagName('input');
alert(inputs[0].value);
alert(inputs[1].value);
...
alert(inputs[15].value);

Of course, I have to strongly suggest you try not to bend the naming rules. Can you really not simply replace the tilde with an underscore, as well as having a Q as the first character? That way, the names would not be illegal.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

BabyJeffy · Mar 26, 2005

Using PHP, regexp replace out the tilde characters (at the point you get the data from the DB) with something else (as BillyRay says, an underscore is a good choice). I guess it depends on how y ou are putting the data back into a database after the submit, but I bet you could find another way to split your pairs and insert them in without the need of a tilde present in the key name.

Jeff

meanses · Mar 26, 2005

Alright, I took the advice and modified my PHP script to put Q’s in front of the numbers, and use “_” instead of “~” in the naming of the input forms. Then I applied the JavaScript and it works great with checkboxes.. but I can’t get it to select the radio style buttons.

Here’s the code I’m dealing with right now... the first question with the checkboxes works.. but the second question with the radio buttons does not work...

Code:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Apply_Check(x){eval("document.test." + x + ".checked=true");}
//-->
</SCRIPT>
</head>
<body>
<form action="submit.php" method="POST" name="test">
<b>What are your plans after graduation?</b>
<table>
<tr><td><input type="checkbox" name="Q3_A" value="3~Junior/Community College~A~1"></td><td>Junior/Community College</tr>
<tr><td><input type="checkbox" name="Q3_B" value="3~Technical/Vocational School~B~1"></td><td>Technical/Vocational School</tr>
<tr><td><input type="checkbox" name="Q3_C" value="3~Four-year university~C~1"></td><td>Four-year university</tr>
<tr><td><input type="checkbox" name="Q3_D" value="3~Armed Forces~D~1"></td><td>Armed Forces</tr>
<tr><td><input type="checkbox" name="Q3_E" value="3~Entering Workforce~E~1"></td><td>Entering Workforce</tr>
<tr><td><input type="checkbox" name="Q3_F" value="OTHER"></td>
	<td><input type="text" size="35" maxlength="256" name="Q3_TEXT_F" onfocus="Apply_Check('Q3_F')">(other)</td></tr>
</table>

<b>Which name for the major described above most interests you?</b>
<table>
<tr><td><input type="radio" name="Q12" value="12~Computer Internet Development~1"></td><td>Computer Internet Development</tr>
<tr><td><input type="radio" name="Q12" value="12~Internet Communications~2"></td><td>Internet Communications</tr>
<tr><td><input type="radio" name="Q12" value="12~Multimedia Communications~3"></td><td>Multimedia Communications</tr>
<tr><td><input type="radio" name="Q12" value="12~Web Development~4"></td><td>Web Development</tr>
<tr><td><input type="radio" name="Q12" value="12~Web Communications~5"></td><td>Web Communications</tr>
<tr><td><input type="radio" name="Q12" value="OTHER"></td>
    <td><input type="text" size="35" maxlength="256" name="Q12_TEXT" onfocus="Apply_Check('Q12')">(other)</td></tr>
</table>
</form>
</body>
</html>

BillyRayPreachersSon · Mar 26, 2005

Try changing this:

Code:

onfocus="Apply_Check('Q12')"

to this:

Code:

onfocus="Apply_Check('Q12[5]')"

as you have to specify the index of the radio button to change.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

meanses · Mar 26, 2005

Wow... I feel like a blond now that you showed me why the radio buttons were not working.

Thanks for all your help, I should be good to go now!

jemminger · Mar 26, 2005

wouldn't this work just as well?

function Apply_Check(x){
document.test.elements[ x ].checked = true;
}

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Using illegal characters in a function to modify a html form

meanses

Programmer

BillyRayPreachersSon

Programmer

BabyJeffy

Programmer

meanses

Programmer

BillyRayPreachersSon

Programmer

meanses

Programmer

jemminger

Programmer

Similar threads

Part and Inventory Search

Sponsor