Multiple serials with multiple parts attached to it.

Collapse
X
Collapse
 
  • Page of 7
  • Time
  • Show
Clear All
new posts
Previous 1 2 3 4 7 template Next
  • bonneylake
    Contributor
    • Aug 2008
    • 769
    #1

    Multiple serials with multiple parts attached to it.

    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.

    Code:
    <!---Allows us to add serial information multiple times --->
<script type="text/javascript">
<!---Allows us to add multiple fields --->
function addInput(divName){
var dynamic = document.getElementById('dynamicInput');
var thevalue = document.getElementById('theValue');
var count = (document.getElementById('theValue').value -1)+ 2;
thevalue.value = count;
var newdiv = document.createElement('div');
var divIdName = 'dynamic'+count+'Input';
newdiv.setAttribute('id',divIdName);
 
<!--- Adds Extra fields for Model No, Product Type, and Type of Hardware Failure  --->
newdiv.innerHTML =
"<table class='zpExpandedTable' id='modeltable'>" +
"<th class='sectiontitletick' colspan='7'>Serial Information "+ count +" </th>" +
"<tr>" +
"<td id='paddingformultitop'>Model No:&nbsp;&nbsp;&nbsp;&nbsp;</td>" +
"</td>" +
"<td>" +
 "<select name='modelno_" + count + "' >" +
 "<option value=''>Make A Selection</option>" +
"<cfoutput query='models'>" + 
"<option value='#model#'>#model#</option>" + 
"</cfoutput>" + 
 "</select>" +
 "</td>" +
 "<td>" +
"&nbsp;&nbsp;&nbsp;&nbsp;Product Type:"  +
"</td>" +
"<td>" +
"<select name='producttype_" + count + "'>" +
"<option value='' selected>No Choice</option>" +
"<cfoutput query='getProdType'>" + 
"<option value='#pk_productType#'>#pk_productType#</option>" + 
"</cfoutput>" + 
"</select>" +
"</td>" +
"<td class='red'>" +
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type Of Hardware Failure*:" +
"</td>" +
"<td>" +
"<select name='hardwarefailure_" + count + "'>" +
"<option value='' selected>Make A Selection</option>" +
"<cfoutput query='getHardwareFail'>" +
"<option value='#pk_hardwareFailure#'>#pk_hardwareFailure#</option>" +
"</cfoutput>" +
"</select>" +
"</td>" +
"</tr>" +
"<table>";
 
<!--- Adds Extra fields for Serial Number and Software/Hardware  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='modeltable'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"Serial Number:&nbsp;&nbsp;" +
"<input type='text' name='serialnum_" + count + "'>" +
"&nbsp;&nbsp;&nbsp;&nbsp;Software/Hardware:&nbsp;&nbsp;" +
"<select name='softhardware_" + count + "'>" +
"<option value='' selected>No Choice</option>" +
"<cfoutput query='getSoftHard'>" + 
"<option value='#pk_softwareHardware#'>#pk_softwareHardware#</option>" + 
"</cfoutput>" + 
"</select>" +
"</td>" +
"</tr>" +
"</table>";

<!--- Adds Extra fields for Description  --->
newdiv.innerHTML = newdiv.innerHTML + 
"<table class='zpExpandedTable' id='resoltable' cellpadding='3' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformutli'>" +
"Description:&nbsp;&nbsp;" + 
"</td>" +
"<td class='descriptionmoveinmulti'>" +
"( You may enter up to 1000 characters. )"+
"<br>" +
"<textarea maxlength='1000' onkeyup='return descriptionmaxlength(this)' onkeydown='return descriptionmaxlength(this)'rows='4' cols='60' name='thedescription_" + count + "'></textarea>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Resolution  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformutli'>" +
"Resolution:&nbsp;&nbsp;" +
"</td>" +
"<td class='resolutionmoveinmulti'>" +
"( You may enter up to 1500 characters. )"+
"<br>" +
"<textarea maxlength='1500' onkeyup='return resolutionmaxlength(this)' onkeydown='return resolutionmaxlength(this)' rows='4' cols='60' name='resolution_" + count + "'></textarea>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Resolution Date, Current Date (for resolution date) and resolution vertified as effective by  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoldatetab' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"Resolution Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
"</td>" +
"<td>" +
"<input type='text' name='resdate_" + count + "' value=''  >&nbsp;&nbsp;" +
 
"&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
"<input type='checkbox' name='currentdateresol_" + count + "' onClick=resdate_" + count + ".value=fill_date()>" +
"</td>" +
"<td>" +
"Resolution Verified as effective by:&nbsp;&nbsp;"  +
"</td>" +
"<td>" +
"<select name='resvertified_" + count + "'>" +
"<option value='' selected>Make A Selection</option>" +
"<cfoutput query='gettech'><option value='#fname# #lname#'>#fname# #lname#</option></cfoutput>" +
"</select>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Vertification Date, Current Date (for vertification date) and resolution vertified as effective by  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"Verification Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
"</td>" +
"<td class='vertificationmoveinmulti'>" +
"<input type='text' name='vertifidate_" + count + "'>&nbsp;&nbsp;" +
"&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
"<input type='checkbox' name='currentdatevert_" + count + "' onClick=vertifidate_" + count + ".value=fill_date()>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Dept/Vendor Responsibility  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td class='red' id='paddingformultitop'>" +
"Dept/Vendor Responsibility*:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  +
"<select name='deptvendor_" + count + "'>" +
"<option value='' selected>Make A Selection</option>" +
"<cfoutput query='getDeptVendor'>" +
"<option value='#pk_deptVendor#'>#pk_deptVendor#</option>" +
" </cfoutput>" +
"</select>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for RMA Data Only  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"RMA Data Only:&nbsp;&nbsp;&nbsp;&nbsp;" +
"</td>" +
"<td class='rmanmoveinmulti'>" +
"( You may enter up to 1000 characters. )"+
"<br/>" +
"<textarea maxlength='1000' onkeyup='return rmamaxlength(this)' onkeydown='return rmamaxlength(this)' rows='4' cols='60' name='rma_" + count + "'></textarea> " +
"</td>" +
"</tr>" +
"</table>" +
"<input type='hidden' name='serialcount' value='" + count + "'>";
 
<!--- Adds Delete to every ticket  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td>" +
"<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
"</td>" +
"</td>" +
"</tr>" +
"</table>";
 
document.getElementById(divName).appendChild(newdiv);
} 
 
