www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Capturing values in array

  1. #1
    Join Date
    May 2012
    Posts
    8

    Capturing values in array

    I have a user filled form that contains 13 different dropdown lists from which the user can only pick values from eight of the dropdowns.

    My elements are incremented like this:

    document.getElementById('pdf_line_0_1_1').value
    document.getElementById('pdf_line_0_1_2').value
    document.getElementById('pdf_line_0_1_3').value

    I found that I can use an array to capture the values but when I try to loop through the elements incrementing the element name like this:


    output = [];
    for (var i = 1; i <= 13; i++ ) {
    output[i] = "document.getElementById('pdf_line_0_1_" + i + "').value";
    document.write(output[i] + "\n")
    }


    I get "document.getElementById('pdf_line_0_1_1').value" not the value of the element - How can I get the value???

    Any help or insight would be greatly appreciated.

    Steve

  2. #2
    Join Date
    Nov 2010
    Posts
    1,102
    wouldn't
    Code:
    output[i] = document.getElementById("pdf_line_0_1_" + i).value;
    make more sense?

  3. #3
    Join Date
    May 2012
    Posts
    8
    I was not going to increment the array based on the loop values since I need to end up with 8 array values. I was going to use an if statement to determine which values were included in the array.

    When I use your suggestion I get errors and nothing returned. Looks to me like the value withing the parenthesis would give me '("pdf_line_0_1_"0)' and not '("pdf_line_0_1_0") so that is probably why I am receiving the errors and nothing in return.

    Any suggetions???

  4. #4
    Join Date
    May 2012
    Posts
    14
    May be you could try the following

    output = [];
    for (var i = 1; i <= 13; i++ ) {
    var listId = "pdf_line_0_1_"+i;
    output[i] = document.getElementById(listId).value;
    document.writeln(output[i]) // no need to use - write +"\n"
    }

  5. #5
    Join Date
    May 2012
    Posts
    8
    Still no results back

  6. #6
    Join Date
    Nov 2010
    Posts
    1,102
    does your output array end up with any values in it, and what are the errors you are getting?

  7. #7
    Join Date
    May 2012
    Posts
    8
    No values at all with that code - with my code I get
    document.getElementById('pdf_line_0_1_1').value,
    document.getElementById('pdf_line_0_1_2').value,
    document.getElementById('pdf_line_0_1_3').value,

    errors:
    Uncaught TypeError: Cannot read property 'value' of undefined
    (anonymous function)96:571
    96:600Uncaught TypeError: Cannot read property 'value' of null
    (anonymous function)

  8. #8
    Join Date
    Mar 2011
    Posts
    1,160
    To follow up on xelawho's question, you need to be careful when and where you use document.write(). It's *possible* to use it to update the content of a page dynamically, but if you use it incorrectly you can have unexpected results. For testing purposes, I'd suggest adding a special element like:
    Code:
      <div id="testdiv"></div>
    and then use:
    Code:
      document.getElementById("testdiv").innerHTML += output[i];
    to see your results.

  9. #9
    Join Date
    May 2012
    Posts
    8
    I am not sure what you mean for me to do

  10. #10
    Join Date
    Nov 2010
    Posts
    1,102
    I guess it's something else then, because this simple test:
    Code:
    <html>
    <head>
    </head>
    <body>
    <input type='text' value="1" id="pdf_line_0_1_1"/>
    <input type='text' value="2" id="pdf_line_0_1_2"/>
    <input type='text' value="3" id="pdf_line_0_1_3"/>
    <script type="text/javascript">
    output = [];
    for (var i = 1; i < 4; i++ ) { 
    output[i] = document.getElementById("pdf_line_0_1_" + i).value;
    document.write("<br>"+output[i])
    }
    </script>
    </body>
    </html>
    works fine.

    but if you have 13 inputs and only want 8 of them in the array, maybe it is best to filter them before looping through them, or maybe your id's don't increment that way. or maybe lots of things - maybe if we say your html it would narrow down the options...

  11. #11
    Join Date
    Mar 2009
    Location
    New York City
    Posts
    128
    Change output[i] = "document.getElementById('pdf_line_0_1_" + i + "').value";

    to

    output[i] = document.getElementById('pdf_line_0_1_' + i).value;

    You're putting the entire string in quotes which will result in your array containing "document.getElementById('.....etc" instead of the value you seek.

  12. #12
    Join Date
    Nov 2010
    Posts
    1,102
    I think I may have suggested something similar back in post#2, J2NYC...

  13. #13
    Join Date
    May 2012
    Posts
    8
    </table>

    </div>
    </fieldset>
    <fieldset class=" collapsible " id="block_coverages" block="coverages"
    style="text-align:left;width:510px;">
    <legend>
    Coverages </legend>
    <div class="fieldset-wrapper" style="display: block;">

    <table>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Accident</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_1' id='pdf_line_0_1_1' class="hiflex_input_normal" onChange='setCookie("Accident",value); addit()';>
    <option value='Accident' selected>Accident</option>
    <option value=''></option>
    <option value='Accident'>Accident</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100&#37;; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Cancer</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_2' id='pdf_line_0_1_2' class="hiflex_input_normal" onChange='setCookie("Cancer",value); addit()';>
    <option value='Cancer' selected>Cancer</option>
    <option value=''></option>
    <option value='Cancer'>Cancer</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Critical Illness</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_3' id='pdf_line_0_1_3' class="hiflex_input_normal" onChange='setCookie("Critical_Illness",value); addit()';>
    <option value='Critical Illness' selected>Critical Illness</option>
    <option value=''></option>
    <option value='Critical Illness'>Critical Illness</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Dental</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_4' id='pdf_line_0_1_4' class="hiflex_input_normal" onChange='setCookie("Dental",value); addit()';>
    <option value='' selected></option>
    <option value='Dental'>Dental</option>
    <option value='Dental'>Dental</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:135px"><nobr>DHMO/Prepaid Dental</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_5' id='pdf_line_0_1_5' class="hiflex_input_normal" onChange='setCookie("DHMO_Prepaid_Dental",value); addit()';>
    <option value='' selected></option>
    <option value='DHMO/Prepaid Dental'>DHMO/Prepaid Dental</option>
    <option value='DHMO/Prepaid Dental'>DHMO/Prepaid Dental</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Gap</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_6' id='pdf_line_0_1_6' class="hiflex_input_normal" onChange='setCookie("Gap",value); addit()';>
    <option value='' selected></option>
    <option value='Gap'>Gap</option>
    <option value='Gap'>Gap</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Life</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_7' id='pdf_line_0_1_7' class="hiflex_input_normal" onChange='setCookie("Life",value); addit()';>
    <option value='' selected></option>
    <option value='Life'>Life</option>
    <option value='Life'>Life</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Long-Term Disability</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_8' id='pdf_line_0_1_8' class="hiflex_input_normal" onChange='setCookie("Long_Term_Disability",value); addit()';>
    <option value='' selected></option>
    <option value='Long-Term Disability'>Long-Term Disability</option>
    <option value='Long-Term Disability'>Long-Term Disability</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Serious Disability</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_9' id='pdf_line_0_1_9' class="hiflex_input_normal" onChange='setCookie("Serious_Disability",value); addit()';>
    <option value='' selected></option>
    <option value='Serious Disability'>Serious Disability</option>
    <option value='Serious Disability'>Serious Disability</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Short-Term Disability</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_10' id='pdf_line_0_1_10' class="hiflex_input_normal" onChange='setCookie("Short_Term_Disability",value); addit()';>
    <option value='' selected></option>
    <option value='Short-Term Disability'>Short-Term Disability</option>
    <option value='Short-Term Disability'>Short-Term Disability</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Vision</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><select name='pdf_line_0_1_11' id='pdf_line_0_1_11' class="hiflex_input_normal" onChange='setCookie("Vision",value); addit()';>
    <option value='' selected></option>
    <option value='Vision'>Vision</option>
    <option value='Vision'>Vision</option>
    </select>
    </nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Other 1</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><input onChange='setCookie("Other_1",value); addit()'; class='hiflex_input_normal' style='vertical-align:middle;width:250px;' type=text mandatory='' name='pdf_line_0_1_12' id='pdf_line_0_1_12' value="" maxlength='21' ><div class='hiflex_input_normal_error_message' style='display:none;' id='pdf_line_0_1_12_error_message'></div></nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"><a href="#" class="tooltip" title="A maximum of 8 coverages will print on the poster." ><img src="http://assurant.fleshco.com/sites/all/modules/hiflex/webshop/images/pdf_online/help.png" border=0></a></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><div style="text-align:left;width:120px"><nobr>Other 2</nobr></div></td>
    <td class="" valign=top onClick=''><div style=" text-align:left;"><nobr><input onChange='setCookie("Other_2",value); addit()'; class='hiflex_input_normal' style='vertical-align:middle;width:250px;' type=text mandatory='' name='pdf_line_0_1_13' id='pdf_line_0_1_13' value="" maxlength='21' ><div class='hiflex_input_normal_error_message' style='display:none;' id='pdf_line_0_1_13_error_message'></div></nobr></div></td>
    <td class="" valign=top onClick=''><div style="width:100%; text-align:left;"><a href="#" class="tooltip" title="A maximum of 8 coverages will print on the poster." ><img src="http://assurant.fleshco.com/sites/all/modules/hiflex/webshop/images/pdf_online/help.png" border=0></a></div></td>
    </tr>
    <tr>

    <td class="" valign=top onClick=''><input type="button" onclick="show_alert()" value="Check Coverages" /></td>
    </tr>
    </table>

    </div>
    </fieldset>
    <fieldset class=" collapsible " id="block_Info Block" block="Info Block"
    style="text-align:left;width:510px;">
    <legend>
    Text Block </legend>
    <div class="fieldset-wrapper" style="display: block;">

    <table>

  14. #14
    Join Date
    Nov 2010
    Posts
    1,102
    looks like rtrethewey was on the money - document.write messes you up. try this:

    Code:
    function show_alert(){
    document.getElementById("block_Info Block").innerHTML=""
    output = [];
    for (var i = 1; i <= 13; i++ ) { 
    output[i] = document.getElementById("pdf_line_0_1_" + i).value;
    document.getElementById("block_Info Block").innerHTML+=output[i]+"<br>"
    	}
    }

  15. #15
    Join Date
    May 2012
    Posts
    8
    OK - so how would I use this function - sorry to be such a NOOB but I have not done alot in javascript - I usually have done everything in PHP.

    If there is a better way than looping through it I am all for it.

    I really appreciate everyone's effort.

    Steve

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles