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

Multiple serials with multiple parts attached to it.

100+
P: 769
Hey Everyone,

Well i was hoping someone could explain the best way i could go about this.
i have a few ideas on how i could go about this but i am just not sure if it would work.

Right now i have a form where you can add and delete multiple serial information. This works wonderful. But now for every serial information i add i need to be able to add and remove multiple parts to that serial.

heres an example of what i mean

serial information 1
parts 1
parts 2

serial information 2
parts 1
parts 2

The thing is if one of the serial information's gets deleted all the parts associated with it also have to be able to be removed with it as well. So if anyone could explain the best way to do this i would very much appreciate it.Here is the code i currently have for it. This allows you to add multiple serials.

Expand|Select|Wrap|Line Numbers
  1. <!---Allows us to add serial information multiple times --->
  2. <script type="text/javascript">
  3. <!---Allows us to add multiple fields --->
  4. function addInput(divName){
  5. var dynamic = document.getElementById('dynamicInput');
  6. var thevalue = document.getElementById('theValue');
  7. var count = (document.getElementById('theValue').value -1)+ 2;
  8. thevalue.value = count;
  9. var newdiv = document.createElement('div');
  10. var divIdName = 'dynamic'+count+'Input';
  11. newdiv.setAttribute('id',divIdName);
  12.  
  13. <!--- Adds Extra fields for Model No, Product Type, and Type of Hardware Failure  --->
  14. newdiv.innerHTML =
  15. "<table class='zpExpandedTable' id='modeltable'>" +
  16. "<th class='sectiontitletick' colspan='7'>Serial Information "+ count +" </th>" +
  17. "<tr>" +
  18. "<td id='paddingformultitop'>Model No:&nbsp;&nbsp;&nbsp;&nbsp;</td>" +
  19. "</td>" +
  20. "<td>" +
  21.  "<select name='modelno_" + count + "' >" +
  22.  "<option value=''>Make A Selection</option>" +
  23. "<cfoutput query='models'>" + 
  24. "<option value='#model#'>#model#</option>" + 
  25. "</cfoutput>" + 
  26.  "</select>" +
  27.  "</td>" +
  28.  "<td>" +
  29. "&nbsp;&nbsp;&nbsp;&nbsp;Product Type:"  +
  30. "</td>" +
  31. "<td>" +
  32. "<select name='producttype_" + count + "'>" +
  33. "<option value='' selected>No Choice</option>" +
  34. "<cfoutput query='getProdType'>" + 
  35. "<option value='#pk_productType#'>#pk_productType#</option>" + 
  36. "</cfoutput>" + 
  37. "</select>" +
  38. "</td>" +
  39. "<td class='red'>" +
  40. "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type Of Hardware Failure*:" +
  41. "</td>" +
  42. "<td>" +
  43. "<select name='hardwarefailure_" + count + "'>" +
  44. "<option value='' selected>Make A Selection</option>" +
  45. "<cfoutput query='getHardwareFail'>" +
  46. "<option value='#pk_hardwareFailure#'>#pk_hardwareFailure#</option>" +
  47. "</cfoutput>" +
  48. "</select>" +
  49. "</td>" +
  50. "</tr>" +
  51. "<table>";
  52.  
  53. <!--- Adds Extra fields for Serial Number and Software/Hardware  --->
  54. newdiv.innerHTML = newdiv.innerHTML +
  55. "<table class='zpExpandedTable' id='modeltable'>" +
  56. "<tr>" +
  57. "<td id='paddingformultitop'>" +
  58. "Serial Number:&nbsp;&nbsp;" +
  59. "<input type='text' name='serialnum_" + count + "'>" +
  60. "&nbsp;&nbsp;&nbsp;&nbsp;Software/Hardware:&nbsp;&nbsp;" +
  61. "<select name='softhardware_" + count + "'>" +
  62. "<option value='' selected>No Choice</option>" +
  63. "<cfoutput query='getSoftHard'>" + 
  64. "<option value='#pk_softwareHardware#'>#pk_softwareHardware#</option>" + 
  65. "</cfoutput>" + 
  66. "</select>" +
  67. "</td>" +
  68. "</tr>" +
  69. "</table>";
  70.  
  71. <!--- Adds Extra fields for Description  --->
  72. newdiv.innerHTML = newdiv.innerHTML + 
  73. "<table class='zpExpandedTable' id='resoltable' cellpadding='3' cellspacing='0'>" +
  74. "<tr>" +
  75. "<td id='paddingformutli'>" +
  76. "Description:&nbsp;&nbsp;" + 
  77. "</td>" +
  78. "<td class='descriptionmoveinmulti'>" +
  79. "( You may enter up to 1000 characters. )"+
  80. "<br>" +
  81. "<textarea maxlength='1000' onkeyup='return descriptionmaxlength(this)' onkeydown='return descriptionmaxlength(this)'rows='4' cols='60' name='thedescription_" + count + "'></textarea>" +
  82. "</td>" +
  83. "</tr>" +
  84. "</table>";
  85.  
  86. <!--- Adds Extra fields for Resolution  --->
  87. newdiv.innerHTML = newdiv.innerHTML +
  88. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  89. "<tr>" +
  90. "<td id='paddingformutli'>" +
  91. "Resolution:&nbsp;&nbsp;" +
  92. "</td>" +
  93. "<td class='resolutionmoveinmulti'>" +
  94. "( You may enter up to 1500 characters. )"+
  95. "<br>" +
  96. "<textarea maxlength='1500' onkeyup='return resolutionmaxlength(this)' onkeydown='return resolutionmaxlength(this)' rows='4' cols='60' name='resolution_" + count + "'></textarea>" +
  97. "</td>" +
  98. "</tr>" +
  99. "</table>";
  100.  
  101. <!--- Adds Extra fields for Resolution Date, Current Date (for resolution date) and resolution vertified as effective by  --->
  102. newdiv.innerHTML = newdiv.innerHTML +
  103. "<table class='zpExpandedTable' id='resoldatetab' cellpadding='1' cellspacing='0'>" +
  104. "<tr>" +
  105. "<td id='paddingformultitop'>" +
  106. "Resolution Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  107. "</td>" +
  108. "<td>" +
  109. "<input type='text' name='resdate_" + count + "' value=''  >&nbsp;&nbsp;" +
  110.  
  111. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  112. "<input type='checkbox' name='currentdateresol_" + count + "' onClick=resdate_" + count + ".value=fill_date()>" +
  113. "</td>" +
  114. "<td>" +
  115. "Resolution Verified as effective by:&nbsp;&nbsp;"  +
  116. "</td>" +
  117. "<td>" +
  118. "<select name='resvertified_" + count + "'>" +
  119. "<option value='' selected>Make A Selection</option>" +
  120. "<cfoutput query='gettech'><option value='#fname# #lname#'>#fname# #lname#</option></cfoutput>" +
  121. "</select>" +
  122. "</td>" +
  123. "</tr>" +
  124. "</table>";
  125.  
  126. <!--- Adds Extra fields for Vertification Date, Current Date (for vertification date) and resolution vertified as effective by  --->
  127. newdiv.innerHTML = newdiv.innerHTML +
  128. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  129. "<tr>" +
  130. "<td id='paddingformultitop'>" +
  131. "Verification Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  132. "</td>" +
  133. "<td class='vertificationmoveinmulti'>" +
  134. "<input type='text' name='vertifidate_" + count + "'>&nbsp;&nbsp;" +
  135. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  136. "<input type='checkbox' name='currentdatevert_" + count + "' onClick=vertifidate_" + count + ".value=fill_date()>" +
  137. "</td>" +
  138. "</tr>" +
  139. "</table>";
  140.  
  141. <!--- Adds Extra fields for Dept/Vendor Responsibility  --->
  142. newdiv.innerHTML = newdiv.innerHTML +
  143. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  144. "<tr>" +
  145. "<td class='red' id='paddingformultitop'>" +
  146. "Dept/Vendor Responsibility*:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  +
  147. "<select name='deptvendor_" + count + "'>" +
  148. "<option value='' selected>Make A Selection</option>" +
  149. "<cfoutput query='getDeptVendor'>" +
  150. "<option value='#pk_deptVendor#'>#pk_deptVendor#</option>" +
  151. " </cfoutput>" +
  152. "</select>" +
  153. "</td>" +
  154. "</tr>" +
  155. "</table>";
  156.  
  157. <!--- Adds Extra fields for RMA Data Only  --->
  158. newdiv.innerHTML = newdiv.innerHTML +
  159. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  160. "<tr>" +
  161. "<td id='paddingformultitop'>" +
  162. "RMA Data Only:&nbsp;&nbsp;&nbsp;&nbsp;" +
  163. "</td>" +
  164. "<td class='rmanmoveinmulti'>" +
  165. "( You may enter up to 1000 characters. )"+
  166. "<br/>" +
  167. "<textarea maxlength='1000' onkeyup='return rmamaxlength(this)' onkeydown='return rmamaxlength(this)' rows='4' cols='60' name='rma_" + count + "'></textarea> " +
  168. "</td>" +
  169. "</tr>" +
  170. "</table>" +
  171. "<input type='hidden' name='serialcount' value='" + count + "'>";
  172.  
  173. <!--- Adds Delete to every ticket  --->
  174. newdiv.innerHTML = newdiv.innerHTML +
  175. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  176. "<tr>" +
  177. "<td>" +
  178. "<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
  179. "</td>" +
  180. "</td>" +
  181. "</tr>" +
  182. "</table>";
  183.  
  184. document.getElementById(divName).appendChild(newdiv);
  185.  
  186. <!---Allows us to remove multiple fields --->
  187. function removeElement(divNum) {
  188.   var d = document.getElementById('dynamicInput');
  189.   var olddiv = document.getElementById(divNum);
  190.   d.removeChild(olddiv);
  191. }
  192. </script>
  193.  
  194. <form>
  195. <!--- Ticket Information --->
  196. <input type="hidden" value="0" id="theValue" />
  197.      <div id="dynamicInput">
  198.      <!--- All Ticket Information Appears Here--->
  199.      </div>
  200.      <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
  201.      </form>

Thank you in advance,
Rach
Oct 7 '08 #1
Share this Question
Share on Google+
92 Replies


acoder
Expert Mod 15k+
P: 16,027
Add the parts within the serial div, so when you remove the div everything within it is deleted including the parts.
Oct 8 '08 #2

100+
P: 769
Add the parts within the serial div, so when you remove the div everything within it is deleted including the parts.
Hey Acoder,


Well the thing is i am inserting an not just trying to display the parts. An the way i am inserting i don't have anything between the div like so

Expand|Select|Wrap|Line Numbers
  1. <!--- Ticket Information --->
  2. <input type="hidden" value="0" id="theValue" />
  3.      <div id="dynamicInput">
  4.      <!--- All Ticket Information Appears Here--->
  5.      </div>
  6.      <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
  7.  
an they also want to make it for every serial they add they want to make it so they can add multiple parts per serial. I had the idea of taking the function i have now an making a copy of it, change a few words so they don't get each other confused an then put the new function within the old function. that way it could add and remove fields but i am not sure that would work.Could i do it that way?

Thank you,
Rach
Oct 8 '08 #3

acoder
Expert Mod 15k+
P: 16,027
I meant to add the parts to the serial div as you've done with serial (appending to dynamicInput). If you want to add and remove parts individually, you can create two functions similar to what you have for serials.
Oct 8 '08 #4

100+
P: 769
[quote=acoder]I meant to add the parts to the serial div as you've done with serial (appending to dynamicInput). If you want to add and remove parts individually, you can create two functions similar to what you have for serials.[/QUOTE

Hey Acoder,

The only thing i am not understanding is the appending to the dynamicInput. Are you saying when i create my new function to put the new function within the dynamic input like so

Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" value="0" id="theValue" />
  2.      <div id="dynamicInput">
  3. <div id="parts"></div>
  4.      <!--- All Ticket Information Appears Here--->
  5.      </div>
  6.      <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >


here is what i have so far for parts but i keep getting the error addpartInput undefined but yet i have not even gotten to see the parts show up yet. Here is what i have

the javascript
Expand|Select|Wrap|Line Numbers
  1. <!---PARTS--->
  2. <script type="text/javascript">
  3. <!---Allows us to add multiple fields for parts --->
  4. function addpartInput(partName){
  5. var parts = document.getElementById('partsInput');
  6. var avalue = document.getElementById('aValue');
  7. var count = (document.getElementById('aValue').value -1)+ 2;
  8. avalue.value = count;
  9. var partdiv = document.createElement('div');
  10. var partIdName = 'parts'+count+'Input';
  11. partdiv.setAttribute('id',partIdName);
  12.  
  13. <!--- Adds Extra fields parts table  --->
  14. partdiv.innerHTML =
  15. "<table class='createticketables' id='spaceup'>" +
  16. "<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
  17. "<tr>" +
  18. "<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
  19. "<td class='red'>" +
  20. "Parts been returned* " +
  21. "<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
  22. "</td>" +
  23. "<td>" +
  24. "<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
  25. "</td>" +
  26. "</tr>" +
  27. "</table>" +
  28. "<table class='createticketables' >" +
  29. "<tr>" +
  30. "<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
  31. "<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
  32. "Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
  33. "<td>On Site:</td>" +
  34. "<td><select name='onsite_" + count +"'>" +
  35. "<option value='No Choice' selected>No Choice</option>" +
  36. "<option value='Yes'>Yes</option>" +
  37. "<option value='No'>No</option>" +
  38. "</select><td>" +
  39. "<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
  40. "<option value='' selected>No Choice</option>" +
  41.  "<cfloop from='0' to='10' index='nonsite'><cfoutput><option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>
  42. </select><td>" +
  43. "</tr>" +
  44. "</table>" +
  45. "<input type='hidden' name='serialcount' value='" + count + "'>";
  46.  
  47.  
  48. <!---<!--- Adds Delete to every ticket  --->
  49. newdiv.innerHTML = newdiv.innerHTML +
  50. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  51. "<tr>" +
  52. "<td>" +
  53. "<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
  54. "</td>" +
  55. "</td>" +
  56. "</tr>" +
  57. "</table>";
  58.  
  59. document.getElementById(divName).appendChild(newdiv);
  60.  
  61. <!---Allows us to remove multiple fields --->
  62. function removeElement(divNum) {
  63.   var d = document.getElementById('dynamicInput');
  64.   var olddiv = document.getElementById(divNum);
  65.   d.removeChild(olddiv);
  66. }--->
  67. </script>
the form
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <body onload="addInput('dynamicInput');addpartInput('partsInput');">
  3. <form>
  4. <input type="hidden" value="0" id="theValue" />
  5. <input type="hidden" value="0" id="aValue" />
  6.      <div id="dynamicInput">
  7.      <div id="partsInput">
  8.      <!--- All Ticket Information Appears Here--->
  9.      </div>
  10.      </div>
  11.      <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
  12. </form>
  13. </body>
  14. </html>
Thank you,
Rach
Oct 8 '08 #5

100+
P: 769
Hey Acoder,

Ok i got the parts information showing up. An i don't get the error like i described above anymore. However, i am still having trouble.

Right now when the page loads it puts the part information on top of the serial information. When i click add part it adds the part underneath the first part that loads. When i click on add serial it puts the serial underneath the previous serial.

What i am trying to do is this

serial information
parts 1
parts 2

serial information 2
parts 1
parts 2

basically its positioning that i am having problems on. Any ideas? here is what i have

the html

Expand|Select|Wrap|Line Numbers
  1. <body onload="addInput('dynamicInput');addpartInput('partsInput');">
  2. <!--- Ticket Information --->
  3. <input type="hidden" value="0" id="theValue" />
  4. <input type="hidden" value="0" id="aValue" />
  5.      <div id="dynamicInput">
  6.      <div id="partsInput">
  7.      <!--- All Ticket Information Appears Here--->
  8.      </div>
  9.      </div>
  10.       <input type="button" class="addticket" value="Add Parts" onClick="addpartInput('partsInput');" >
  11.      <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
the serial and parts javascript

Expand|Select|Wrap|Line Numbers
  1. <!---Allows us to add serial information multiple times --->
  2. <script type="text/javascript">
  3. <!---Allows us to add multiple fields --->
  4. function addInput(divName){
  5. var dynamic = document.getElementById('dynamicInput');
  6. var thevalue = document.getElementById('theValue');
  7. var count = (document.getElementById('theValue').value -1)+ 2;
  8. thevalue.value = count;
  9. var newdiv = document.createElement('div');
  10. var divIdName = 'dynamic'+count+'Input';
  11. newdiv.setAttribute('id',divIdName);
  12.  
  13. <!--- Adds Extra fields for Model No, Product Type, and Type of Hardware Failure  --->
  14. newdiv.innerHTML =
  15. "<table class='zpExpandedTable' id='modeltable'>" +
  16. "<th class='sectiontitletick' colspan='7'>Serial Information "+ count +" </th>" +
  17. "<tr>" +
  18. "<td id='paddingformultitop'>Model No:&nbsp;&nbsp;&nbsp;&nbsp;</td>" +
  19. "</td>" +
  20. "<td>" +
  21.  "<select name='modelno_" + count + "' >" +
  22.  "<option value=''>Make A Selection</option>" +
  23. "<cfoutput query='models'>" + 
  24. "<option value='#model#'>#model#</option>" + 
  25. "</cfoutput>" + 
  26.  "</select>" +
  27.  "</td>" +
  28.  "<td>" +
  29. "&nbsp;&nbsp;&nbsp;&nbsp;Product Type:"  +
  30. "</td>" +
  31. "<td>" +
  32. "<select name='producttype_" + count + "'>" +
  33. "<option value='' selected>No Choice</option>" +
  34. "<cfoutput query='getProdType'>" + 
  35. "<option value='#pk_productType#'>#pk_productType#</option>" + 
  36. "</cfoutput>" + 
  37. "</select>" +
  38. "</td>" +
  39. "<td class='red'>" +
  40. "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type Of Hardware Failure*:" +
  41. "</td>" +
  42. "<td>" +
  43. "<select name='hardwarefailure_" + count + "'>" +
  44. "<option value='' selected>Make A Selection</option>" +
  45. "<cfoutput query='getHardwareFail'>" +
  46. "<option value='#pk_hardwareFailure#'>#pk_hardwareFailure#</option>" +
  47. "</cfoutput>" +
  48. "</select>" +
  49. "</td>" +
  50. "</tr>" +
  51. "<table>";
  52.  
  53. <!--- Adds Extra fields for Serial Number and Software/Hardware  --->
  54. newdiv.innerHTML = newdiv.innerHTML +
  55. "<table class='zpExpandedTable' id='modeltable'>" +
  56. "<tr>" +
  57. "<td id='paddingformultitop'>" +
  58. "Serial Number:&nbsp;&nbsp;" +
  59. "<input type='text' name='serialnum_" + count + "'>" +
  60. "&nbsp;&nbsp;&nbsp;&nbsp;Software/Hardware:&nbsp;&nbsp;" +
  61. "<select name='softhardware_" + count + "'>" +
  62. "<option value='' selected>No Choice</option>" +
  63. "<cfoutput query='getSoftHard'>" + 
  64. "<option value='#pk_softwareHardware#'>#pk_softwareHardware#</option>" + 
  65. "</cfoutput>" + 
  66. "</select>" +
  67. "</td>" +
  68. "</tr>" +
  69. "</table>";
  70.  
  71. <!--- Adds Extra fields for Description  --->
  72. newdiv.innerHTML = newdiv.innerHTML + 
  73. "<table class='zpExpandedTable' id='resoltable' cellpadding='3' cellspacing='0'>" +
  74. "<tr>" +
  75. "<td id='paddingformutli'>" +
  76. "Description:&nbsp;&nbsp;" + 
  77. "</td>" +
  78. "<td class='descriptionmoveinmulti'>" +
  79. "( You may enter up to 1000 characters. )"+
  80. "<br>" +
  81. "<textarea maxlength='1000' onkeyup='return descriptionmaxlength(this)' onkeydown='return descriptionmaxlength(this)'rows='4' cols='60' name='thedescription_" + count + "'></textarea>" +
  82. "</td>" +
  83. "</tr>" +
  84. "</table>";
  85.  
  86. <!--- Adds Extra fields for Resolution  --->
  87. newdiv.innerHTML = newdiv.innerHTML +
  88. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  89. "<tr>" +
  90. "<td id='paddingformutli'>" +
  91. "Resolution:&nbsp;&nbsp;" +
  92. "</td>" +
  93. "<td class='resolutionmoveinmulti'>" +
  94. "( You may enter up to 1500 characters. )"+
  95. "<br>" +
  96. "<textarea maxlength='1500' onkeyup='return resolutionmaxlength(this)' onkeydown='return resolutionmaxlength(this)' rows='4' cols='60' name='resolution_" + count + "'></textarea>" +
  97. "</td>" +
  98. "</tr>" +
  99. "</table>";
  100.  
  101. <!--- Adds Extra fields for Resolution Date, Current Date (for resolution date) and resolution vertified as effective by  --->
  102. newdiv.innerHTML = newdiv.innerHTML +
  103. "<table class='zpExpandedTable' id='resoldatetab' cellpadding='1' cellspacing='0'>" +
  104. "<tr>" +
  105. "<td id='paddingformultitop'>" +
  106. "Resolution Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  107. "</td>" +
  108. "<td>" +
  109. "<input type='text' name='resdate_" + count + "' value=''  >&nbsp;&nbsp;" +
  110.  
  111. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  112. "<input type='checkbox' name='currentdateresol_" + count + "' onClick=resdate_" + count + ".value=fill_date()>" +
  113. "</td>" +
  114. "<td>" +
  115. "Resolution Verified as effective by:&nbsp;&nbsp;"  +
  116. "</td>" +
  117. "<td>" +
  118. "<select name='resvertified_" + count + "'>" +
  119. "<option value='' selected>Make A Selection</option>" +
  120. "<cfoutput query='gettech'><option value='#fname# #lname#'>#fname# #lname#</option></cfoutput>" +
  121. "</select>" +
  122. "</td>" +
  123. "</tr>" +
  124. "</table>";
  125.  
  126. <!--- Adds Extra fields for Vertification Date, Current Date (for vertification date) and resolution vertified as effective by  --->
  127. newdiv.innerHTML = newdiv.innerHTML +
  128. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  129. "<tr>" +
  130. "<td id='paddingformultitop'>" +
  131. "Verification Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  132. "</td>" +
  133. "<td class='vertificationmoveinmulti'>" +
  134. "<input type='text' name='vertifidate_" + count + "'>&nbsp;&nbsp;" +
  135. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  136. "<input type='checkbox' name='currentdatevert_" + count + "' onClick=vertifidate_" + count + ".value=fill_date()>" +
  137. "</td>" +
  138. "</tr>" +
  139. "</table>";
  140.  
  141. <!--- Adds Extra fields for Dept/Vendor Responsibility  --->
  142. newdiv.innerHTML = newdiv.innerHTML +
  143. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  144. "<tr>" +
  145. "<td class='red' id='paddingformultitop'>" +
  146. "Dept/Vendor Responsibility*:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  +
  147. "<select name='deptvendor_" + count + "'>" +
  148. "<option value='' selected>Make A Selection</option>" +
  149. "<cfoutput query='getDeptVendor'>" +
  150. "<option value='#pk_deptVendor#'>#pk_deptVendor#</option>" +
  151. " </cfoutput>" +
  152. "</select>" +
  153. "</td>" +
  154. "</tr>" +
  155. "</table>";
  156.  
  157. <!--- Adds Extra fields for RMA Data Only  --->
  158. newdiv.innerHTML = newdiv.innerHTML +
  159. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  160. "<tr>" +
  161. "<td id='paddingformultitop'>" +
  162. "RMA Data Only:&nbsp;&nbsp;&nbsp;&nbsp;" +
  163. "</td>" +
  164. "<td class='rmanmoveinmulti'>" +
  165. "( You may enter up to 1000 characters. )"+
  166. "<br/>" +
  167. "<textarea maxlength='1000' onkeyup='return rmamaxlength(this)' onkeydown='return rmamaxlength(this)' rows='4' cols='60' name='rma_" + count + "'></textarea> " +
  168. "</td>" +
  169. "</tr>" +
  170. "</table>" +
  171. "<input type='hidden' name='serialcount' value='" + count + "'>";
  172.  
  173. <!--- Adds Delete to every ticket  --->
  174. newdiv.innerHTML = newdiv.innerHTML +
  175. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  176. "<tr>" +
  177. "<td>" +
  178. "<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
  179. "</td>" +
  180. "</td>" +
  181. "</tr>" +
  182. "</table>";
  183.  
  184. document.getElementById(divName).appendChild(newdiv);
  185.  
  186. <!---Allows us to remove multiple fields --->
  187. function removeElement(divNum) {
  188.   var d = document.getElementById('dynamicInput');
  189.   var olddiv = document.getElementById(divNum);
  190.   d.removeChild(olddiv);
  191. }
  192. </script>
  193.  
  194.  
  195. <!---PARTS--->
  196. <script type="text/javascript">
  197. <!---Allows us to add multiple fields for parts --->
  198. function addpartInput(partName){
  199. var parts = document.getElementById('partsInput');
  200. var avalue = document.getElementById('aValue');
  201. var count = (document.getElementById('aValue').value -1)+ 2;
  202. avalue.value = count;
  203. var partdiv = document.createElement('div');
  204. var partIdName = 'parts'+count+'Input';
  205. partdiv.setAttribute('id',partIdName);
  206.  
  207. <!--- Adds Extra fields parts table  --->
  208. partdiv.innerHTML =
  209. "<table class='createticketables' id='spaceup'>" +
  210. "<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
  211. "<tr>" +
  212. "<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
  213. "<td class='red'>" +
  214. "Parts been returned* " +
  215. "<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
  216. "</td>" +
  217. "<td>" +
  218. "<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
  219. "</td>" +
  220. "</tr>" +
  221. "</table>" +
  222. "<table class='createticketables' >" +
  223. "<tr>" +
  224. "<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
  225. "<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
  226. "Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
  227. "<td>On Site:</td>" +
  228. "<td><select name='onsite_" + count +"'>" +
  229. "<option value='No Choice' selected>No Choice</option>" +
  230. "<option value='Yes'>Yes</option>" +
  231. "<option value='No'>No</option>" +
  232. "</select><td>" +
  233. "<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
  234. "<option value='' selected>No Choice</option>" +
  235. "<cfloop from='0' to='10' index='nonsite'><cfoutput>" +
  236. "<option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>" +
  237. "</select><td>" +
  238. "</tr>" +
  239. "</table>" +
  240. "<input type='hidden' name='serialcount' value='" + count + "'>";
  241.  
  242.  
  243. <!--- Adds Delete to every ticket  --->
  244. partdiv.innerHTML = partdiv.innerHTML +
  245. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  246. "<tr>" +
  247. "<td>" +
  248. "<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removetheElement(\'"+partIdName+"\')\"></a>" +
  249. "</td>" +
  250. "</td>" +
  251. "</tr>" +
  252. "</table>";
  253.  
  254. document.getElementById(partName).appendChild(partdiv);
  255.  
  256. <!---Allows us to remove multiple fields --->
  257. function removetheElement(divNum) {
  258.   var d = document.getElementById('partsInput');
  259.   var olddiv = document.getElementById(divNum);
  260.   d.removeChild(olddiv);
  261. }
  262.  
  263. </script>
  264.  
Thank you,
Rach
Oct 8 '08 #6

acoder
Expert Mod 15k+
P: 16,027
Remove the partInput div from the HTML and create the div dynamically using createElement (as you've done in addInput) in addpartInput.
Oct 8 '08 #7

100+
P: 769
Remove the partInput div from the HTML and create the div dynamically using createElement (as you've done in addInput) in addpartInput.
Hey Acoder,

I am confused on what you mean. Because thought i already did that using this for parts. are you saying i need to create a 3rd one?

Expand|Select|Wrap|Line Numbers
  1. function addpartInput(partName){
  2. var parts = document.getElementById('partsInput');
  3. var avalue = document.getElementById('aValue');
  4. var count = (document.getElementById('aValue').value -1)+ 2;
  5. avalue.value = count;
  6. var partdiv = document.createElement('div');
  7. var partIdName = 'parts'+count+'Input';
  8. partdiv.setAttribute('id',partIdName);
Thank you,
Rach
Oct 8 '08 #8

acoder
Expert Mod 15k+
P: 16,027
Actually, thinking about this again, it would make more sense for you to create a parts div in addInput when you create the serial. Give it a unique ID based on the serial div id. Then in addpartInput, get this div and add to it.
Oct 8 '08 #9

100+
P: 769
Actually, thinking about this again, it would make more sense for you to create a parts div in addInput when you create the serial. Give it a unique ID based on the serial div id. Then in addpartInput, get this div and add to it.
Hey Acoder,

i am still lost by what you mean.

here is what i tried in the serial function. i added the line var getparts
Expand|Select|Wrap|Line Numbers
  1. function addInput(divName){
  2. var dynamic = document.getElementById('dynamicInput');
  3. var thevalue = document.getElementById('theValue');
  4. var count = (document.getElementById('theValue').value -1)+ 2;
  5. thevalue.value = count;
  6. var newdiv = document.createElement('div');
  7. var getparts = document.createElement('div');
  8. var divIdName = 'dynamic'+count+'Input';
  9. newdiv.setAttribute('id',divIdName);
here is what i tried in the parts function trying to get the line get parts
Expand|Select|Wrap|Line Numbers
  1. function addpartInput(partName){
  2. var parts = document.getElementById('partsInput');
  3. var getparts = document.createElement('div');
  4. var avalue = document.getElementById('aValue');
  5. var count = (document.getElementById('aValue').value -1)+ 2;
  6. avalue.value = count;
  7. var partdiv = document.createElement('thediv');
  8. var partIdName = 'parts'+count+'Input';
  9. partdiv.setAttribute('id',partIdName);
Thank you,
Rach
Oct 8 '08 #10

acoder
Expert Mod 15k+
P: 16,027
To get a div, you use document.getElementById(id). If parts always appear after the serial information, then you don't even need a parts parent div, you can just append after the serial info. using appendChild on the serial div, dynamic1input, dynamic2input, etc.
Oct 8 '08 #11

100+
P: 769
To get a div, you use document.getElementById(id). If parts always appear after the serial information, then you don't even need a parts parent div, you can just append after the serial info. using appendChild on the serial div, dynamic1input, dynamic2input, etc.
Hey Acoder,

I am lost on not needing a parts parent div. It should appear after serial information. But the thing is it going to appear after multiple serials like so

serial information 1

parts 1
parts 2
parts 3

serial information 2
parts 1
parts 2
parts 3


an this is how you get the id correct?

parts function

Expand|Select|Wrap|Line Numbers
  1. function addpartInput(partName){
  2. var parts = document.getElementById('partsInput');
  3. var getparts = document.getElementById('div');
  4. var avalue = document.getElementById('aValue');
  5. var count = (document.getElementById('aValue').value -1)+ 2;
  6. avalue.value = count;
  7. var partdiv = document.createElement('thediv');
  8. var partIdName = 'parts'+count+'Input';
  9. partdiv.setAttribute('id',partIdName);
  10.  
Thank you,
Rach
Oct 8 '08 #12

acoder
Expert Mod 15k+
P: 16,027
Let me explain. You initially have:
Expand|Select|Wrap|Line Numbers
  1. <div id="dynamicInput">
  2. </div>
Now in addInput, you add a div with ID "dynamic1Input" containing the serial information. Let's say you create another serial, so you have two serials:
Expand|Select|Wrap|Line Numbers
  1. <div id="dynamicInput">
  2.   <div id="dynamic1Input">
  3.     <!-- serial info here -->
  4.   </div>
  5.   <div id="dynamic2Input">
  6.     <!-- serial info here -->
  7.   </div>
  8. </div>
If you just append the parts for serial 1 to dynamic1Input using appendChild(), it will appear below serial 1, but before serial 2, and if you delete serial 1, all the corresponding parts will automatically be deleted.
Oct 8 '08 #13

100+
P: 769
Hey Acoder,

Ok i got what your saying an thats working how you described it. But i got a bigger challenge to this. Is there anyway that if i have 3 multiple serials open. That i could make it where no matter if 3 serials are open or not that instead of adding it to the last serial that i choose to add that i could add a button within each serial and click add parts an it adds the part underneath that serial

heres an example


serial information 1
(add parts) if click add will add the parts under here

serial information 2
(add parts) if click add will add the parts under here

serial information 3
(add parts) if click add will add the parts under here

but here is html
Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" value="0" id="theValue" />
  2. <input type="hidden" value="0" id="aValue" />
  3.      <div id="dynamicInput">
  4.  
  5.      </div>
  6. <!---      All Ticket Information Appears Here--->
  7.  
  8.       <input type="button" class="addticket" value="Add Parts" onClick="addpartInput('dynamicInput');" >
  9.      <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
  10.  
heres the javascript for serial

Expand|Select|Wrap|Line Numbers
  1. <!---Allows us to add serial information multiple times --->
  2. <script type="text/javascript">
  3. <!---Allows us to add multiple fields --->
  4. function addInput(divName){
  5. var dynamic = document.getElementById('dynamicInput');
  6. var thevalue = document.getElementById('theValue');
  7. var count = (document.getElementById('theValue').value -1)+ 2;
  8. thevalue.value = count;
  9. var newdiv = document.createElement('div');
  10. var getparts = document.createElement('div');
  11. var divIdName = 'dynamic'+count+'Input';
  12. newdiv.setAttribute('id',divIdName);
  13.  
  14. <!--- Adds Extra fields for Model No, Product Type, and Type of Hardware Failure  --->
  15. newdiv.innerHTML =
  16. "<table class='zpExpandedTable' id='modeltable'>" +
  17. "<th class='sectiontitletick' colspan='7'>Serial Information "+ count +" </th>" +
  18. "<tr>" +
  19. "<td id='paddingformultitop'>Model No:&nbsp;&nbsp;&nbsp;&nbsp;</td>" +
  20. "</td>" +
  21. "<td>" +
  22.  "<select name='modelno_" + count + "' >" +
  23.  "<option value=''>Make A Selection</option>" +
  24. "<cfoutput query='models'>" + 
  25. "<option value='#model#'>#model#</option>" + 
  26. "</cfoutput>" + 
  27.  "</select>" +
  28.  "</td>" +
  29.  "<td>" +
  30. "&nbsp;&nbsp;&nbsp;&nbsp;Product Type:"  +
  31. "</td>" +
  32. "<td>" +
  33. "<select name='producttype_" + count + "'>" +
  34. "<option value='' selected>No Choice</option>" +
  35. "<cfoutput query='getProdType'>" + 
  36. "<option value='#pk_productType#'>#pk_productType#</option>" + 
  37. "</cfoutput>" + 
  38. "</select>" +
  39. "</td>" +
  40. "<td class='red'>" +
  41. "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type Of Hardware Failure*:" +
  42. "</td>" +
  43. "<td>" +
  44. "<select name='hardwarefailure_" + count + "'>" +
  45. "<option value='' selected>Make A Selection</option>" +
  46. "<cfoutput query='getHardwareFail'>" +
  47. "<option value='#pk_hardwareFailure#'>#pk_hardwareFailure#</option>" +
  48. "</cfoutput>" +
  49. "</select>" +
  50. "</td>" +
  51. "</tr>" +
  52. "<table>";
  53.  
  54. <!--- Adds Extra fields for Serial Number and Software/Hardware  --->
  55. newdiv.innerHTML = newdiv.innerHTML +
  56. "<table class='zpExpandedTable' id='modeltable'>" +
  57. "<tr>" +
  58. "<td id='paddingformultitop'>" +
  59. "Serial Number:&nbsp;&nbsp;" +
  60. "<input type='text' name='serialnum_" + count + "'>" +
  61. "&nbsp;&nbsp;&nbsp;&nbsp;Software/Hardware:&nbsp;&nbsp;" +
  62. "<select name='softhardware_" + count + "'>" +
  63. "<option value='' selected>No Choice</option>" +
  64. "<cfoutput query='getSoftHard'>" + 
  65. "<option value='#pk_softwareHardware#'>#pk_softwareHardware#</option>" + 
  66. "</cfoutput>" + 
  67. "</select>" +
  68. "</td>" +
  69. "</tr>" +
  70. "</table>";
  71.  
  72. <!--- Adds Extra fields for Description  --->
  73. newdiv.innerHTML = newdiv.innerHTML + 
  74. "<table class='zpExpandedTable' id='resoltable' cellpadding='3' cellspacing='0'>" +
  75. "<tr>" +
  76. "<td id='paddingformutli'>" +
  77. "Description:&nbsp;&nbsp;" + 
  78. "</td>" +
  79. "<td class='descriptionmoveinmulti'>" +
  80. "( You may enter up to 1000 characters. )"+
  81. "<br>" +
  82. "<textarea maxlength='1000' onkeyup='return descriptionmaxlength(this)' onkeydown='return descriptionmaxlength(this)'rows='4' cols='60' name='thedescription_" + count + "'></textarea>" +
  83. "</td>" +
  84. "</tr>" +
  85. "</table>";
  86.  
  87. <!--- Adds Extra fields for Resolution  --->
  88. newdiv.innerHTML = newdiv.innerHTML +
  89. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  90. "<tr>" +
  91. "<td id='paddingformutli'>" +
  92. "Resolution:&nbsp;&nbsp;" +
  93. "</td>" +
  94. "<td class='resolutionmoveinmulti'>" +
  95. "( You may enter up to 1500 characters. )"+
  96. "<br>" +
  97. "<textarea maxlength='1500' onkeyup='return resolutionmaxlength(this)' onkeydown='return resolutionmaxlength(this)' rows='4' cols='60' name='resolution_" + count + "'></textarea>" +
  98. "</td>" +
  99. "</tr>" +
  100. "</table>";
  101.  
  102. <!--- Adds Extra fields for Resolution Date, Current Date (for resolution date) and resolution vertified as effective by  --->
  103. newdiv.innerHTML = newdiv.innerHTML +
  104. "<table class='zpExpandedTable' id='resoldatetab' cellpadding='1' cellspacing='0'>" +
  105. "<tr>" +
  106. "<td id='paddingformultitop'>" +
  107. "Resolution Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  108. "</td>" +
  109. "<td>" +
  110. "<input type='text' name='resdate_" + count + "' value=''  >&nbsp;&nbsp;" +
  111.  
  112. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  113. "<input type='checkbox' name='currentdateresol_" + count + "' onClick=resdate_" + count + ".value=fill_date()>" +
  114. "</td>" +
  115. "<td>" +
  116. "Resolution Verified as effective by:&nbsp;&nbsp;"  +
  117. "</td>" +
  118. "<td>" +
  119. "<select name='resvertified_" + count + "'>" +
  120. "<option value='' selected>Make A Selection</option>" +
  121. "<cfoutput query='gettech'><option value='#fname# #lname#'>#fname# #lname#</option></cfoutput>" +
  122. "</select>" +
  123. "</td>" +
  124. "</tr>" +
  125. "</table>";
  126.  
  127. <!--- Adds Extra fields for Vertification Date, Current Date (for vertification date) and resolution vertified as effective by  --->
  128. newdiv.innerHTML = newdiv.innerHTML +
  129. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  130. "<tr>" +
  131. "<td id='paddingformultitop'>" +
  132. "Verification Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  133. "</td>" +
  134. "<td class='vertificationmoveinmulti'>" +
  135. "<input type='text' name='vertifidate_" + count + "'>&nbsp;&nbsp;" +
  136. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  137. "<input type='checkbox' name='currentdatevert_" + count + "' onClick=vertifidate_" + count + ".value=fill_date()>" +
  138. "</td>" +
  139. "</tr>" +
  140. "</table>";
  141.  
  142. <!--- Adds Extra fields for Dept/Vendor Responsibility  --->
  143. newdiv.innerHTML = newdiv.innerHTML +
  144. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  145. "<tr>" +
  146. "<td class='red' id='paddingformultitop'>" +
  147. "Dept/Vendor Responsibility*:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  +
  148. "<select name='deptvendor_" + count + "'>" +
  149. "<option value='' selected>Make A Selection</option>" +
  150. "<cfoutput query='getDeptVendor'>" +
  151. "<option value='#pk_deptVendor#'>#pk_deptVendor#</option>" +
  152. " </cfoutput>" +
  153. "</select>" +
  154. "</td>" +
  155. "</tr>" +
  156. "</table>";
  157.  
  158. <!--- Adds Extra fields for RMA Data Only  --->
  159. newdiv.innerHTML = newdiv.innerHTML +
  160. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  161. "<tr>" +
  162. "<td id='paddingformultitop'>" +
  163. "RMA Data Only:&nbsp;&nbsp;&nbsp;&nbsp;" +
  164. "</td>" +
  165. "<td class='rmanmoveinmulti'>" +
  166. "( You may enter up to 1000 characters. )"+
  167. "<br/>" +
  168. "<textarea maxlength='1000' onkeyup='return rmamaxlength(this)' onkeydown='return rmamaxlength(this)' rows='4' cols='60' name='rma_" + count + "'></textarea> " +
  169. "</td>" +
  170. "</tr>" +
  171. "</table>" +
  172. "<input type='hidden' name='serialcount' value='" + count + "'>";
  173.  
  174. <!--- Adds Delete to every ticket  --->
  175. newdiv.innerHTML = newdiv.innerHTML +
  176. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  177. "<tr>" +
  178. "<td>" +
  179. "<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
  180. "</td>" +
  181. "</td>" +
  182. "</tr>" +
  183. "</table>";
  184.  
  185. document.getElementById(divName).appendChild(newdiv);
  186.  
  187. <!---Allows us to remove multiple fields --->
  188. function removeElement(divNum) {
  189.   var d = document.getElementById('dynamicInput');
  190.   var olddiv = document.getElementById(divNum);
  191.   d.removeChild(olddiv);
  192. }
  193. </script>
javascript for parts
Expand|Select|Wrap|Line Numbers
  1. <!---PARTS--->
  2. <script type="text/javascript">
  3. <!---Adds multiple fields for parts --->
  4. function addpartInput(partName){
  5. var parts = document.getElementById('dynamicInput');
  6. var getparts = document.getElementById('div');
  7. var avalue = document.getElementById('aValue');
  8. var count = (document.getElementById('aValue').value -1)+ 2;
  9. avalue.value = count;
  10. var partdiv = document.createElement('thediv');
  11. var partIdName = 'dynamic'+count+'Input';
  12. partdiv.setAttribute('id',partIdName);
  13.  
  14. <!--- Adds Extra fields for parts table  --->
  15. partdiv.innerHTML =
  16. "<table class='createticketables' id='spaceup'>" +
  17. "<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
  18. "<tr>" +
  19. "<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
  20. "<td class='red'>" +
  21. "Parts been returned* " +
  22. "<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
  23. "</td>" +
  24. "<td>" +
  25. "<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
  26. "</td>" +
  27. "</tr>" +
  28. "</table>" +
  29. "<table class='createticketables' >" +
  30. "<tr>" +
  31. "<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
  32. "<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
  33. "Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
  34. "<td>On Site:</td>" +
  35. "<td><select name='onsite_" + count +"'>" +
  36. "<option value='No Choice' selected>No Choice</option>" +
  37. "<option value='Yes'>Yes</option>" +
  38. "<option value='No'>No</option>" +
  39. "</select><td>" +
  40. "<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
  41. "<option value='' selected>No Choice</option>" +
  42. "<cfloop from='0' to='10' index='nonsite'><cfoutput>" +
  43. "<option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>" +
  44. "</select><td>" +
  45. "</tr>" +
  46. "</table>" +
  47. "<input type='hidden' name='serialcount' value='" + count + "'>";
  48.  
  49.  
  50. <!--- Adds Delete to every ticket  --->
  51. partdiv.innerHTML = partdiv.innerHTML +
  52. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  53. "<tr>" +
  54. "<td>" +
  55. "<input type='button' class='removeticket' value='Remove Parts &quot;"+count +"&quot;' onclick=\"removetheElement(\'"+partIdName+"\')\"></a>" +
  56. "</td>" +
  57. "</td>" +
  58. "</tr>" +
  59. "</table>";
  60.  
  61. document.getElementById(partName).appendChild(partdiv);
  62.  
  63. <!---Allows us to remove multiple fields --->
  64. function removetheElement(divNum) {
  65.   var d = document.getElementById('partsInput');
  66.   var olddiv = document.getElementById(divNum);
  67.   d.removeChild(olddiv);
  68. }
  69.  
  70. </script>

Thank you,
Rach
Oct 8 '08 #14

acoder
Expert Mod 15k+
P: 16,027
Yes, that's what I had in mind anyway. What you need to do is to create a button inside each serial div in addInput(). This would appear at the end of each serial information display. Just copy and modify the code that creates buttons.

You need to append to each serial div, not the main "dynamicInput" div, so the ID passed to addpartInput() needs to be "dynamic1Input", "dynamic2Input", etc. but that shouldn't be a problem because the button is created inside addInput which has the variable you need - divIdName.
Oct 9 '08 #15

100+
P: 769
Yes, that's what I had in mind anyway. What you need to do is to create a button inside each serial div in addInput(). This would appear at the end of each serial information display. Just copy and modify the code that creates buttons.

You need to append to each serial div, not the main "dynamicInput" div, so the ID passed to addpartInput() needs to be "dynamic1Input", "dynamic2Input", etc. but that shouldn't be a problem because the button is created inside addInput which has the variable you need - divIdName.

Hey Acoder,

I thought i fully understood but i somehow got lost in the process. When i moved the button from being under the <div id="dynamicInput"></div>. the button now does not want to work. I put it under the delete button in the serial function. Not sure what i did wrong.

Expand|Select|Wrap|Line Numbers
  1. <!--- Adds Delete to every ticket  --->
  2. newdiv.innerHTML = newdiv.innerHTML +
  3. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  4. "<tr>" +
  5. "<td>" +
  6. "<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
  7. "</td>" +
  8. "<td>" + 
  9. "<input type='button' class='addticket' value='Add Parts'
  10. onClick='addpartInput('dynamicInput');' >" +
  11. "</td>" +
  12. "</tr>" +
  13. "</table>";
an then on the append here is what i have for the serial append

Expand|Select|Wrap|Line Numbers
  1. document.getElementById(divName).appendChild(newdiv);
and here is what i have for the parts append

Expand|Select|Wrap|Line Numbers
  1. document.getElementById(partName).appendChild(partdiv);
are you saying to change the getElementById in the parts append to the one in the serial append?

Thank you,
Rach
Oct 9 '08 #16

acoder
Expert Mod 15k+
P: 16,027
See how you've added the button for "remove serial" on line 6 just above the parts button. Use something similar otherwise the code you currently have will result in errors from unescaped quotes.
Oct 9 '08 #17

100+
P: 769
See how you've added the button for "remove serial" on line 6 just above the parts button. Use something similar otherwise the code you currently have will result in errors from unescaped quotes.
Hey Acoder,

This is what i did but do i need to change the dynamicInput to something else?

Expand|Select|Wrap|Line Numbers
  1. "<input type='button' class='addticket' value='Add Parts'
  2. onClick=\"addpartInput(\'"+dynamicInput+"\')\" >" +
right now for that line i am getting undetermined string literall
an its having a fit about addInput saying its not defined.

Thank you,
Rach
Oct 9 '08 #18

acoder
Expert Mod 15k+
P: 16,027
Yes, dynamicInput should be divIdName - the ID of the serial div.
Oct 9 '08 #19

100+
P: 769
Yes, dynamicInput should be divIdName - the ID of the serial div.
Hey Acoder,

I am still getting undetermined string literal. but i got no clue whats causeing it.

Expand|Select|Wrap|Line Numbers
  1. newdiv.innerHTML = newdiv.innerHTML +
  2. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  3. "<tr>" +
  4. "<td>" +
  5. "<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
  6. "</td>" +
  7. "<td>" + 
  8. "<input type='button' class='addticket' value='Add Parts &quot;"+count +"&quot;'
  9. onClick=\"addpartInput(\'"+divIdName+"\')\">" +
  10. "</td>" +
  11. "</tr>" +
  12. "</table>";
Thank you,
Rach
Oct 9 '08 #20

acoder
Expert Mod 15k+
P: 16,027
Lines 8 and 9 should be one line.

PS. You don't need the extra escape characters (backslash) for the single quote.
Oct 9 '08 #21

100+
P: 769
Lines 8 and 9 should be one line.

PS. You don't need the extra escape characters (backslash) for the single quote.
Hey Acoder,

I couldn't get it all on one line but somehow i got it to work so i don't know what i did. But now its just not adding the parts right.

If i add parts under the first serial it does this

serial information 1
parts 2
parts 1

and if i add another serial an another part it does this

serial information 1
parts 2
parts 3
parts 2
serial information 2

and i cant remove any parts that are added right now what do i need to change
to var d = documnt.getElementById('partsInput'); to?

here is what i have for serial function

Expand|Select|Wrap|Line Numbers
  1. <!---Allows us to add serial information multiple times --->
  2. <script type="text/javascript">
  3. <!---Allows us to add multiple fields --->
  4. function addInput(divName){
  5. var dynamic = document.getElementById('dynamicInput');
  6. var thevalue = document.getElementById('theValue');
  7. var count = (document.getElementById('theValue').value -1)+ 2;
  8. thevalue.value = count;
  9. var newdiv = document.createElement('div');
  10. var getparts = document.createElement('div');
  11. var divIdName = 'dynamic'+count+'Input';
  12. newdiv.setAttribute('id',divIdName);
  13.  
  14. <!--- Adds Extra fields for Model No, Product Type, and Type of Hardware Failure  --->
  15. newdiv.innerHTML =
  16. "<table class='zpExpandedTable' id='modeltable'>" +
  17. "<th class='sectiontitletick' colspan='7'>Serial Information "+ count +" </th>" +
  18. "<tr>" +
  19. "<td id='paddingformultitop'>Model No:&nbsp;&nbsp;&nbsp;&nbsp;</td>" +
  20. "</td>" +
  21. "<td>" +
  22.  "<select name='modelno_" + count + "' >" +
  23.  "<option value=''>Make A Selection</option>" +
  24. "<cfoutput query='models'>" + 
  25. "<option value='#model#'>#model#</option>" + 
  26. "</cfoutput>" + 
  27.  "</select>" +
  28.  "</td>" +
  29.  "<td>" +
  30. "&nbsp;&nbsp;&nbsp;&nbsp;Product Type:"  +
  31. "</td>" +
  32. "<td>" +
  33. "<select name='producttype_" + count + "'>" +
  34. "<option value='' selected>No Choice</option>" +
  35. "<cfoutput query='getProdType'>" + 
  36. "<option value='#pk_productType#'>#pk_productType#</option>" + 
  37. "</cfoutput>" + 
  38. "</select>" +
  39. "</td>" +
  40. "<td class='red'>" +
  41. "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type Of Hardware Failure*:" +
  42. "</td>" +
  43. "<td>" +
  44. "<select name='hardwarefailure_" + count + "'>" +
  45. "<option value='' selected>Make A Selection</option>" +
  46. "<cfoutput query='getHardwareFail'>" +
  47. "<option value='#pk_hardwareFailure#'>#pk_hardwareFailure#</option>" +
  48. "</cfoutput>" +
  49. "</select>" +
  50. "</td>" +
  51. "</tr>" +
  52. "<table>";
  53.  
  54. <!--- Adds Extra fields for Serial Number and Software/Hardware  --->
  55. newdiv.innerHTML = newdiv.innerHTML +
  56. "<table class='zpExpandedTable' id='modeltable'>" +
  57. "<tr>" +
  58. "<td id='paddingformultitop'>" +
  59. "Serial Number:&nbsp;&nbsp;" +
  60. "<input type='text' name='serialnum_" + count + "'>" +
  61. "&nbsp;&nbsp;&nbsp;&nbsp;Software/Hardware:&nbsp;&nbsp;" +
  62. "<select name='softhardware_" + count + "'>" +
  63. "<option value='' selected>No Choice</option>" +
  64. "<cfoutput query='getSoftHard'>" + 
  65. "<option value='#pk_softwareHardware#'>#pk_softwareHardware#</option>" + 
  66. "</cfoutput>" + 
  67. "</select>" +
  68. "</td>" +
  69. "</tr>" +
  70. "</table>";
  71.  
  72. <!--- Adds Extra fields for Description  --->
  73. newdiv.innerHTML = newdiv.innerHTML + 
  74. "<table class='zpExpandedTable' id='resoltable' cellpadding='3' cellspacing='0'>" +
  75. "<tr>" +
  76. "<td id='paddingformutli'>" +
  77. "Description:&nbsp;&nbsp;" + 
  78. "</td>" +
  79. "<td class='descriptionmoveinmulti'>" +
  80. "( You may enter up to 1000 characters. )"+
  81. "<br>" +
  82. "<textarea maxlength='1000' onkeyup='return descriptionmaxlength(this)' onkeydown='return descriptionmaxlength(this)'rows='4' cols='60' name='thedescription_" + count + "'></textarea>" +
  83. "</td>" +
  84. "</tr>" +
  85. "</table>";
  86.  
  87. <!--- Adds Extra fields for Resolution  --->
  88. newdiv.innerHTML = newdiv.innerHTML +
  89. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  90. "<tr>" +
  91. "<td id='paddingformutli'>" +
  92. "Resolution:&nbsp;&nbsp;" +
  93. "</td>" +
  94. "<td class='resolutionmoveinmulti'>" +
  95. "( You may enter up to 1500 characters. )"+
  96. "<br>" +
  97. "<textarea maxlength='1500' onkeyup='return resolutionmaxlength(this)' onkeydown='return resolutionmaxlength(this)' rows='4' cols='60' name='resolution_" + count + "'></textarea>" +
  98. "</td>" +
  99. "</tr>" +
  100. "</table>";
  101.  
  102. <!--- Adds Extra fields for Resolution Date, Current Date (for resolution date) and resolution vertified as effective by  --->
  103. newdiv.innerHTML = newdiv.innerHTML +
  104. "<table class='zpExpandedTable' id='resoldatetab' cellpadding='1' cellspacing='0'>" +
  105. "<tr>" +
  106. "<td id='paddingformultitop'>" +
  107. "Resolution Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  108. "</td>" +
  109. "<td>" +
  110. "<input type='text' name='resdate_" + count + "' value=''  >&nbsp;&nbsp;" +
  111.  
  112. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  113. "<input type='checkbox' name='currentdateresol_" + count + "' onClick=resdate_" + count + ".value=fill_date()>" +
  114. "</td>" +
  115. "<td>" +
  116. "Resolution Verified as effective by:&nbsp;&nbsp;"  +
  117. "</td>" +
  118. "<td>" +
  119. "<select name='resvertified_" + count + "'>" +
  120. "<option value='' selected>Make A Selection</option>" +
  121. "<cfoutput query='gettech'><option value='#fname# #lname#'>#fname# #lname#</option></cfoutput>" +
  122. "</select>" +
  123. "</td>" +
  124. "</tr>" +
  125. "</table>";
  126.  
  127. <!--- Adds Extra fields for Vertification Date, Current Date (for vertification date) and resolution vertified as effective by  --->
  128. newdiv.innerHTML = newdiv.innerHTML +
  129. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  130. "<tr>" +
  131. "<td id='paddingformultitop'>" +
  132. "Verification Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  133. "</td>" +
  134. "<td class='vertificationmoveinmulti'>" +
  135. "<input type='text' name='vertifidate_" + count + "'>&nbsp;&nbsp;" +
  136. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  137. "<input type='checkbox' name='currentdatevert_" + count + "' onClick=vertifidate_" + count + ".value=fill_date()>" +
  138. "</td>" +
  139. "</tr>" +
  140. "</table>";
  141.  
  142. <!--- Adds Extra fields for Dept/Vendor Responsibility  --->
  143. newdiv.innerHTML = newdiv.innerHTML +
  144. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  145. "<tr>" +
  146. "<td class='red' id='paddingformultitop'>" +
  147. "Dept/Vendor Responsibility*:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  +
  148. "<select name='deptvendor_" + count + "'>" +
  149. "<option value='' selected>Make A Selection</option>" +
  150. "<cfoutput query='getDeptVendor'>" +
  151. "<option value='#pk_deptVendor#'>#pk_deptVendor#</option>" +
  152. " </cfoutput>" +
  153. "</select>" +
  154. "</td>" +
  155. "</tr>" +
  156. "</table>";
  157.  
  158. <!--- Adds Extra fields for RMA Data Only  --->
  159. newdiv.innerHTML = newdiv.innerHTML +
  160. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  161. "<tr>" +
  162. "<td id='paddingformultitop'>" +
  163. "RMA Data Only:&nbsp;&nbsp;&nbsp;&nbsp;" +
  164. "</td>" +
  165. "<td class='rmanmoveinmulti'>" +
  166. "( You may enter up to 1000 characters. )"+
  167. "<br/>" +
  168. "<textarea maxlength='1000' onkeyup='return rmamaxlength(this)' onkeydown='return rmamaxlength(this)' rows='4' cols='60' name='rma_" + count + "'></textarea> " +
  169. "</td>" +
  170. "</tr>" +
  171. "</table>" +
  172. "<input type='hidden' name='serialcount' value='" + count + "'>";
  173.  
  174. <!--- Adds Delete to every ticket  --->
  175. newdiv.innerHTML = newdiv.innerHTML +
  176. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  177. "<tr>" +
  178. "<td>" +
  179. "<input type='button' class='removeticket' value='Remove Serial &quot;"+ count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
  180. "</td>" +
  181. "</tr>" +
  182. "<tr>" +
  183. "<td>" + 
  184. "<input type='button' class='addticket' value='Add Parts' onclick=\"addpartInput(\'"+divIdName+"\')\">" +
  185. "</td>" +
  186. "</tr>" +
  187. "</table>";
  188.  
  189. document.getElementById(divName).appendChild(newdiv);
  190.  
  191. <!---Allows us to remove multiple fields --->
  192. function removeElement(divNum) {
  193.   var d = document.getElementById('dynamicInput');
  194.   var olddiv = document.getElementById(divNum);
  195.   d.removeChild(olddiv);
  196. }
  197. </script>
  198.  
an here is what i have for the parts function

Expand|Select|Wrap|Line Numbers
  1. <!---PARTS--->
  2. <script type="text/javascript">
  3. <!---Adds multiple fields for parts --->
  4. function addpartInput(partName){
  5. var parts = document.getElementById('dynamicInput');
  6. <!---('partsInput')--->
  7.  
  8. <!---this works if only want to add a part under the serial you are working with, but if you have
  9. serial information 1
  10. and serial information 2 an want to add information to serial information 1 you cant because parts always appear under the last serial information added if you click add parts--->
  11. var getparts = document.getElementById('div');
  12. var avalue = document.getElementById('aValue');
  13. var count = (document.getElementById('aValue').value -1)+ 2;
  14. avalue.value = count;
  15. var partdiv = document.createElement('thediv');
  16. var partIdName = 'dynamic'+count+'Input';
  17. <!---'parts'+count+'Input'--->
  18. partdiv.setAttribute('id',partIdName);
  19.  
  20. <!--- Adds Extra fields for parts table  --->
  21. partdiv.innerHTML =
  22. "<table class='createticketables' id='spaceup'>" +
  23. "<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
  24. "<tr>" +
  25. "<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
  26. "<td class='red'>" +
  27. "Parts been returned* " +
  28. "<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
  29. "</td>" +
  30. "<td>" +
  31. "<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
  32. "</td>" +
  33. "</tr>" +
  34. "</table>" +
  35. "<table class='createticketables' >" +
  36. "<tr>" +
  37. "<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
  38. "<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
  39. "Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
  40. "<td>On Site:</td>" +
  41. "<td><select name='onsite_" + count +"'>" +
  42. "<option value='No Choice' selected>No Choice</option>" +
  43. "<option value='Yes'>Yes</option>" +
  44. "<option value='No'>No</option>" +
  45. "</select><td>" +
  46. "<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
  47. "<option value='' selected>No Choice</option>" +
  48. "<cfloop from='0' to='10' index='nonsite'><cfoutput>" +
  49. "<option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>" +
  50. "</select><td>" +
  51. "</tr>" +
  52. "</table>" +
  53. "<input type='hidden' name='serialcount' value='" + count + "'>";
  54.  
  55.  
  56. <!--- Adds Delete to every ticket  --->
  57. partdiv.innerHTML = partdiv.innerHTML +
  58. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  59. "<tr>" +
  60. "<td>" +
  61. "<input type='button' class='removeticket' value='Remove Parts &quot;"+count +"&quot;' onclick=\"removetheElement(\'"+partIdName+"\')\"></a>" +
  62. "</td>" +
  63. "</td>" +
  64. "</tr>" +
  65. "</table>";
  66.  
  67. document.getElementById(partName).appendChild(partdiv);
  68.  
  69. <!---Allows us to remove multiple fields --->
  70. function removetheElement(divNum) {
  71.   var d = document.getElementById('partsInput');
  72.   var olddiv = document.getElementById(divNum);
  73.   d.removeChild(olddiv);
  74. }
  75.  
  76. </script>
an heres the html

Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" value="0" id="theValue" />
  2. <input type="hidden" value="0" id="aValue" />
  3.      <div id="dynamicInput">
  4.  
  5.      </div>
  6. <!---      All Ticket Information Appears Here--->
  7.      <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
Thank you,
Rach
Oct 9 '08 #22

acoder
Expert Mod 15k+
P: 16,027
In addpartInput(), set parts to partName, not dynamicInput.

Also don't set partIdName to "dynamic"+count+"Input". Set it to something unique. I would suggest using partName as part of that, so partName+count or partName+"part"+count seem like good choices.
Oct 9 '08 #23

100+
P: 769
In addpartInput(), set parts to partName, not dynamicInput.

Also don't set partIdName to "dynamic"+count+"Input". Set it to something unique. I would suggest using partName as part of that, so partName+count or partName+"part"+count seem like good choices.
Hey Acoder,

I still can not get it to remove. An with the parts. For the first serial it is counting wrong but for the second serial its counting right. Here is an example

serial information 1
parts 2
parts 1

serial information 2
parts 3
parts 4

here is what i have for the parts function

Expand|Select|Wrap|Line Numbers
  1. <!---PARTS--->
  2. <script type="text/javascript">
  3. <!---Adds multiple fields for parts --->
  4. function addpartInput(partName){
  5. var parts = document.getElementById('partName');
  6. <!---('partsInput')--->
  7.  
  8. <!---this works if only want to add a part under the serial you are working with, but if you have
  9. serial information 1
  10. and serial information 2 an want to add information to serial information 1 you cant because parts always appear under the last serial information added if you click add parts--->
  11. var getparts = document.getElementById('div');
  12. var avalue = document.getElementById('aValue');
  13. var count = (document.getElementById('aValue').value -1)+ 2;
  14. avalue.value = count;
  15. var partdiv = document.createElement('thediv');
  16. var partIdName = 'part'+count+'Name';
  17. <!---'parts'+count+'Input'--->
  18. partdiv.setAttribute('id',partIdName);
  19.  
  20. <!--- Adds Extra fields for parts table  --->
  21. partdiv.innerHTML =
  22. <!---what used originally for this tableclass='createticketables' id='spaceup'--->
  23. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0' >" +
  24. "<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
  25. "<tr>" +
  26. "<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
  27. "<td class='red'>" +
  28. "Parts been returned* " +
  29. "<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
  30. "</td>" +
  31. "<td>" +
  32. "<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
  33. "</td>" +
  34. "</tr>" +
  35. "</table>" +
  36. "<table table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'  >" +
  37. "<tr>" +
  38. "<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
  39. "<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
  40. "Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
  41. "<td>On Site:</td>" +
  42. "<td><select name='onsite_" + count +"'>" +
  43. "<option value='No Choice' selected>No Choice</option>" +
  44. "<option value='Yes'>Yes</option>" +
  45. "<option value='No'>No</option>" +
  46. "</select><td>" +
  47. "<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
  48. "<option value='' selected>No Choice</option>" +
  49. "<cfloop from='0' to='10' index='nonsite'><cfoutput>" +
  50. "<option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>" +
  51. "</select><td>" +
  52. "</tr>" +
  53. "</table>" +
  54. "<input type='hidden' name='serialcount' value='" + count + "'>";
  55.  
  56.  
  57. <!--- Adds Delete to every ticket  --->
  58. partdiv.innerHTML = partdiv.innerHTML +
  59. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  60. "<tr>" +
  61. "<td>" +
  62. "<input type='button' class='removeticket' value='Remove Parts &quot;"+count +"&quot;' onclick=\"removetheElement(\'"+partIdName+"\')\"></a>" +
  63. "</td>" +
  64. "</td>" +
  65. "</tr>" +
  66. "</table>";
  67.  
  68. document.getElementById(partName).appendChild(partdiv);
  69.  
  70. <!---Allows us to remove multiple fields --->
  71. function removetheElement(divNum) {
  72.   var d = document.getElementById('partsInput');
  73.   var olddiv = document.getElementById(divNum);
  74.   d.removeChild(olddiv);
  75. }
  76.  
  77. </script>
  78.  
Thank you,
Rach
Oct 9 '08 #24

acoder
Expert Mod 15k+
P: 16,027
partName is already a string and I don't think a div with ID "partName" exists, so you'd want something like:
Expand|Select|Wrap|Line Numbers
  1. var parts = document.getElementById(partName);
On line 15, the element should be a div:
Expand|Select|Wrap|Line Numbers
  1. var partdiv = document.createElement('div');
When removing, you should be removing from the parent div so you can either pass in partName, or removeChild from oldDiv.parentNode.
Oct 9 '08 #25

100+
P: 769
Hey Acoder,

i am still running into the same trouble. An i am confused what you mean about the removing.

here is what i have for the parts function

Expand|Select|Wrap|Line Numbers
  1. <!---PARTS--->
  2. <script type="text/javascript">
  3. <!---Adds multiple fields for parts --->
  4. function addpartInput(partName){
  5. var parts = document.getElementById(partName);
  6. <!---('partsInput')--->
  7.  
  8. <!---this works if only want to add a part under the serial you are working with, but if you have
  9. serial information 1
  10. and serial information 2 an want to add information to serial information 1 you cant because parts always appear under the last serial information added if you click add parts--->
  11. var getparts = document.getElementById('div');
  12. var avalue = document.getElementById('aValue');
  13. var count = (document.getElementById('aValue').value -1)+ 2;
  14. avalue.value = count;
  15. var partdiv = document.createElement('div');
  16. var partIdName = 'part'+count+'Name';
  17. <!---'parts'+count+'Input'--->
  18. partdiv.setAttribute('id',partIdName);
  19.  
  20. <!--- Adds Extra fields for parts table  --->
  21. partdiv.innerHTML =
  22. <!---what used originally for this tableclass='createticketables' id='spaceup'--->
  23. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0' >" +
  24. "<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
  25. "<tr>" +
  26. "<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
  27. "<td class='red'>" +
  28. "Parts been returned* " +
  29. "<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
  30. "</td>" +
  31. "<td>" +
  32. "<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
  33. "</td>" +
  34. "</tr>" +
  35. "</table>" +
  36. "<table table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'  >" +
  37. "<tr>" +
  38. "<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
  39. "<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
  40. "Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
  41. "<td>On Site:</td>" +
  42. "<td><select name='onsite_" + count +"'>" +
  43. "<option value='No Choice' selected>No Choice</option>" +
  44. "<option value='Yes'>Yes</option>" +
  45. "<option value='No'>No</option>" +
  46. "</select><td>" +
  47. "<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
  48. "<option value='' selected>No Choice</option>" +
  49. "<cfloop from='0' to='10' index='nonsite'><cfoutput>" +
  50. "<option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>" +
  51. "</select><td>" +
  52. "</tr>" +
  53. "</table>" +
  54. "<input type='hidden' name='serialcount' value='" + count + "'>";
  55.  
  56.  
  57. <!--- Adds Delete to every ticket  --->
  58. partdiv.innerHTML = partdiv.innerHTML +
  59. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  60. "<tr>" +
  61. "<td>" +
  62. "<input type='button' class='removeticket' value='Remove Parts &quot;"+count +"&quot;' onclick=\"removetheElement(\'"+partIdName+"\')\"></a>" +
  63. "</td>" +
  64. "</td>" +
  65. "</tr>" +
  66. "</table>";
  67.  
  68. document.getElementById(partName).appendChild(partdiv);
  69.  
  70. <!---Allows us to remove multiple fields --->
  71. function removetheElement(divNum) {
  72.   var d = document.getElementById('partsInput');
  73.   var olddiv = document.getElementById(divNum);
  74.   d.removeChild(olddiv);
  75. }
  76.  
  77. </script>
Thank you,
Rach
Oct 9 '08 #26

acoder
Expert Mod 15k+
P: 16,027
Instead of d.removeChild(), you could try something like:
Expand|Select|Wrap|Line Numbers
  1. olddiv.parentNode.removedChild(olddiv);
Oct 9 '08 #27

100+
P: 769
Instead of d.removeChild(), you could try something like:
Expand|Select|Wrap|Line Numbers
  1. olddiv.parentNode.removedChild(olddiv);
Hey Acoder,

Ok i got the remove working. but its still number wrong for example if i have this when the page loads

serial 1 information
parts 1

an then i go to add another part it does this

serial 1 information
parts 2
parts 1

any suggestions?

here is what i have for parts. everything else is the same
Expand|Select|Wrap|Line Numbers
  1. <!---PARTS--->
  2. <script type="text/javascript">
  3. <!---Adds multiple fields for parts --->
  4. function addpartInput(partName){
  5. var parts = document.getElementById(partName);
  6. <!---('partsInput')--->
  7.  
  8. <!---this works if only want to add a part under the serial you are working with, but if you have
  9. serial information 1
  10. and serial information 2 an want to add information to serial information 1 you cant because parts always appear under the last serial information added if you click add parts--->
  11. var getparts = document.getElementById('div');
  12. var avalue = document.getElementById('aValue');
  13. var count = (document.getElementById('aValue').value -1)+ 2;
  14. avalue.value = count;
  15. var partdiv = document.createElement('div');
  16. var partIdName = 'part'+count+'Name';
  17. <!---'parts'+count+'Input'--->
  18. partdiv.setAttribute('id',partIdName);
  19.  
  20. <!--- Adds Extra fields for parts table  --->
  21. partdiv.innerHTML =
  22. <!---what used originally for this tableclass='createticketables' id='spaceup'--->
  23. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0' >" +
  24. "<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
  25. "<tr>" +
  26. "<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
  27. "<td class='red'>" +
  28. "Parts been returned* " +
  29. "<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
  30. "</td>" +
  31. "<td>" +
  32. "<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
  33. "</td>" +
  34. "</tr>" +
  35. "</table>" +
  36. "<table table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'  >" +
  37. "<tr>" +
  38. "<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
  39. "<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
  40. "Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
  41. "<td>On Site:</td>" +
  42. "<td><select name='onsite_" + count +"'>" +
  43. "<option value='No Choice' selected>No Choice</option>" +
  44. "<option value='Yes'>Yes</option>" +
  45. "<option value='No'>No</option>" +
  46. "</select><td>" +
  47. "<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
  48. "<option value='' selected>No Choice</option>" +
  49. "<cfloop from='0' to='10' index='nonsite'><cfoutput>" +
  50. "<option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>" +
  51. "</select><td>" +
  52. "</tr>" +
  53. "</table>" +
  54. "<input type='hidden' name='serialcount' value='" + count + "'>";
  55.  
  56.  
  57. <!--- Adds Delete to every ticket  --->
  58. partdiv.innerHTML = partdiv.innerHTML +
  59. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  60. "<tr>" +
  61. "<td>" +
  62. "<input type='button' class='removeticket' value='Remove Parts &quot;"+count +"&quot;' onclick=\"removetheElement(\'"+partIdName+"\')\"></a>" +
  63. "</td>" +
  64. "</td>" +
  65. "</tr>" +
  66. "</table>";
  67.  
  68. document.getElementById(partName).appendChild(partdiv);
  69.  
  70. <!---Allows us to remove multiple fields --->
  71. function removetheElement(divNum) {
  72.   var d = document.getElementById('partsInput');
  73.   var olddiv = document.getElementById(divNum);
  74.  olddiv.parentNode.removeChild(olddiv);
  75. }
  76.  
  77. </script>
Thank you,
Rach
Oct 9 '08 #28

acoder
Expert Mod 15k+
P: 16,027
You say when you already have a part displayed when the page loads. Make sure it's inside the serial 1 div.
Oct 9 '08 #29

100+
P: 769
You say when you already have a part displayed when the page loads. Make sure it's inside the serial 1 div.
Hey Acoder,

Well reason it loads when the page loads is because of this.

Expand|Select|Wrap|Line Numbers
  1. <body onload="addInput('dynamicInput');addpartInput('dynamicInput');">
an i am not sure what you mean by already inside the serial 1 div are you meaning the main html div?

Thank you,
Rach
Oct 9 '08 #30

acoder
Expert Mod 15k+
P: 16,027
Change
Expand|Select|Wrap|Line Numbers
  1. addpartInput('dynamicInput');
to
Expand|Select|Wrap|Line Numbers
  1. addpartInput('dynamic1Input');
to insert inside the serial div.
Oct 9 '08 #31

100+
P: 769
Change
Expand|Select|Wrap|Line Numbers
  1. addpartInput('dynamicInput');
to
Expand|Select|Wrap|Line Numbers
  1. addpartInput('dynamic1Input');
to insert inside the serial div.
Hey Acoder,

I get the error that addpartInput is not defined. here is what it looks like now

Expand|Select|Wrap|Line Numbers
  1. <body onload="addInput('dynamicInput');addpartInput('dynamic1Input');">
Thank you,
Rach
Oct 9 '08 #32

acoder
Expert Mod 15k+
P: 16,027
Hmm. Anyway, I think that you should have this in the HTML directly rather than using JavaScript to create the initial ones. If you think this might be a problem because of redundancy, you could clone the divs.
Oct 9 '08 #33

100+
P: 769
Hey Acoder,

It was how you said to do it, not sure why it didn't work before but it worked. Do we still need to do this in the html directly? an if we don't is there anyway i could do something like this

serial information 1
parts 1 serial information 1
parts 2 serial information 1

serial information 2
parts 1 serial information 2
parts 2 serial information 2

Expand|Select|Wrap|Line Numbers
  1. i can imagine the user adding a lot of parts to serials an getting the parts and serials confused an if i could make it so it could see the serial information its attached with it could make it easier for the user.
  2.  
  3. Here is what i have for my serial function
  4.  
  5. <!---Allows us to add serial information multiple times --->
  6. <script type="text/javascript">
  7. <!---Allows us to add multiple fields --->
  8. function addInput(divName){
  9. var dynamic = document.getElementById('dynamicInput');
  10. var thevalue = document.getElementById('theValue');
  11. var count = (document.getElementById('theValue').value -1)+ 2;
  12. thevalue.value = count;
  13. var newdiv = document.createElement('div');
  14. var getparts = document.createElement('div');
  15. var divIdName = 'dynamic'+count+'Input';
  16. newdiv.setAttribute('id',divIdName);
  17.  
  18. <!--- Adds Extra fields for Model No, Product Type, and Type of Hardware Failure  --->
  19. newdiv.innerHTML =
  20. "<table class='zpExpandedTable' id='modeltable'>" +
  21. "<th class='sectiontitletick' colspan='7'>Serial Information "+ count +" </th>" +
  22. "<tr>" +
  23. "<td id='paddingformultitop'>Model No:&nbsp;&nbsp;&nbsp;&nbsp;</td>" +
  24. "</td>" +
  25. "<td>" +
  26.  "<select name='modelno_" + count + "' >" +
  27.  "<option value=''>Make A Selection</option>" +
  28. "<cfoutput query='models'>" + 
  29. "<option value='#model#'>#model#</option>" + 
  30. "</cfoutput>" + 
  31.  "</select>" +
  32.  "</td>" +
  33.  "<td>" +
  34. "&nbsp;&nbsp;&nbsp;&nbsp;Product Type:"  +
  35. "</td>" +
  36. "<td>" +
  37. "<select name='producttype_" + count + "'>" +
  38. "<option value='' selected>No Choice</option>" +
  39. "<cfoutput query='getProdType'>" + 
  40. "<option value='#pk_productType#'>#pk_productType#</option>" + 
  41. "</cfoutput>" + 
  42. "</select>" +
  43. "</td>" +
  44. "<td class='red'>" +
  45. "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type Of Hardware Failure*:" +
  46. "</td>" +
  47. "<td>" +
  48. "<select name='hardwarefailure_" + count + "'>" +
  49. "<option value='' selected>Make A Selection</option>" +
  50. "<cfoutput query='getHardwareFail'>" +
  51. "<option value='#pk_hardwareFailure#'>#pk_hardwareFailure#</option>" +
  52. "</cfoutput>" +
  53. "</select>" +
  54. "</td>" +
  55. "</tr>" +
  56. "<table>";
  57.  
  58. <!--- Adds Extra fields for Serial Number and Software/Hardware  --->
  59. newdiv.innerHTML = newdiv.innerHTML +
  60. "<table class='zpExpandedTable' id='modeltable'>" +
  61. "<tr>" +
  62. "<td id='paddingformultitop'>" +
  63. "Serial Number:&nbsp;&nbsp;" +
  64. "<input type='text' name='serialnum_" + count + "'>" +
  65. "&nbsp;&nbsp;&nbsp;&nbsp;Software/Hardware:&nbsp;&nbsp;" +
  66. "<select name='softhardware_" + count + "'>" +
  67. "<option value='' selected>No Choice</option>" +
  68. "<cfoutput query='getSoftHard'>" + 
  69. "<option value='#pk_softwareHardware#'>#pk_softwareHardware#</option>" + 
  70. "</cfoutput>" + 
  71. "</select>" +
  72. "</td>" +
  73. "</tr>" +
  74. "</table>";
  75.  
  76. <!--- Adds Extra fields for Description  --->
  77. newdiv.innerHTML = newdiv.innerHTML + 
  78. "<table class='zpExpandedTable' id='resoltable' cellpadding='3' cellspacing='0'>" +
  79. "<tr>" +
  80. "<td id='paddingformutli'>" +
  81. "Description:&nbsp;&nbsp;" + 
  82. "</td>" +
  83. "<td class='descriptionmoveinmulti'>" +
  84. "( You may enter up to 1000 characters. )"+
  85. "<br>" +
  86. "<textarea maxlength='1000' onkeyup='return descriptionmaxlength(this)' onkeydown='return descriptionmaxlength(this)'rows='4' cols='60' name='thedescription_" + count + "'></textarea>" +
  87. "</td>" +
  88. "</tr>" +
  89. "</table>";
  90.  
  91. <!--- Adds Extra fields for Resolution  --->
  92. newdiv.innerHTML = newdiv.innerHTML +
  93. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  94. "<tr>" +
  95. "<td id='paddingformutli'>" +
  96. "Resolution:&nbsp;&nbsp;" +
  97. "</td>" +
  98. "<td class='resolutionmoveinmulti'>" +
  99. "( You may enter up to 1500 characters. )"+
  100. "<br>" +
  101. "<textarea maxlength='1500' onkeyup='return resolutionmaxlength(this)' onkeydown='return resolutionmaxlength(this)' rows='4' cols='60' name='resolution_" + count + "'></textarea>" +
  102. "</td>" +
  103. "</tr>" +
  104. "</table>";
  105.  
  106. <!--- Adds Extra fields for Resolution Date, Current Date (for resolution date) and resolution vertified as effective by  --->
  107. newdiv.innerHTML = newdiv.innerHTML +
  108. "<table class='zpExpandedTable' id='resoldatetab' cellpadding='1' cellspacing='0'>" +
  109. "<tr>" +
  110. "<td id='paddingformultitop'>" +
  111. "Resolution Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  112. "</td>" +
  113. "<td>" +
  114. "<input type='text' name='resdate_" + count + "' value=''  >&nbsp;&nbsp;" +
  115.  
  116. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  117. "<input type='checkbox' name='currentdateresol_" + count + "' onClick=resdate_" + count + ".value=fill_date()>" +
  118. "</td>" +
  119. "<td>" +
  120. "Resolution Verified as effective by:&nbsp;&nbsp;"  +
  121. "</td>" +
  122. "<td>" +
  123. "<select name='resvertified_" + count + "'>" +
  124. "<option value='' selected>Make A Selection</option>" +
  125. "<cfoutput query='gettech'><option value='#fname# #lname#'>#fname# #lname#</option></cfoutput>" +
  126. "</select>" +
  127. "</td>" +
  128. "</tr>" +
  129. "</table>";
  130.  
  131. <!--- Adds Extra fields for Vertification Date, Current Date (for vertification date) and resolution vertified as effective by  --->
  132. newdiv.innerHTML = newdiv.innerHTML +
  133. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  134. "<tr>" +
  135. "<td id='paddingformultitop'>" +
  136. "Verification Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  137. "</td>" +
  138. "<td class='vertificationmoveinmulti'>" +
  139. "<input type='text' name='vertifidate_" + count + "'>&nbsp;&nbsp;" +
  140. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  141. "<input type='checkbox' name='currentdatevert_" + count + "' onClick=vertifidate_" + count + ".value=fill_date()>" +
  142. "</td>" +
  143. "</tr>" +
  144. "</table>";
  145.  
  146. <!--- Adds Extra fields for Dept/Vendor Responsibility  --->
  147. newdiv.innerHTML = newdiv.innerHTML +
  148. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  149. "<tr>" +
  150. "<td class='red' id='paddingformultitop'>" +
  151. "Dept/Vendor Responsibility*:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  +
  152. "<select name='deptvendor_" + count + "'>" +
  153. "<option value='' selected>Make A Selection</option>" +
  154. "<cfoutput query='getDeptVendor'>" +
  155. "<option value='#pk_deptVendor#'>#pk_deptVendor#</option>" +
  156. " </cfoutput>" +
  157. "</select>" +
  158. "</td>" +
  159. "</tr>" +
  160. "</table>";
  161.  
  162. <!--- Adds Extra fields for RMA Data Only  --->
  163. newdiv.innerHTML = newdiv.innerHTML +
  164. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  165. "<tr>" +
  166. "<td id='paddingformultitop'>" +
  167. "RMA Data Only:&nbsp;&nbsp;&nbsp;&nbsp;" +
  168. "</td>" +
  169. "<td class='rmanmoveinmulti'>" +
  170. "( You may enter up to 1000 characters. )"+
  171. "<br/>" +
  172. "<textarea maxlength='1000' onkeyup='return rmamaxlength(this)' onkeydown='return rmamaxlength(this)' rows='4' cols='60' name='rma_" + count + "'></textarea> " +
  173. "</td>" +
  174. "</tr>" +
  175. "</table>" +
  176. "<input type='hidden' name='serialcount' value='" + count + "'>";
  177.  
  178. <!--- Adds Delete to every ticket  --->
  179. newdiv.innerHTML = newdiv.innerHTML +
  180. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  181. "<tr>" +
  182. "<td>" +
  183. "<input type='button' class='removeticket' value='Remove Serial &quot;"+ count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
  184. "</td>" +
  185. "</tr>" +
  186. "<tr>" +
  187. "<td>" + 
  188. "<input type='button' class='addticket' value='Add Parts' onclick=\"addpartInput(\'"+divIdName+"\')\">" +
  189. "</td>" +
  190. "</tr>" +
  191. "</table>";
  192.  
  193. document.getElementById(divName).appendChild(newdiv);
  194.  
  195. <!---Allows us to remove multiple fields --->
  196. function removeElement(divNum) {
  197.   var d = document.getElementById('dynamicInput');
  198.   var olddiv = document.getElementById(divNum);
  199.   d.removeChild(olddiv);
  200. }
  201. </script>

the parts function

Expand|Select|Wrap|Line Numbers
  1. <!---PARTS--->
  2. <script type="text/javascript">
  3. <!---Adds multiple fields for parts --->
  4. function addpartInput(partName){
  5. var parts = document.getElementById(partName);
  6. <!---('partsInput')--->
  7.  
  8. <!---this works if only want to add a part under the serial you are working with, but if you have
  9. serial information 1
  10. and serial information 2 an want to add information to serial information 1 you cant because parts always appear under the last serial information added if you click add parts--->
  11. var getparts = document.getElementById('div');
  12. var avalue = document.getElementById('aValue');
  13. var count = (document.getElementById('aValue').value -1)+ 2;
  14. avalue.value = count;
  15. var partdiv = document.createElement('div');
  16. var partIdName = 'part'+count+'Name';
  17. <!---'parts'+count+'Input'--->
  18. partdiv.setAttribute('id',partIdName);
  19. <!--- 
  20.  Adds Extra fields for parts table  --->
  21. partdiv.innerHTML =
  22. <!---what used originally for this tableclass='createticketables' id='spaceup'--->
  23. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0' >" +
  24. "<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
  25. "<tr>" +
  26. "<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
  27. "<td class='red'>" +
  28. "Parts been returned* " +
  29. "<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
  30. "</td>" +
  31. "<td>" +
  32. "<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
  33. "</td>" +
  34. "</tr>" +
  35. "</table>" +
  36. "<table table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'  >" +
  37. "<tr>" +
  38. "<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
  39. "<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
  40. "Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
  41. "<td>On Site:</td>" +
  42. "<td><select name='onsite_" + count +"'>" +
  43. "<option value='No Choice' selected>No Choice</option>" +
  44. "<option value='Yes'>Yes</option>" +
  45. "<option value='No'>No</option>" +
  46. "</select><td>" +
  47. "<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
  48. "<option value='' selected>No Choice</option>" +
  49. "<cfloop from='0' to='10' index='nonsite'><cfoutput>" +
  50. "<option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>" +
  51. "</select><td>" +
  52. "</tr>" +
  53. "</table>" +
  54. "<input type='hidden' name='serialcount' value='" + count + "'>";
  55.  
  56.  
  57. <!--- Adds Delete to every ticket  --->
  58. partdiv.innerHTML = partdiv.innerHTML +
  59. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  60. "<tr>" +
  61. "<td>" +
  62. "<input type='button' class='removeticket' value='Remove Parts &quot;"+count +"&quot;' onclick=\"removetheElement(\'"+partIdName+"\')\"></a>" +
  63. "</td>" +
  64. "</td>" +
  65. "</tr>" +
  66. "</table>";
  67.  
  68. document.getElementById(partName).appendChild(partdiv);
  69.  
  70. <!---Allows us to remove multiple fields --->
  71. function removetheElement(divNum) {
  72.   var d = document.getElementById('partsInput');
  73.   var olddiv = document.getElementById(divNum);
  74.  olddiv.parentNode.removeChild(olddiv);
  75. }
  76.  
  77. </script>
and the html

Expand|Select|Wrap|Line Numbers
  1. <body onload="addInput('dynamicInput');addpartInput('dynamic1Input');">
  2.  
  3. <!--- Ticket Information --->
  4. <input type="hidden" value="0" id="theValue" />
  5. <input type="hidden" value="0" id="aValue" />
  6.      <div id="dynamicInput">
  7.  
  8.      </div>
  9.     <!---      <div id="partsInput">   </div>--->
  10. <!---      All Ticket Information Appears Here--->
  11.  
  12.  
  13.      <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
Thank you,
Rach
Oct 9 '08 #34

acoder
Expert Mod 15k+
P: 16,027
If you put clear borders and spacing between each serial information, it shouldn't be a problem, but if it still is, just add "Serial Information" followed by the serial number which you can get from the div id (by parsing) or by passing in the number to addpartInput().
Oct 9 '08 #35

100+
P: 769
If you put clear borders and spacing between each serial information, it shouldn't be a problem, but if it still is, just add "Serial Information" followed by the serial number which you can get from the div id (by parsing) or by passing in the number to addpartInput().
Hey Acoder,

I tried spacing and border but still made me feel confused. How would i go about parsing to get the number for serial number. Also wanted to ask do you think for each part that goes under a different serial that it should start over

for example
serial information 1
parts 1
parts 2

serial information 2
parts 1
parts 2

instead of what it does now
serial information 1
parts 1
parts 2

serial information 2
parts 3
parts 4

been debating on if i need to do that or if the user would be fine with that so just wanted to ask your opinion.

Thank you,
Rach
Oct 9 '08 #36

acoder
Expert Mod 15k+
P: 16,027
It would be better to start over and that might actually be part of the problem.

We'll work on that first and see if that improves things. To start over, you'll need a count in each serial, so instead of using one single hidden input for parts count, create one in each serial in addInput(). Give each one a unique ID and access using document.getElementById() as you've been doing for other elements.
Oct 10 '08 #37

100+
P: 769
It would be better to start over and that might actually be part of the problem.

We'll work on that first and see if that improves things. To start over, you'll need a count in each serial, so instead of using one single hidden input for parts count, create one in each serial in addInput(). Give each one a unique ID and access using document.getElementById() as you've been doing for other elements.
Hey Acoder,

Ok so do i create a new element? an then do i access it in the parts function or in the serial function?

like this
Expand|Select|Wrap|Line Numbers
  1. var newpart = document.createElement('div');
Thank you,
Rach
Oct 10 '08 #38

acoder
Expert Mod 15k+
P: 16,027
You could just add it to the partdiv.innerHTML string to make things easier.
Oct 10 '08 #39

100+
P: 769
You could just add it to the partdiv.innerHTML string to make things easier.
Hey Acoder,

so add the var newpart = document.createElement('div'); to the addInput and then
put document.getElementById() in the partdiv.innerHTML? Or do i create a hidden
field an the hidden field get the id?

Thank you,
Rach
Oct 10 '08 #40

acoder
Expert Mod 15k+
P: 16,027
Yes, a hidden field like the count field in the HTML (which is not required for parts). There's no need to create a div.

In addpartInput(), you'll need to access this hidden field to get the parts count, so you should also give it an ID.
Oct 10 '08 #41

100+
P: 769
Yes, a hidden field like the count field in the HTML (which is not required for parts). There's no need to create a div.

In addpartInput(), you'll need to access this hidden field to get the parts count, so you should also give it an ID.
Hey Acoder,

So instead of creating a div i need to create a input? like

Expand|Select|Wrap|Line Numbers
  1. var newpart = document.createElement('input');
  2.  
an then create another different one in parts like

Expand|Select|Wrap|Line Numbers
  1. var apart = document.creatElement('input');
an then in the partsdiv.innerHTML do

Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" value="0" id="newpart" />
  2. <input type="hidden" value="0" id="apart" />
right? or am i confused.

Thank you,
Rach
Oct 10 '08 #42

acoder
Expert Mod 15k+
P: 16,027
No, you only need one count for each serial. This will replace the "aValue" hidden field in the HTML. So just copy that into the innerHTML string in addInput, but with a unique ID, e.g. "partscount"+count.
Oct 10 '08 #43

100+
P: 769
No, you only need one count for each serial. This will replace the "aValue" hidden field in the HTML. So just copy that into the innerHTML string in addInput, but with a unique ID, e.g. "partscount"+count.
Hey Acoder,

So would i copy all the fields that say avalue an make them just say something different like here is what avalue looks like

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!---Adds multiple fields for parts --->
  3. function addpartInput(partName){
  4. var parts = document.getElementById(partName);
  5. var getparts = document.getElementById('div');
  6. var avalue = document.getElementById('aValue');
  7. var count = (document.getElementById('aValue').value -1)+ 2;
  8. avalue.value = count;
  9. var partdiv = document.createElement('div');
  10. var partIdName = 'part'+count+'Name';
  11. partdiv.setAttribute('id',partIdName);

so just do this


Expand|Select|Wrap|Line Numbers
  1. <!---Adds multiple fields for parts --->
  2. function addpartInput(partName){
  3. var parts = document.getElementById(partName);
  4. var getparts = document.getElementById('div');
  5. var avalue = document.getElementById('aValue');
  6. var count = (document.getElementById('aValue').value -1)+ 2;
  7. avalue.value = count;
  8. var partdiv = document.createElement('div');
  9. var partIdName = 'part'+count+'Name';
  10. var partc = 'partscount'+count;
  11. partdiv.setAttribute('id',partIdName);
  12.  
i put this in the partdiv.innerHTML

Expand|Select|Wrap|Line Numbers
  1. <input type='hidden' value='0' id='partc' />
Thank you,
Rach
Oct 10 '08 #44

acoder
Expert Mod 15k+
P: 16,027
Instead of being in addpartInput, it needs to be in addInput, so you would need to set newdiv.innerHTML and the id/name needs to be set within the string similar to the buttons earlier in this thread. Then in addpartInput, instead of accessing "aValue", you would access the "partscount1", "partscount2", etc. depending on the serial to which the parts belong to.
Oct 10 '08 #45

100+
P: 769
Instead of being in addpartInput, it needs to be in addInput, so you would need to set newdiv.innerHTML and the id/name needs to be set within the string similar to the buttons earlier in this thread. Then in addpartInput, instead of accessing "aValue", you would access the "partscount1", "partscount2", etc. depending on the serial to which the parts belong to.

Hey Acoder,

Ok you completely lost me. Ok so this an this line needs to be in newdiv.innerHTML? an i am confused by the aValue part
Expand|Select|Wrap|Line Numbers
  1. <input type='hidden' value='0' id='partc' />
Thank you,
Rach
Oct 10 '08 #46

acoder
Expert Mod 15k+
P: 16,027
Let's start again. I think you need to understand what's happening and what needs changing before attempting any changes to your code.

At the moment, you have one parts count. Having one parts count means that you have one count for all serials. To have separate part counts for each serial, you need to remove the "aValue" hidden field and create a new hidden field for parts counting for each serial. Then when adding parts, to get the count, you check this hidden field (the correct one depending on the serial under which this new part appears) rather than one single count as you currently have.

Do you understand all of this so far? If not, ask, otherwise we'll just end up going round in circles.
Oct 10 '08 #47

100+
P: 769
Let's start again. I think you need to understand what's happening and what needs changing before attempting any changes to your code.

At the moment, you have one parts count. Having one parts count means that you have one count for all serials. To have separate part counts for each serial, you need to remove the "aValue" hidden field and create a new hidden field for parts counting for each serial. Then when adding parts, to get the count, you check this hidden field (the correct one depending on the serial under which this new part appears) rather than one single count as you currently have.

Do you understand all of this so far? If not, ask, otherwise we'll just end up going round in circles.
Hey Acoder,

Ok that makes since to me. But i think there is 2 counts going on right now.
Because if i take out the avalue hidden field away from the code below then parts doesn't show up at all. I think you said in above post that i didn't need it anymore, but yet when i just took it out it won't bring up parts at all. Does it mean i am doing somthing wrong to aValue?

Expand|Select|Wrap|Line Numbers
  1. <!--- Ticket Information --->
  2. <input type="hidden" value="0" id="theValue" />
  3. <input type="hidden" value="0" id="aValue" />
  4.      <div id="dynamicInput">
  5.  
  6.      </div>
  7.     <!---      <div id="partsInput">   </div>--->
  8. <!---      All Ticket Information Appears Here--->
  9.  
  10.  
  11.      <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >

this is what i have for serial function

Expand|Select|Wrap|Line Numbers
  1. <!---Allows us to add serial information multiple times --->
  2. <script type="text/javascript">
  3. <!---Allows us to add multiple fields --->
  4. function addInput(divName){
  5. var dynamic = document.getElementById('dynamicInput');
  6. var thevalue = document.getElementById('theValue');
  7. var count = (document.getElementById('theValue').value -1)+ 2;
  8. thevalue.value = count;
  9. var newdiv = document.createElement('div');
  10. var getparts = document.createElement('div');
  11. var divIdName = 'dynamic'+count+'Input';
  12. var partc = 'partscount'+count;
  13. newdiv.setAttribute('id',divIdName);
  14.  
  15. <!--- Adds Extra fields for Model No, Product Type, and Type of Hardware Failure  --->
  16. newdiv.innerHTML =
  17. "<table class='zpExpandedTable' id='modeltable'>" +
  18. "<th class='sectiontitletick' colspan='7'>Serial Information "+ count +" </th>" +
  19. "<tr>" +
  20. "<td id='paddingformultitop'>Model No:&nbsp;&nbsp;&nbsp;&nbsp;</td>" +
  21. "</td>" +
  22. "<td>" +
  23.  "<select name='modelno_" + count + "' >" +
  24.  "<option value=''>Make A Selection</option>" +
  25. "<cfoutput query='models'>" + 
  26. "<option value='#model#'>#model#</option>" + 
  27. "</cfoutput>" + 
  28.  "</select>" +
  29.  "</td>" +
  30.  "<td>" +
  31. "&nbsp;&nbsp;&nbsp;&nbsp;Product Type:"  +
  32. "</td>" +
  33. "<td>" +
  34. "<select name='producttype_" + count + "'>" +
  35. "<option value='' selected>No Choice</option>" +
  36. "<cfoutput query='getProdType'>" + 
  37. "<option value='#pk_productType#'>#pk_productType#</option>" + 
  38. "</cfoutput>" + 
  39. "</select>" +
  40. "</td>" +
  41. "<td class='red'>" +
  42. "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type Of Hardware Failure*:" +
  43. "</td>" +
  44. "<td>" +
  45. "<select name='hardwarefailure_" + count + "'>" +
  46. "<option value='' selected>Make A Selection</option>" +
  47. "<cfoutput query='getHardwareFail'>" +
  48. "<option value='#pk_hardwareFailure#'>#pk_hardwareFailure#</option>" +
  49. "</cfoutput>" +
  50. "</select>" +
  51. "</td>" +
  52. "</tr>" +
  53. "<table>";
  54.  
  55. <!--- Adds Extra fields for Serial Number and Software/Hardware  --->
  56. newdiv.innerHTML = newdiv.innerHTML +
  57. "<table class='zpExpandedTable' id='modeltable'>" +
  58. "<tr>" +
  59. "<td id='paddingformultitop'>" +
  60. "Serial Number:&nbsp;&nbsp;" +
  61. "<input type='text' name='serialnum_" + count + "'>" +
  62. "&nbsp;&nbsp;&nbsp;&nbsp;Software/Hardware:&nbsp;&nbsp;" +
  63. "<select name='softhardware_" + count + "'>" +
  64. "<option value='' selected>No Choice</option>" +
  65. "<cfoutput query='getSoftHard'>" + 
  66. "<option value='#pk_softwareHardware#'>#pk_softwareHardware#</option>" + 
  67. "</cfoutput>" + 
  68. "</select>" +
  69. "</td>" +
  70. "</tr>" +
  71. "</table>";
  72.  
  73. <!--- Adds Extra fields for Description  --->
  74. newdiv.innerHTML = newdiv.innerHTML + 
  75. "<table class='zpExpandedTable' id='resoltable' cellpadding='3' cellspacing='0'>" +
  76. "<tr>" +
  77. "<td id='paddingformutli'>" +
  78. "Description:&nbsp;&nbsp;" + 
  79. "</td>" +
  80. "<td class='descriptionmoveinmulti'>" +
  81. "( You may enter up to 1000 characters. )"+
  82. "<br>" +
  83. "<textarea maxlength='1000' onkeyup='return descriptionmaxlength(this)' onkeydown='return descriptionmaxlength(this)'rows='4' cols='60' name='thedescription_" + count + "'></textarea>" +
  84. "</td>" +
  85. "</tr>" +
  86. "</table>";
  87.  
  88. <!--- Adds Extra fields for Resolution  --->
  89. newdiv.innerHTML = newdiv.innerHTML +
  90. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  91. "<tr>" +
  92. "<td id='paddingformutli'>" +
  93. "Resolution:&nbsp;&nbsp;" +
  94. "</td>" +
  95. "<td class='resolutionmoveinmulti'>" +
  96. "( You may enter up to 1500 characters. )"+
  97. "<br>" +
  98. "<textarea maxlength='1500' onkeyup='return resolutionmaxlength(this)' onkeydown='return resolutionmaxlength(this)' rows='4' cols='60' name='resolution_" + count + "'></textarea>" +
  99. "</td>" +
  100. "</tr>" +
  101. "</table>";
  102.  
  103. <!--- Adds Extra fields for Resolution Date, Current Date (for resolution date) and resolution vertified as effective by  --->
  104. newdiv.innerHTML = newdiv.innerHTML +
  105. "<table class='zpExpandedTable' id='resoldatetab' cellpadding='1' cellspacing='0'>" +
  106. "<tr>" +
  107. "<td id='paddingformultitop'>" +
  108. "Resolution Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  109. "</td>" +
  110. "<td>" +
  111. "<input type='text' name='resdate_" + count + "' value=''  >&nbsp;&nbsp;" +
  112.  
  113. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  114. "<input type='checkbox' name='currentdateresol_" + count + "' onClick=resdate_" + count + ".value=fill_date()>" +
  115. "</td>" +
  116. "<td>" +
  117. "Resolution Verified as effective by:&nbsp;&nbsp;"  +
  118. "</td>" +
  119. "<td>" +
  120. "<select name='resvertified_" + count + "'>" +
  121. "<option value='' selected>Make A Selection</option>" +
  122. "<cfoutput query='gettech'><option value='#fname# #lname#'>#fname# #lname#</option></cfoutput>" +
  123. "</select>" +
  124. "</td>" +
  125. "</tr>" +
  126. "</table>";
  127.  
  128. <!--- Adds Extra fields for Vertification Date, Current Date (for vertification date) and resolution vertified as effective by  --->
  129. newdiv.innerHTML = newdiv.innerHTML +
  130. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  131. "<tr>" +
  132. "<td id='paddingformultitop'>" +
  133. "Verification Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
  134. "</td>" +
  135. "<td class='vertificationmoveinmulti'>" +
  136. "<input type='text' name='vertifidate_" + count + "'>&nbsp;&nbsp;" +
  137. "&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
  138. "<input type='checkbox' name='currentdatevert_" + count + "' onClick=vertifidate_" + count + ".value=fill_date()>" +
  139. "</td>" +
  140. "</tr>" +
  141. "</table>";
  142.  
  143. <!--- Adds Extra fields for Dept/Vendor Responsibility  --->
  144. newdiv.innerHTML = newdiv.innerHTML +
  145. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  146. "<tr>" +
  147. "<td class='red' id='paddingformultitop'>" +
  148. "Dept/Vendor Responsibility*:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  +
  149. "<select name='deptvendor_" + count + "'>" +
  150. "<option value='' selected>Make A Selection</option>" +
  151. "<cfoutput query='getDeptVendor'>" +
  152. "<option value='#pk_deptVendor#'>#pk_deptVendor#</option>" +
  153. " </cfoutput>" +
  154. "</select>" +
  155. "</td>" +
  156. "</tr>" +
  157. "</table>";
  158.  
  159. <!--- Adds Extra fields for RMA Data Only  --->
  160. newdiv.innerHTML = newdiv.innerHTML +
  161. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  162. "<tr>" +
  163. "<td id='paddingformultitop'>" +
  164. "RMA Data Only:&nbsp;&nbsp;&nbsp;&nbsp;" +
  165. "</td>" +
  166. "<td class='rmanmoveinmulti'>" +
  167. "( You may enter up to 1000 characters. )"+
  168. "<br/>" +
  169. "<textarea maxlength='1000' onkeyup='return rmamaxlength(this)' onkeydown='return rmamaxlength(this)' rows='4' cols='60' name='rma_" + count + "'></textarea> " +
  170. "</td>" +
  171. "</tr>" +
  172. "</table>" +
  173. "<input type='hidden' name='serialcount' value='" + count + "'>";
  174.  
  175. <!--- Adds Delete to every ticket  --->
  176. newdiv.innerHTML = newdiv.innerHTML +
  177. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  178. "<tr>" +
  179. "<td>" +
  180. "<input type='button' class='removeticket' value='Remove Serial &quot;"+ count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
  181. "</td>" +
  182. "</tr>" +
  183. "<tr>" +
  184. "<td>" + 
  185. "<input type='button' class='addticket' value='Add Parts' onclick=\"addpartInput(\'"+divIdName+"\')\">" +
  186. "</td>" +
  187. "</tr>" +
  188. "</table>";
  189.  
  190. document.getElementById(divName).appendChild(newdiv);
  191.  
  192. <!---Allows us to remove multiple fields --->
  193. function removeElement(divNum) {
  194.   var d = document.getElementById('dynamicInput');
  195.   var olddiv = document.getElementById(divNum);
  196.   d.removeChild(olddiv);
  197. }
  198. </script>
for parts function
Expand|Select|Wrap|Line Numbers
  1. <!---PARTS--->
  2. <script type="text/javascript">
  3. <!---Adds multiple fields for parts --->
  4. function addpartInput(partName){
  5. var parts = document.getElementById(partName);
  6. <!---('partsInput')--->
  7.  
  8. <!---this works if only want to add a part under the serial you are working with, but if you have
  9. serial information 1
  10. and serial information 2 an want to add information to serial information 1 you cant because parts always appear under the last serial information added if you click add parts--->
  11. var getparts = document.getElementById('div');
  12. var avalue = document.getElementById('aValue');
  13. var count = (document.getElementById('aValue').value -1)+ 2;
  14. avalue.value = count;
  15. var partdiv = document.createElement('div');
  16. var partIdName = 'part'+count+'Name';
  17. <!---'parts'+count+'Input'--->
  18. partdiv.setAttribute('id',partIdName);
  19.  
  20. <!--- Adds Extra fields for parts table  --->
  21. partdiv.innerHTML =
  22. <!---what used originally for this tableclass='createticketables' id='spaceup'--->
  23. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0' >" +
  24. "<th class='sectiontitle' colspan='7'>Parts Information "+ count +" Serial Information <div id='dynamicInput'></div></th>" +
  25. "<tr>" +
  26. "<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
  27. "<td class='red'>" +
  28. "Parts been returned* " +
  29. "<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
  30. "</td>" +
  31. "<td>" +
  32. "<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
  33. "</td>" +
  34. "</tr>" +
  35. "</table>" +
  36. "<table table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'  >" +
  37. "<tr>" +
  38. "<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
  39. "<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
  40. "Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
  41. "<td>On Site:</td>" +
  42. "<td><select name='onsite_" + count +"'>" +
  43. "<option value='No Choice' selected>No Choice</option>" +
  44. "<option value='Yes'>Yes</option>" +
  45. "<option value='No'>No</option>" +
  46. "</select><td>" +
  47. "<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
  48. "<option value='' selected>No Choice</option>" +
  49. "<cfloop from='0' to='10' index='nonsite'><cfoutput>" +
  50. "<option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>" +
  51. "</select><td>" +
  52. "</tr>" +
  53. "</table>" +
  54. <!---"<input type='hidden' value='0' id='aValue' />" +--->
  55. "<input type='hidden' name='serialcount' value='" + count + "'>";
  56.  
  57.  
  58. <!--- Adds Delete to every ticket  --->
  59. partdiv.innerHTML = partdiv.innerHTML +
  60. "<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
  61. "<tr>" +
  62. "<td>" +
  63. "<input type='button' class='removeticket' value='Remove Parts &quot;"+count +"&quot;' onclick=\"removetheElement(\'"+partIdName+"\')\"></a>" +
  64. "</td>" +
  65. "</td>" +
  66. "</tr>" +
  67. "</table>";
  68.  
  69. document.getElementById(partName).appendChild(partdiv);
  70.  
  71. <!---Allows us to remove multiple fields--->
  72. function removetheElement(divNum) {
  73.   var d = document.getElementById('partsInput');
  74.   var olddiv = document.getElementById(divNum);
  75.  olddiv.parentNode.removeChild(olddiv);
  76. }
  77.  
  78. </script>
and all html that goes with it

Expand|Select|Wrap|Line Numbers
  1. <body onload="addInput('dynamicInput');addpartInput('dynamic1Input');">
  2. <!--- Ticket Information --->
  3. <input type="hidden" value="0" id="theValue" />
  4. <input type="hidden" value="0" id="aValue" />
  5.      <div id="dynamicInput">
  6.  
  7.      </div>
  8.     <!---      <div id="partsInput">   </div>--->
  9. <!---      All Ticket Information Appears Here--->
  10.  
  11.  
  12.      <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >

Thank you,
Rach
Oct 10 '08 #48

acoder
Expert Mod 15k+
P: 16,027
The reason why parts won't show up is because the function needs to be changed to access the new hidden field. To do that, first add the hidden field to newdiv.innerHTML in addInput(). This will add a new parts count for each serial. Give it the ID partc (which you set on line 12). We'll deal with the rest once this part's right.
Oct 10 '08 #49

100+
P: 769
The reason why parts won't show up is because the function needs to be changed to access the new hidden field. To do that, first add the hidden field to newdiv.innerHTML in addInput(). This will add a new parts count for each serial. Give it the ID partc (which you set on line 12). We'll deal with the rest once this part's right.
Hey Acoder,

Ok added it right before the delete in the serial function

Expand|Select|Wrap|Line Numbers
  1. "</td>" +
  2. "</tr>" +
  3. "</table>" +
  4. "<input type='hidden' value='0' id='partc' />" +
  5. "<input type='hidden' name='serialcount' value='" + count + "'>";
  6.  
  7. <!--- Adds Delete to every ticket  --->
whats next?

Thank you,
Rach
Oct 10 '08 #50

92 Replies

Post your reply

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