<!---Allows us to remove multiple fields --->
function removeElement(divNum) {
  var d = document.getElementById('dynamicInput');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}
</script>

<form>
<!--- Ticket Information --->
<input type="hidden" value="0" id="theValue" />
     <div id="dynamicInput">
     <!--- All Ticket Information Appears Here--->
     </div>
     <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
     </form>

    Thank you in advance,
    Rach
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Add the parts within the serial div, so when you remove the div everything within it is deleted including the parts.

        Comment

        • bonneylake
          Contributor
          • Aug 2008
          • 769
          #3
          Originally posted by acoder
          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

          Code:
          <!--- Ticket Information --->
<input type="hidden" value="0" id="theValue" />
     <div id="dynamicInput">
     <!--- All Ticket Information Appears Here--->
     </div>
     <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
          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

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              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.

                Comment

                • bonneylake
                  Contributor
                  • Aug 2008
                  • 769
                  #5
                  [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

                  Code:
                  <input type="hidden" value="0" id="theValue" />
     <div id="dynamicInput">
<div id="parts"></div>
     <!--- All Ticket Information Appears Here--->
     </div>
     <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
                  Code:
                  <!---PARTS--->
<script type="text/javascript">
<!---Allows us to add multiple fields for parts --->
function addpartInput(partName){
var parts = document.getElementById('partsInput');
var avalue = document.getElementById('aValue');
var count = (document.getElementById('aValue').value -1)+ 2;
avalue.value = count;
var partdiv = document.createElement('div');
var partIdName = 'parts'+count+'Input';
partdiv.setAttribute('id',partIdName);
 
<!--- Adds Extra fields parts table  --->
partdiv.innerHTML =
"<table class='createticketables' id='spaceup'>" +
"<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
"<tr>" +
"<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
"<td class='red'>" +
"Parts been returned* " +
"<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
"</td>" +
"<td>" +
"<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
"</td>" +
"</tr>" +
"</table>" +
"<table class='createticketables' >" +
"<tr>" +
"<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
"<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
"Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
"<td>On Site:</td>" +
"<td><select name='onsite_" + count +"'>" +
"<option value='No Choice' selected>No Choice</option>" +
"<option value='Yes'>Yes</option>" +
"<option value='No'>No</option>" +
"</select><td>" +
"<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
"<option value='' selected>No Choice</option>" +
 "<cfloop from='0' to='10' index='nonsite'><cfoutput><option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>
</select><td>" +
"</tr>" +
"</table>" +
"<input type='hidden' name='serialcount' value='" + count + "'>";

 
<!---<!--- Adds Delete to every ticket  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td>" +
"<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
"</td>" +
"</td>" +
"</tr>" +
"</table>";
 
document.getElementById(divName).appendChild(newdiv);
} 
 
<!---Allows us to remove multiple fields --->
function removeElement(divNum) {
  var d = document.getElementById('dynamicInput');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}--->
</script>
                  the form
                  Code:
                  <html>
<body onload="addInput('dynamicInput');addpartInput('partsInput');">
<form>
<input type="hidden" value="0" id="theValue" />
<input type="hidden" value="0" id="aValue" />
     <div id="dynamicInput">
     <div id="partsInput">
     <!--- All Ticket Information Appears Here--->
     </div>
     </div>
     <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
</form>
</body>
</html>
                  Thank you,
                  Rach

                    Comment

                    • bonneylake
                      Contributor
                      • Aug 2008
                      • 769
                      #6
                      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

                      Code:
                      <body onload="addInput('dynamicInput');addpartInput('partsInput');">
<!--- Ticket Information --->
<input type="hidden" value="0" id="theValue" />
<input type="hidden" value="0" id="aValue" />
     <div id="dynamicInput">
     <div id="partsInput">
     <!--- All Ticket Information Appears Here--->
     </div>
     </div>
      <input type="button" class="addticket" value="Add Parts" onClick="addpartInput('partsInput');" >
     <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
                      the serial and parts javascript

                      Code:
                      <!---Allows us to add serial information multiple times --->
<script type="text/javascript">
<!---Allows us to add multiple fields --->
function addInput(divName){
var dynamic = document.getElementById('dynamicInput');
var thevalue = document.getElementById('theValue');
var count = (document.getElementById('theValue').value -1)+ 2;
thevalue.value = count;
var newdiv = document.createElement('div');
var divIdName = 'dynamic'+count+'Input';
newdiv.setAttribute('id',divIdName);
 
<!--- Adds Extra fields for Model No, Product Type, and Type of Hardware Failure  --->
newdiv.innerHTML =
"<table class='zpExpandedTable' id='modeltable'>" +
"<th class='sectiontitletick' colspan='7'>Serial Information "+ count +" </th>" +
"<tr>" +
"<td id='paddingformultitop'>Model No:&nbsp;&nbsp;&nbsp;&nbsp;</td>" +
"</td>" +
"<td>" +
 "<select name='modelno_" + count + "' >" +
 "<option value=''>Make A Selection</option>" +
"<cfoutput query='models'>" + 
"<option value='#model#'>#model#</option>" + 
"</cfoutput>" + 
 "</select>" +
 "</td>" +
 "<td>" +
"&nbsp;&nbsp;&nbsp;&nbsp;Product Type:"  +
"</td>" +
"<td>" +
"<select name='producttype_" + count + "'>" +
"<option value='' selected>No Choice</option>" +
"<cfoutput query='getProdType'>" + 
"<option value='#pk_productType#'>#pk_productType#</option>" + 
"</cfoutput>" + 
"</select>" +
"</td>" +
"<td class='red'>" +
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type Of Hardware Failure*:" +
"</td>" +
"<td>" +
"<select name='hardwarefailure_" + count + "'>" +
"<option value='' selected>Make A Selection</option>" +
"<cfoutput query='getHardwareFail'>" +
"<option value='#pk_hardwareFailure#'>#pk_hardwareFailure#</option>" +
"</cfoutput>" +
"</select>" +
"</td>" +
"</tr>" +
"<table>";
 
<!--- Adds Extra fields for Serial Number and Software/Hardware  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='modeltable'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"Serial Number:&nbsp;&nbsp;" +
"<input type='text' name='serialnum_" + count + "'>" +
"&nbsp;&nbsp;&nbsp;&nbsp;Software/Hardware:&nbsp;&nbsp;" +
"<select name='softhardware_" + count + "'>" +
"<option value='' selected>No Choice</option>" +
"<cfoutput query='getSoftHard'>" + 
"<option value='#pk_softwareHardware#'>#pk_softwareHardware#</option>" + 
"</cfoutput>" + 
"</select>" +
"</td>" +
"</tr>" +
"</table>";

<!--- Adds Extra fields for Description  --->
newdiv.innerHTML = newdiv.innerHTML + 
"<table class='zpExpandedTable' id='resoltable' cellpadding='3' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformutli'>" +
"Description:&nbsp;&nbsp;" + 
"</td>" +
"<td class='descriptionmoveinmulti'>" +
"( You may enter up to 1000 characters. )"+
"<br>" +
"<textarea maxlength='1000' onkeyup='return descriptionmaxlength(this)' onkeydown='return descriptionmaxlength(this)'rows='4' cols='60' name='thedescription_" + count + "'></textarea>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Resolution  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformutli'>" +
"Resolution:&nbsp;&nbsp;" +
"</td>" +
"<td class='resolutionmoveinmulti'>" +
"( You may enter up to 1500 characters. )"+
"<br>" +
"<textarea maxlength='1500' onkeyup='return resolutionmaxlength(this)' onkeydown='return resolutionmaxlength(this)' rows='4' cols='60' name='resolution_" + count + "'></textarea>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Resolution Date, Current Date (for resolution date) and resolution vertified as effective by  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoldatetab' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"Resolution Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
"</td>" +
"<td>" +
"<input type='text' name='resdate_" + count + "' value=''  >&nbsp;&nbsp;" +
 
"&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
"<input type='checkbox' name='currentdateresol_" + count + "' onClick=resdate_" + count + ".value=fill_date()>" +
"</td>" +
"<td>" +
"Resolution Verified as effective by:&nbsp;&nbsp;"  +
"</td>" +
"<td>" +
"<select name='resvertified_" + count + "'>" +
"<option value='' selected>Make A Selection</option>" +
"<cfoutput query='gettech'><option value='#fname# #lname#'>#fname# #lname#</option></cfoutput>" +
"</select>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Vertification Date, Current Date (for vertification date) and resolution vertified as effective by  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"Verification Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
"</td>" +
"<td class='vertificationmoveinmulti'>" +
"<input type='text' name='vertifidate_" + count + "'>&nbsp;&nbsp;" +
"&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
"<input type='checkbox' name='currentdatevert_" + count + "' onClick=vertifidate_" + count + ".value=fill_date()>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Dept/Vendor Responsibility  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td class='red' id='paddingformultitop'>" +
"Dept/Vendor Responsibility*:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  +
"<select name='deptvendor_" + count + "'>" +
"<option value='' selected>Make A Selection</option>" +
"<cfoutput query='getDeptVendor'>" +
"<option value='#pk_deptVendor#'>#pk_deptVendor#</option>" +
" </cfoutput>" +
"</select>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for RMA Data Only  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"RMA Data Only:&nbsp;&nbsp;&nbsp;&nbsp;" +
"</td>" +
"<td class='rmanmoveinmulti'>" +
"( You may enter up to 1000 characters. )"+
"<br/>" +
"<textarea maxlength='1000' onkeyup='return rmamaxlength(this)' onkeydown='return rmamaxlength(this)' rows='4' cols='60' name='rma_" + count + "'></textarea> " +
"</td>" +
"</tr>" +
"</table>" +
"<input type='hidden' name='serialcount' value='" + count + "'>";
 
<!--- Adds Delete to every ticket  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td>" +
"<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
"</td>" +
"</td>" +
"</tr>" +
"</table>";
 
document.getElementById(divName).appendChild(newdiv);
} 
 
<!---Allows us to remove multiple fields --->
function removeElement(divNum) {
  var d = document.getElementById('dynamicInput');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}
</script>


<!---PARTS--->
<script type="text/javascript">
<!---Allows us to add multiple fields for parts --->
function addpartInput(partName){
var parts = document.getElementById('partsInput');
var avalue = document.getElementById('aValue');
var count = (document.getElementById('aValue').value -1)+ 2;
avalue.value = count;
var partdiv = document.createElement('div');
var partIdName = 'parts'+count+'Input';
partdiv.setAttribute('id',partIdName);
 
<!--- Adds Extra fields parts table  --->
partdiv.innerHTML =
"<table class='createticketables' id='spaceup'>" +
"<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
"<tr>" +
"<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
"<td class='red'>" +
"Parts been returned* " +
"<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
"</td>" +
"<td>" +
"<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
"</td>" +
"</tr>" +
"</table>" +
"<table class='createticketables' >" +
"<tr>" +
"<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
"<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
"Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
"<td>On Site:</td>" +
"<td><select name='onsite_" + count +"'>" +
"<option value='No Choice' selected>No Choice</option>" +
"<option value='Yes'>Yes</option>" +
"<option value='No'>No</option>" +
"</select><td>" +
"<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
"<option value='' selected>No Choice</option>" +
"<cfloop from='0' to='10' index='nonsite'><cfoutput>" +
"<option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>" +
"</select><td>" +
"</tr>" +
"</table>" +
"<input type='hidden' name='serialcount' value='" + count + "'>";

 
<!--- Adds Delete to every ticket  --->
partdiv.innerHTML = partdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td>" +
"<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removetheElement(\'"+partIdName+"\')\"></a>" +
"</td>" +
"</td>" +
"</tr>" +
"</table>";
 
document.getElementById(partName).appendChild(partdiv);
} 
 
<!---Allows us to remove multiple fields --->
function removetheElement(divNum) {
  var d = document.getElementById('partsInput');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}

</script>
                      Thank you,
                      Rach

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032
                          #7
                          Remove the partInput div from the HTML and create the div dynamically using createElement (as you've done in addInput) in addpartInput.

                            Comment

                            • bonneylake
                              Contributor
                              • Aug 2008
                              • 769
                              #8
                              Originally posted by acoder
                              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?

                              Code:
                              function addpartInput(partName){
var parts = document.getElementById('partsInput');
var avalue = document.getElementById('aValue');
var count = (document.getElementById('aValue').value -1)+ 2;
avalue.value = count;
var partdiv = document.createElement('div');
var partIdName = 'parts'+count+'Input';
partdiv.setAttribute('id',partIdName);
                              Thank you,
                              Rach

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  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.

                                    Comment

                                    • bonneylake
                                      Contributor
                                      • Aug 2008
                                      • 769
                                      #10
                                      Originally posted by acoder
                                      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
                                      Code:
                                      function addInput(divName){
var dynamic = document.getElementById('dynamicInput');
var thevalue = document.getElementById('theValue');
var count = (document.getElementById('theValue').value -1)+ 2;
thevalue.value = count;
var newdiv = document.createElement('div');
[U]var getparts = document.createElement('div');[/U]
var divIdName = 'dynamic'+count+'Input';
newdiv.setAttribute('id',divIdName);
                                      here is what i tried in the parts function trying to get the line get parts
                                      Code:
                                      function addpartInput(partName){
var parts = document.getElementById('partsInput');
var getparts = document.createElement('div');
var avalue = document.getElementById('aValue');
var count = (document.getElementById('aValue').value -1)+ 2;
avalue.value = count;
var partdiv = document.createElement('thediv');
var partIdName = 'parts'+count+'Input';
partdiv.setAttribute('id',partIdName);
                                      Thank you,
                                      Rach

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          To get a div, you use document.getEle mentById(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.

                                            Comment

                                            • bonneylake
                                              Contributor
                                              • Aug 2008
                                              • 769
                                              #12
                                              Originally posted by acoder
                                              To get a div, you use document.getEle mentById(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

                                              Code:
                                              function addpartInput(partName){
var parts = document.getElementById('partsInput');
var getparts = document.getElementById('div');
var avalue = document.getElementById('aValue');
var count = (document.getElementById('aValue').value -1)+ 2;
avalue.value = count;
var partdiv = document.createElement('thediv');
var partIdName = 'parts'+count+'Input';
partdiv.setAttribute('id',partIdName);
                                              Thank you,
                                              Rach

                                                Comment

                                                • acoder
                                                  Recognized Expert MVP
                                                  • Nov 2006
                                                  • 16032
                                                  #13
                                                  Let me explain. You initially have:
                                                  Code:
                                                  <div id="dynamicInput">
</div>
                                                  Now in addInput, you add a div with ID "dynamic1In put" containing the serial information. Let's say you create another serial, so you have two serials:
                                                  Code:
                                                  <div id="dynamicInput">
  <div id="dynamic1Input">
    <!-- serial info here -->
  </div>
  <div id="dynamic2Input">
    <!-- serial info here -->
  </div>
</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.

                                                    Comment

                                                    • bonneylake
                                                      Contributor
                                                      • Aug 2008
                                                      • 769
                                                      #14
                                                      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
                                                      Code:
                                                      <input type="hidden" value="0" id="theValue" />
<input type="hidden" value="0" id="aValue" />
     <div id="dynamicInput">

     </div>
<!---      All Ticket Information Appears Here--->
  
      <input type="button" class="addticket" value="Add Parts" onClick="addpartInput('dynamicInput');" >
     <input type="button" class="addticket" value="Add Serial" onClick="addInput('dynamicInput');" >
                                                      heres the javascript for serial

                                                      Code:
                                                      <!---Allows us to add serial information multiple times --->
<script type="text/javascript">
<!---Allows us to add multiple fields --->
function addInput(divName){
var dynamic = document.getElementById('dynamicInput');
var thevalue = document.getElementById('theValue');
var count = (document.getElementById('theValue').value -1)+ 2;
thevalue.value = count;
var newdiv = document.createElement('div');
var getparts = document.createElement('div');
var divIdName = 'dynamic'+count+'Input';
newdiv.setAttribute('id',divIdName);
 
<!--- Adds Extra fields for Model No, Product Type, and Type of Hardware Failure  --->
newdiv.innerHTML =
"<table class='zpExpandedTable' id='modeltable'>" +
"<th class='sectiontitletick' colspan='7'>Serial Information "+ count +" </th>" +
"<tr>" +
"<td id='paddingformultitop'>Model No:&nbsp;&nbsp;&nbsp;&nbsp;</td>" +
"</td>" +
"<td>" +
 "<select name='modelno_" + count + "' >" +
 "<option value=''>Make A Selection</option>" +
"<cfoutput query='models'>" + 
"<option value='#model#'>#model#</option>" + 
"</cfoutput>" + 
 "</select>" +
 "</td>" +
 "<td>" +
"&nbsp;&nbsp;&nbsp;&nbsp;Product Type:"  +
"</td>" +
"<td>" +
"<select name='producttype_" + count + "'>" +
"<option value='' selected>No Choice</option>" +
"<cfoutput query='getProdType'>" + 
"<option value='#pk_productType#'>#pk_productType#</option>" + 
"</cfoutput>" + 
"</select>" +
"</td>" +
"<td class='red'>" +
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type Of Hardware Failure*:" +
"</td>" +
"<td>" +
"<select name='hardwarefailure_" + count + "'>" +
"<option value='' selected>Make A Selection</option>" +
"<cfoutput query='getHardwareFail'>" +
"<option value='#pk_hardwareFailure#'>#pk_hardwareFailure#</option>" +
"</cfoutput>" +
"</select>" +
"</td>" +
"</tr>" +
"<table>";
 
<!--- Adds Extra fields for Serial Number and Software/Hardware  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='modeltable'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"Serial Number:&nbsp;&nbsp;" +
"<input type='text' name='serialnum_" + count + "'>" +
"&nbsp;&nbsp;&nbsp;&nbsp;Software/Hardware:&nbsp;&nbsp;" +
"<select name='softhardware_" + count + "'>" +
"<option value='' selected>No Choice</option>" +
"<cfoutput query='getSoftHard'>" + 
"<option value='#pk_softwareHardware#'>#pk_softwareHardware#</option>" + 
"</cfoutput>" + 
"</select>" +
"</td>" +
"</tr>" +
"</table>";

<!--- Adds Extra fields for Description  --->
newdiv.innerHTML = newdiv.innerHTML + 
"<table class='zpExpandedTable' id='resoltable' cellpadding='3' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformutli'>" +
"Description:&nbsp;&nbsp;" + 
"</td>" +
"<td class='descriptionmoveinmulti'>" +
"( You may enter up to 1000 characters. )"+
"<br>" +
"<textarea maxlength='1000' onkeyup='return descriptionmaxlength(this)' onkeydown='return descriptionmaxlength(this)'rows='4' cols='60' name='thedescription_" + count + "'></textarea>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Resolution  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformutli'>" +
"Resolution:&nbsp;&nbsp;" +
"</td>" +
"<td class='resolutionmoveinmulti'>" +
"( You may enter up to 1500 characters. )"+
"<br>" +
"<textarea maxlength='1500' onkeyup='return resolutionmaxlength(this)' onkeydown='return resolutionmaxlength(this)' rows='4' cols='60' name='resolution_" + count + "'></textarea>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Resolution Date, Current Date (for resolution date) and resolution vertified as effective by  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoldatetab' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"Resolution Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
"</td>" +
"<td>" +
"<input type='text' name='resdate_" + count + "' value=''  >&nbsp;&nbsp;" +
 
"&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
"<input type='checkbox' name='currentdateresol_" + count + "' onClick=resdate_" + count + ".value=fill_date()>" +
"</td>" +
"<td>" +
"Resolution Verified as effective by:&nbsp;&nbsp;"  +
"</td>" +
"<td>" +
"<select name='resvertified_" + count + "'>" +
"<option value='' selected>Make A Selection</option>" +
"<cfoutput query='gettech'><option value='#fname# #lname#'>#fname# #lname#</option></cfoutput>" +
"</select>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Vertification Date, Current Date (for vertification date) and resolution vertified as effective by  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"Verification Date:&nbsp;(MM/DD/YYYY)&nbsp;&nbsp;" +
"</td>" +
"<td class='vertificationmoveinmulti'>" +
"<input type='text' name='vertifidate_" + count + "'>&nbsp;&nbsp;" +
"&nbsp;&nbsp;&nbsp;&nbsp;Current Date:&nbsp;&nbsp;" +
"<input type='checkbox' name='currentdatevert_" + count + "' onClick=vertifidate_" + count + ".value=fill_date()>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for Dept/Vendor Responsibility  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td class='red' id='paddingformultitop'>" +
"Dept/Vendor Responsibility*:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  +
"<select name='deptvendor_" + count + "'>" +
"<option value='' selected>Make A Selection</option>" +
"<cfoutput query='getDeptVendor'>" +
"<option value='#pk_deptVendor#'>#pk_deptVendor#</option>" +
" </cfoutput>" +
"</select>" +
"</td>" +
"</tr>" +
"</table>";
 
<!--- Adds Extra fields for RMA Data Only  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td id='paddingformultitop'>" +
"RMA Data Only:&nbsp;&nbsp;&nbsp;&nbsp;" +
"</td>" +
"<td class='rmanmoveinmulti'>" +
"( You may enter up to 1000 characters. )"+
"<br/>" +
"<textarea maxlength='1000' onkeyup='return rmamaxlength(this)' onkeydown='return rmamaxlength(this)' rows='4' cols='60' name='rma_" + count + "'></textarea> " +
"</td>" +
"</tr>" +
"</table>" +
"<input type='hidden' name='serialcount' value='" + count + "'>";
 
<!--- Adds Delete to every ticket  --->
newdiv.innerHTML = newdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td>" +
"<input type='button' class='removeticket' value='Remove Serial &quot;"+count +"&quot;' onclick=\"removeElement(\'"+divIdName+"\')\"></a>" +
"</td>" +
"</td>" +
"</tr>" +
"</table>";
 
document.getElementById(divName).appendChild(newdiv);
} 
 
<!---Allows us to remove multiple fields --->
function removeElement(divNum) {
  var d = document.getElementById('dynamicInput');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}
</script>
                                                      javascript for parts
                                                      Code:
                                                      <!---PARTS--->
<script type="text/javascript">
<!---Adds multiple fields for parts --->
function addpartInput(partName){
var parts = document.getElementById('dynamicInput');
var getparts = document.getElementById('div');
var avalue = document.getElementById('aValue');
var count = (document.getElementById('aValue').value -1)+ 2;
avalue.value = count;
var partdiv = document.createElement('thediv');
var partIdName = 'dynamic'+count+'Input';
partdiv.setAttribute('id',partIdName);
 
<!--- Adds Extra fields for parts table  --->
partdiv.innerHTML =
"<table class='createticketables' id='spaceup'>" +
"<th class='sectiontitle' colspan='7'>Parts Information "+ count +"</th>" +
"<tr>" +
"<td class='indent' id='formfieldpadding'>HC P/N:&nbsp;&nbsp;&nbsp;<input type='text' name='hcpn_" + count + "' style='margin:0px'></td>" +
"<td class='red'>" +
"Parts been returned* " +
"<input type='checkbox' name='partsreturn_" + count +"' value='1'/>" +
"</td>" +
"<td>" +
"<td class='indent'>Defective<input type='checkbox' name='defective_" + count +"' value='1'/></td>" +
"</td>" +
"</tr>" +
"</table>" +
"<table class='createticketables' >" +
"<tr>" +
"<td class='indent' id='formfieldpadding'>Follow up Date:(MM/DD/YYYY)&nbsp;&nbsp;&nbsp;"  +
"<input type='text' name='followdate_" + count + "' value='' size='8'/>&nbsp;&nbsp;&nbsp;" +
"Current Date<input type='checkbox' name='followcheck_"+ count +"' value='' onClick='followdate.value=fill_date()'/></td>" +
"<td>On Site:</td>" +
"<td><select name='onsite_" + count +"'>" +
"<option value='No Choice' selected>No Choice</option>" +
"<option value='Yes'>Yes</option>" +
"<option value='No'>No</option>" +
"</select><td>" +
"<td># of Onsite:</td><td><select name='numonsite_" + count +"'>" +
"<option value='' selected>No Choice</option>" +
"<cfloop from='0' to='10' index='nonsite'><cfoutput>" +
"<option value='#nonsite#'>#nonsite#</option></cfoutput></cfloop>" +
"</select><td>" +
"</tr>" +
"</table>" +
"<input type='hidden' name='serialcount' value='" + count + "'>";

 
<!--- Adds Delete to every ticket  --->
partdiv.innerHTML = partdiv.innerHTML +
"<table class='zpExpandedTable' id='resoltable' cellpadding='1' cellspacing='0'>" +
"<tr>" +
"<td>" +
"<input type='button' class='removeticket' value='Remove Parts &quot;"+count +"&quot;' onclick=\"removetheElement(\'"+partIdName+"\')\"></a>" +
"</td>" +
"</td>" +
"</tr>" +
"</table>";
 
document.getElementById(partName).appendChild(partdiv);
} 
 
<!---Allows us to remove multiple fields --->
function removetheElement(divNum) {
  var d = document.getElementById('partsInput');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}

</script>

                                                      Thank you,
                                                      Rach

                                                        Comment

                                                        • acoder
                                                          Recognized Expert MVP
                                                          • Nov 2006
                                                          • 16032
                                                          #15
                                                          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 "dynamicInp ut" 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.

                                                            Comment

                                                            Previous 1 2 3 4 7 template Next
                                                            Working...