By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,625 Members | 1,497 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,625 IT Pros & Developers. It's quick & easy.

Pass array as Hidden form field? Can it be done?

P: 6
Hi,

I'm self learning javascript - so any pointers are welcomed!!

I have an issue passing a form and array from one function to another.
I tried many variations !
I can't get this to work and I can't get this issue out of my head !!!!
So I'm obviously missing something really simple and can't see it or it can't be done with my limited knowledge.

I know that I can use a cookie to store the array as string - I have this working but I would like not to use cookies if possible.

ok my bare code:

Expand|Select|Wrap|Line Numbers
  1. // sets up arrays
  2. function generateQuestions(myNumberOfQuestionsAsked)
  3. { // myNumberOfQuestionsAsked is integer value
  4.  
  5. var realAnswers =new Array("0010","1010");
  6. var answers = new Array();
  7.  
  8.        for(i=0;i<myNumberOfQuestionsAsked;i++)
  9.              {      answers[i]= realAnswers[i]; }
  10. displayQuestions(answers);
  11. }
  12.  
  13.  
  14. // creates the form in a table and uses the onclick to pass the form
  15. function displayQuestions(answers)
  16. {
  17. ..... within <BODY>
  18.     myTestWindow.document.write("<TABLE ID='testTable1'>");
  19. // create the FORM
  20. myTestWindow.document.write("<FORM ID='myForm' NAME='myForm'>");
  21.  
  22. // Create the HIDDEN element to hold the array
  23. myTestWindow.document.write("<INPUT TYPE='hidden' ID='mydata' NAME='mydata' VALUE=''>");
  24. myTestWindow.document.write("</FORM>");
  25. myTestWindow.document.write("</TABLE>");
  26.  
  27.     myTestWindow.document.write("<INPUT TYPE='button' value='Mark Your Answers' onClick='testResults(myForm)'>");
  28.     //the next section is used to refresh the script
  29.     myTestWindow.document.write("<SCRIPT LANGUAGE='JAVASCRIPT' SRC='quizScript1.js'></SCRIPT>");
  30.  
  31.     //take the array and put it in the hidden field in a string format
  32.     ansString = unescape(answers.join())
  33.     myTestWindow.document.myForm.mydata.value=ansString;
  34.  
  35. ...... closing tags<HERE>
  36. }
  37.  
  38. // displays the hidden value
  39. function testResults(myForm) 
  40. {
  41. alert ("You typed: "+myForm.mydata.value);
  42. }

Any help would be appreciated!

Thanks!
Oct 28 '09 #1
Share this Question
Share on Google+
9 Replies


P: 6
Hi,

I'm self learning javascript - so any pointers are welcomed!!

I have an issue passing a form and array from one function to another.
I tried many variations !
I can't get this to work and I can't get this issue out of my head !!!!
So I'm obviously missing something really simple and can't see it or it can't be done with my limited knowledge.

I know that I can use a cookie to store the array as string - I have this working but I would like not to use cookies if possible.

ok my bare code:

Expand|Select|Wrap|Line Numbers
  1. // sets up arrays
  2. function generateQuestions(myNumberOfQuestionsAsked)
  3. { // myNumberOfQuestionsAsked is integer value
  4.  
  5. var realAnswers =new Array("0010","1010");
  6. var answers = new Array();
  7.  
  8. for(i=0;i<myNumberOfQuestionsAsked;i++)
  9. { answers[i]= realAnswers[i]; }
  10. displayQuestions(answers);
  11. }
  12.  
  13.  
  14. // creates the form in a table and uses the onclick to pass the form
  15. function displayQuestions(answers)
  16. {
  17. ..... within <BODY>
  18. myTestWindow.document.write("<TABLE ID='testTable1'>");
  19. // create the FORM
  20. myTestWindow.document.write("<FORM ID='myForm' NAME='myForm'>");
  21.  
  22. // Create the HIDDEN element to hold the array
  23. myTestWindow.document.write("<INPUT TYPE='hidden' ID='mydata' NAME='mydata' VALUE=''>");
  24. myTestWindow.document.write("</FORM>");
  25. myTestWindow.document.write("</TABLE>");
  26.  
  27. myTestWindow.document.write("<INPUT TYPE='button' value='Mark Your Answers' onClick='testResults(myForm)'>");
  28. //the next section is used to refresh the script
  29. myTestWindow.document.write("<SCRIPT LANGUAGE='JAVASCRIPT' SRC='quizScript1.js'></SCRIPT>");
  30.  
  31. //take the array and put it in the hidden field in a string format
  32. ansString = unescape(answers.join())
  33. myTestWindow.document.myForm.mydata.value=ansStrin g;
  34.  
  35. ...... closing tags<HERE>
  36. }
  37.  
  38. // displays the hidden value
  39. function testResults(myForm) 
  40. {
  41. alert ("You typed: "+myForm.mydata.value);
  42. }

Any help would be appreciated!

Thanks!
Oct 29 '09 #2

P: 6
Sorry! As you can tell I'm new so posted this in the WRONG place!
It has now been moved to the javascript questions area! Although if you know the answer please feel free to comment!

Thanks
Oct 29 '09 #3

RamananKalirajan
100+
P: 607
What about this piece of code? Did you got any error while trying this code? You can use the hidden variable to set the array values.

Thanks and Regards
Ramanan Kalirajan
Oct 30 '09 #4

P: 6
No I never got any errors just no data displayed?
I have checked the contents of the array and string as it's passed through the function and it's stored ok. (output in alert's)
It's just when the data is passed in the form I can't see it?

I'm thinking it must be my syntax ? Any suggestions?

Thanks,
Nichola
Oct 30 '09 #5

Dormilich
Expert Mod 5K+
P: 8,639
do you have a test page available?
Oct 30 '09 #6

RamananKalirajan
100+
P: 607
Hi,
I got the solution for your question. You will get the array values but not as a array object instead you will get as a String object. The input type hidden variables can hold only string values. When you assign a Array object to the Hidden Variable its implicitly converted to String Value.

This is the following code I tried myself
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <META NAME="Generator" CONTENT="EditPlus">
  6. <META NAME="Author" CONTENT="">
  7. <META NAME="Keywords" CONTENT="">
  8. <META NAME="Description" CONTENT="">
  9. <script type="text/javascript">
  10.     function loadArray(){
  11.         var realAnswers =new Array("0010","1010");
  12.         var answers = new Array();
  13.         for(var i=0;i<realAnswers.length;i++)
  14.         {
  15.             answers[i] = realAnswers[i];
  16.             alert(answers[i]);
  17.         }
  18.         document.getElementById('hidArray').value = answers;
  19.         alert("loaded Successfully "+document.getElementById('hidArray').value);
  20.     }
  21.     function displayArray()
  22.     {
  23.         var myhidObj = new Array (document.getElementById('hidArray').value);
  24.         alert("myhidObj = "+myhidObj);
  25.         alert("length = "+myhidObj.length);
  26.         for(var i=0;i<myhidObj.length;i++)
  27.             alert(myhidObj[i]);
  28.     }
  29. </script>
  30. </HEAD>
  31. <BODY>
  32. <form id="myForm" name="myForm">
  33.     <input type="hidden" name="hidArray" id="hidArray" value=""/>
  34. </form>
  35. <input type="button" value="loadArray" onclick="loadArray();" />
  36. <input type="button" value="displayArray" onclick="displayArray();" />
  37. </BODY>
  38. </HTML>
Thanks and Regards
Ramanan Kalirajan
Oct 30 '09 #7

P: 6
Oh that works a treat! Magic!!

However I want to run the javascript in a .js file. When I do I'm getting issues with the document values. When in displayQuestions(), I create my form and new window. I can access all elements, however when I'm trying to access document.getElementById('hidArray').value from another function (displayArray() I'm getting no value?
I think the document is local to that function? How would I pass the document or would I be better passing the form that way I can access other elements too?

I have tried passing the form and accessing the element by form.elements['hidArray'] and again I see no output?
Must be my syntax - I'm sure you can pass the form this way!

My code is below:

Expand|Select|Wrap|Line Numbers
  1. function displayQuestions(selectedQuestions)
  2. {
  3.     //close the questions window
  4.     alert("The Questions will open in a new Window - Click OK to proceed ");
  5.     var length = selectedQuestions.length;
  6.     myTestWindow = window.open('','myTestWindow','scrollbars=yes,width=800,height=650,left=20,top=10');
  7.     myTestWindow.focus();
  8. //create the page dynamically
  9.     myTestWindow.document.write("<HTML><HEAD><TITLE>The Test Page</TITLE></HEAD>");
  10.     myTestWindow.document.write("<BODY bgcolor='#003366' text='#FFFFFF' >");
  11.  
  12.     myTestWindow.document.write("<TABLE ID='testTable1' border=1 bordercolor='white' CELLPADING='' CELLSPACING='0' background= '' width='90%' height='90%'ALIGN='CENTER' bgcolor='#003366'>");
  13.     myTestWindow.document.write("<TR width='100%' height='20%'>");
  14.     myTestWindow.document.write("<TD colspan=10 align=center><font color='#FFFFFF' face='Verdana, Arial, Helvetica, sans-serif'");
  15.  
  16.     myTestWindow.document.write("</TD>");
  17.     myTestWindow.document.write("</TR>");
  18.     myTestWindow.document.write("<form id='myForm' name='myForm'>");
  19.     myTestWindow.document.write("<input type='hidden' name='hidArray' id='hidArray' value=''/> ");    
  20.     /*using a for loop to dynamically generate rows and columns equal to the number of questions */
  21.         for (i=0;i<length;i++)
  22.         {
  23.          myTestWindow.document.write("<TR>");
  24.          myTestWindow.document.write("<TD valign=top id ='questionsColumn"+i+"' name= 'questionsColumn"+i+"' colspan=4>");
  25.          myTestWindow.document.write("<P><font color='#FFFFFF' face='Verdana, Arial, Helvetica, sans-serif'> Convert this to Binary</TD>");
  26.  
  27.          myTestWindow.document.write("<TD valign=top align = center colspan=2>");
  28.          myTestWindow.document.write("<INPUT TYPE='text' ID='text"+i+"' NAME='text"+i+"'>");
  29.          myTestWindow.document.write("</TD>");
  30.          myTestWindow.document.write("</TR>");
  31.         }//for
  32.  
  33.     myTestWindow.document.write("</form>");
  34.     myTestWindow.document.write("</TABLE>");
  35.  
  36.     ans= getAnswers(length);
  37.     myTestWindow.document.getElementById('hidArray').value = ans; 
  38.  
  39.     alert("loaded Successfully "+myTestWindow.document.getElementById('hidArray').value);
  40.     myTestWindow.document.write("<input type='button' value='displayArray' onclick='displayArray();' />");
  41.     myTestWindow.document.write("<SCRIPT LANGUAGE='JAVASCRIPT' SRC='quizScript1.js'></SCRIPT>");
  42. }
  43.  
  44.  
  45.  
  46. function displayArray() 
  47.     { 
  48.         alert("HERE");
  49.         var myhidObj = new Array (myTestWindow.document.getElementById('hidArray').value); 
  50.         alert("myhidObj = "+myhidObj); 
  51.         alert("length = "+myhidObj.length); 
  52.         for(var i=0;i<myhidObj.length;i++) 
  53.             alert("FINISHED"+myhidObj[i]); 
  54.     }
  55.  
  56. function getAnswers(length)
  57.     {
  58.         alert("getAns1 the length is"+length);
  59.         var realAnswers =new Array("0010","1010","0111","0011","0001","0100","0101");
  60.         var answers = new Array();
  61.  
  62.         for(i=0;i<length;i++)
  63.      {
  64.         answers[i]= realAnswers[i];
  65.      }
  66.          return answers;    
  67.   }
Oct 30 '09 #8

acoder
Expert Mod 15k+
P: 16,027
displayArray() from the popup window expects that it is defined within the window. Since it's actually in the parent window, change it to window.opener.displayArray().

PS. please use code tags when posting code.
Nov 1 '09 #9

P: 6
Whoo hoo!!

Fantastic!
There was no way I was even thinking like that!

Thank you very much!
I just modified
document.getElementById('hidArray').value
to
window.opener.myTestWindow.document.getElementById ('hidArray').value
and it works perfect!

Much appreciated!

I will add code tags for any other posts - thanks for the pointer.

N
Nov 2 '09 #10

Post your reply

Sign in to post your reply or Sign up for a free account.