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
wouldn't
Code:
output[i] = document.getElementById("pdf_line_0_1_" + i).value;
make more sense?
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???
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"
}
does your output array end up with any values in it, and what are the errors you are getting?
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)
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.
Rick Trethewey
Rainbo Design
I am not sure what you mean for me to do
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...
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.
I think I may have suggested something similar back in post#2, J2NYC...
</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%; 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>
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>"
}
}
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
Forum Rules
Bookmarks