Welcome to WebmasterWorld Guest from

Forum Moderators: open

hidden input forgets its new value

getElementById value is being reset?

7:20 pm on Dec 7, 2009 (gmt 0)

5+ Year Member


I have a problem changing the value of a hidden input so that the new value is available to subsequent events on the page. Here's my flowchart:

Step 1. User clicks on either "yes" radio button or "no" radio button to answer a question. Javascript "evalform" is called via onClick and sends along some variables to the script. (Note: I am not evaluating the value of the radio button itself -- I just need the either/or mechanism radio buttons make possible.)

Step 2. evalform reads the incoming onClick info and also reads the value of a hidden input called "questionXstorage" via getElementById. This input has an initial value of "" and it is there to hold a simple string representing the user's most recent choice (the default "" or "yes" or "no").

Step 3. evalform does some stuff based on all that and also updates the value of questionXstorage.

This all works the first time I make a choice with the radio buttons: I can alert() both the starting value of questionXstorage (gathered in Step 2) and the new value (set in Step 3 after the script has run) and they are correct.

Now for the problem: if I change my radio choice from "yes" to "no" I find that the starting alert() reports the value for questionXstorage as the default "" (instead of whatever value evalform had set it to before), and this breaks the logic of my script.

So, even though Step 3 seems to set the correct new value for questionXstorage at first, the new value is not available to subsequent calls to evalform.

Here's the evalform javascript:

<script type="text/javascript">
function evalform(quesNum,yesno,weight) {
var currentyes = document.getElementById('yes').value;
if (currentyes == '') {
currentyes = 0;
} else {
currentyes = parseInt(currentyes);

var currentno = document.getElementById('no').value;
if (currentno == '') {
currentno = 0;
} else {
currentno = parseInt(currentno);


var questionsetting = document.getElementById('question'+quesNum+'storage').value;
alert ('question'+quesNum+'storage is: '+questionsetting);

/* DO STUFF */
if (yesno == 'yes' && questionsetting != 'yes') {
document.getElementById('yes').value = currentyes + weight;
if (questionsetting == 'no') {
document.getElementById('no').value = currentno - weight;
if (document.getElementById('no').value <= 0) {
document.getElementById('no').value = '';
/* SET A NEW VALUE FOR questionXstorage */
questionsetting = 'yes';
if (yesno == 'no' && questionsetting != 'no') {
document.getElementById('no').value = currentno + weight;
if (questionsetting == 'yes') {
document.getElementById('yes').value = currentyes - weight;
if (document.getElementById('yes').value <= 0) {
document.getElementById('yes').value = '';
/* SET A NEW VALUE FOR questionXstorage */
questionsetting = 'no';
alert ('question'+quesNum+'storage is now: '+questionsetting);

Here is an example of the radio button HTML. Note: I am not actually "submitting" this form. I'm using onClick instead.

<td>I am comfortable and proficient converting word-processing files into &quot;rich text&quot; format.</td>
<td align="center"><input type="radio" name="question1" onclick="evalform(1,'yes',1)" /></td>
<td align="center" bgcolor="#ececec"><strong>1</strong></td>
<td align="center"><input type="radio" name="question1" onclick="evalform(1,'no',1)" /></td>
<td>I am not comfortable or proficient converting files into different formats.</td>
<input type="hidden" id="question1storage" value="" />

So, why is the most recent value of questionXstorage not available?


9:01 pm on Dec 7, 2009 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

/* SET A NEW VALUE FOR questionXstorage */
questionsetting = 'no';

You are setting the value of variable "questionsetting" instead of setting the value of the hidden input element. Change the two lines that set questionsetting to 'yes' and 'no' to instead set

document.getElementById('question'+quesNum+'storage').value = 'yes';
document.getElementById('question'+quesNum+'storage').value = 'no';

4:11 am on Dec 8, 2009 (gmt 0)

5+ Year Member


Earlier in the script I have this:
var questionsetting = document.getElementById('question'+quesNum+'storage').value;

So questionsetting is just shorthand for...

Wait. I think you're absolutely right. There's a big difference between the two!


5:08 pm on Dec 8, 2009 (gmt 0)

5+ Year Member

That did the trick. The page now works correctly.



Featured Threads

Hot Threads This Week

Hot Threads This Month