homepage Welcome to WebmasterWorld Guest from 54.211.219.178
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
hidden input forgets its new value
getElementById value is being reset?
pillsbur




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

Hi,

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);
}

/* BELOW IS THE START OF THE RELEVANT CODE */

/* FIND OUT WHAT THE CURRENT VALUE OF questionXstorage IS */
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);
}
</script>

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

<tr>
<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="" />
</tr>

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

Thanks,
Glenn

 

Fotiman




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


/* 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';

pillsbur




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

Hi,

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!

Thanks,
Glenn

pillsbur




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

That did the trick. The page now works correctly.

Glenn

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved