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

nicnac

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

 // sets up arrays

function generateQuestions(myNumberOfQuestionsAsked)

{ // myNumberOfQuestionsAsked is integer value
 
var realAnswers =new Array("0010","1010");

var answers = new Array();
 
       for(i=0;i<myNumberOfQuestionsAsked;i++)

             {      answers[i]= realAnswers[i]; }

displayQuestions(answers);

}
 
// creates the form in a table and uses the onclick to pass the form

function displayQuestions(answers)

{

..... within <BODY>

    myTestWindow.document.write("<TABLE ID='testTable1'>");

// create the FORM

myTestWindow.document.write("<FORM ID='myForm' NAME='myForm'>");
 
// Create the HIDDEN element to hold the array
 myTestWindow.document.write("<INPUT TYPE='hidden' ID='mydata' NAME='mydata' VALUE=''>");

myTestWindow.document.write("</FORM>");

myTestWindow.document.write("</TABLE>");
 
    myTestWindow.document.write("<INPUT TYPE='button' value='Mark Your Answers' onClick='testResults(myForm)'>");

    //the next section is used to refresh the script

    myTestWindow.document.write("<SCRIPT LANGUAGE='JAVASCRIPT' SRC='quizScript1.js'></SCRIPT>");
 
    //take the array and put it in the hidden field in a string format
     ansString = unescape(answers.join())
 
    myTestWindow.document.myForm.mydata.value=ansString;
 
...... closing tags<HERE>

}
 
// displays the hidden value

function testResults(myForm) 

{
 alert ("You typed: "+myForm.mydata.value);

}

Any help would be appreciated!

Thanks!

nicnac

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

 // sets up arrays

function generateQuestions(myNumberOfQuestionsAsked)

{ // myNumberOfQuestionsAsked is integer value
 
var realAnswers =new Array("0010","1010");

var answers = new Array();
 
for(i=0;i<myNumberOfQuestionsAsked;i++)

{ answers[i]= realAnswers[i]; }

displayQuestions(answers);

}
 
// creates the form in a table and uses the onclick to pass the form

function displayQuestions(answers)

{

..... within <BODY>

myTestWindow.document.write("<TABLE ID='testTable1'>");

// create the FORM

myTestWindow.document.write("<FORM ID='myForm' NAME='myForm'>");
 
// Create the HIDDEN element to hold the array

myTestWindow.document.write("<INPUT TYPE='hidden' ID='mydata' NAME='mydata' VALUE=''>");

myTestWindow.document.write("</FORM>");

myTestWindow.document.write("</TABLE>");
 
myTestWindow.document.write("<INPUT TYPE='button' value='Mark Your Answers' onClick='testResults(myForm)'>");

//the next section is used to refresh the script

myTestWindow.document.write("<SCRIPT LANGUAGE='JAVASCRIPT' SRC='quizScript1.js'></SCRIPT>");
 
//take the array and put it in the hidden field in a string format

ansString = unescape(answers.join())

myTestWindow.document.myForm.mydata.value=ansStrin g;
 
...... closing tags<HERE>

}
 
// displays the hidden value

function testResults(myForm) 

{

alert ("You typed: "+myForm.mydata.value);

}

Any help would be appreciated!

Thanks!

nicnac

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

RamananKalirajan

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

nicnac

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

Dormilich

do you have a test page available?

RamananKalirajan

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

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<script type="text/javascript">

    function loadArray(){

        var realAnswers =new Array("0010","1010");

        var answers = new Array();

        for(var i=0;i<realAnswers.length;i++)

        {

            answers[i] = realAnswers[i];

            alert(answers[i]);

        }

        document.getElementById('hidArray').value = answers;

        alert("loaded Successfully "+document.getElementById('hidArray').value);

    }

    function displayArray()

    {

        var myhidObj = new Array (document.getElementById('hidArray').value);

        alert("myhidObj = "+myhidObj);

        alert("length = "+myhidObj.length);

        for(var i=0;i<myhidObj.length;i++)

            alert(myhidObj[i]);

    }

</script>

</HEAD>

<BODY>

<form id="myForm" name="myForm">

    <input type="hidden" name="hidArray" id="hidArray" value=""/>

</form>

<input type="button" value="loadArray" onclick="loadArray();" />

<input type="button" value="displayArray" onclick="displayArray();" />

</BODY>

</HTML>

Thanks and Regards
Ramanan Kalirajan

nicnac

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

 function displayQuestions(selectedQuestions)

{

    //close the questions window

    alert("The Questions will open in a new Window - Click OK to proceed ");

    var length = selectedQuestions.length;

    myTestWindow = window.open('','myTestWindow','scrollbars=yes,width=800,height=650,left=20,top=10');

    myTestWindow.focus();

//create the page dynamically

    myTestWindow.document.write("<HTML><HEAD><TITLE>The Test Page</TITLE></HEAD>");

    myTestWindow.document.write("<BODY bgcolor='#003366' text='#FFFFFF' >");
 
    myTestWindow.document.write("<TABLE ID='testTable1' border=1 bordercolor='white' CELLPADING='' CELLSPACING='0' background= '' width='90%' height='90%'ALIGN='CENTER' bgcolor='#003366'>");

    myTestWindow.document.write("<TR width='100%' height='20%'>");

    myTestWindow.document.write("<TD colspan=10 align=center><font color='#FFFFFF' face='Verdana, Arial, Helvetica, sans-serif'");
 
    myTestWindow.document.write("</TD>");

    myTestWindow.document.write("</TR>");

    myTestWindow.document.write("<form id='myForm' name='myForm'>");

    myTestWindow.document.write("<input type='hidden' name='hidArray' id='hidArray' value=''/> ");    

    /*using a for loop to dynamically generate rows and columns equal to the number of questions */

        for (i=0;i<length;i++)

        {

         myTestWindow.document.write("<TR>");

         myTestWindow.document.write("<TD valign=top id ='questionsColumn"+i+"' name= 'questionsColumn"+i+"' colspan=4>");

         myTestWindow.document.write("<P><font color='#FFFFFF' face='Verdana, Arial, Helvetica, sans-serif'> Convert this to Binary</TD>");
 
         myTestWindow.document.write("<TD valign=top align = center colspan=2>");

         myTestWindow.document.write("<INPUT TYPE='text' ID='text"+i+"' NAME='text"+i+"'>");

         myTestWindow.document.write("</TD>");

         myTestWindow.document.write("</TR>");

        }//for
 
    myTestWindow.document.write("</form>");

    myTestWindow.document.write("</TABLE>");
 
    ans= getAnswers(length);

    myTestWindow.document.getElementById('hidArray').value = ans; 
 
    alert("loaded Successfully "+myTestWindow.document.getElementById('hidArray').value);

    myTestWindow.document.write("<input type='button' value='displayArray' onclick='displayArray();' />");

    myTestWindow.document.write("<SCRIPT LANGUAGE='JAVASCRIPT' SRC='quizScript1.js'></SCRIPT>");

}
 
function displayArray() 

    { 

        alert("HERE");

        var myhidObj = new Array (myTestWindow.document.getElementById('hidArray').value); 

        alert("myhidObj = "+myhidObj); 

        alert("length = "+myhidObj.length); 

        for(var i=0;i<myhidObj.length;i++) 

            alert("FINISHED"+myhidObj[i]); 

    }
 
function getAnswers(length)

    {

        alert("getAns1 the length is"+length);

        var realAnswers =new Array("0010","1010","0111","0011","0001","0100","0101");

        var answers = new Array();
 
        for(i=0;i<length;i++)

     {

        answers[i]= realAnswers[i];

     }

         return answers;    

  }

acoder

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.

nicnac

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

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

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

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

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

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

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

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

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

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

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

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about