Topic: Question on Tutorial to Add Multiple Records


DancingCeal    -- 01-20-2009 @ 4:29 PM
  The tutorial "Adding Multiple Records to a Table" by Mike Daughherty was very good. I was hoping to modify it so I could use it for my work but couldn't figure out how.

The tutorial shows 3 pages. I would like to eliminate the first page, if possible. The code on page one has a screen where the user types the amount of records they want to enter.

My users don't know or care. They just want to enter more than one record at a time. They would prefer to finish entering one record and a new blank one "magically" appears. If they decide not to complete the next record, they can press the sbumit button.

Or maybe I can provide a number for them, using this tutorial? For instance, can I have 10 empty blank lines, ready for them to complete with new records?

Thanks.





Cecilia, Queen of the Workarounds


Webmaster    -- 01-21-2009 @ 1:05 PM
  The simplest solution of course would be to pre-load the page with the 10 sections and then process them on the fly.

<cfparam name="url.numOfEntries" default="10" />
<form action="save.cfm?numOfEntries=#url.numOfEntries#" method="post">
<table>
<cfloop from="1" to="#url.numOfEntries#" index="i">
    <tr>
         <td colspan="2" class="header">Record #i#</td>
    </tr>
     <tr>
         <td>Name:</td>
         <td><input type="text" name="name_#i#" value="" /></td>
    </tr>
     <tr>
         <td>Email:</td>
         <td><input type="text" name="email_#i#" value="" /></td>
    </tr>
</cfloop>
     <tr>
         <td> </td>
         <td><input type="submit" value="Save" /></td>
    </tr>
</table>
</form>


Then on the save page: save.cfm

<cfloop from="1" to="#url.numOfEntries#" index="i">
     <cfscript>
          tName = form['name_'&i];
          tEmail = form['email_'&i];
     </cfscript>
    
    <cfif len(trim(tName)) OR len(trim(tEmail))>
        <cfquery name="qInsertMember" datasource="yourDSN">
            insert into members (name, email)
            values ('#tName#', '#tEmail#');
        </cfquery>
    </cfif>
</cfloop>



Now if you wanted to add effects like "add new" etc.. you can do this:

<cfimport prefix="ui" taglib="/ui" />

<ui:pagewrap authenticate="true">

     MEMBERS ONLY

</ui:pagewrap>

<cfparam name="url.numOfEntries" default="10" />
<form action="save.cfm?numOfEntries=#url.numOfEntries#" method="post">
<table>
<cfloop from="1" to="#url.numOfEntries#" index="i">
    <tr id="record_#i#_header" style="display:none;">
         <td colspan="2" class="header">Record #i#</td>
    </tr>
     <tr id="record_#i#_name" style="display:none;">
         <td>Name:</td>
         <td><input type="text" name="name_#i#" value="" /></td>
    </tr>
     <tr id="record_#i#_email" style="display:none;">
         <td>Email:</td>
         <td><input type="text" name="email_#i#" value="" /></td>
    </tr>
</cfloop>
     <tr>
         <td> </td>
         <td><input type="submit" value="Save" /></td>
    </tr>
</table>
</form>

<script language="javascript">
     //define which one to show
     var tCurrentElementDisplayed = 0;
     
     function showNewField(){
          
          //define the elements to show
          var tHeader = eval(document.getElementById('record_'+tCurrentElementDisplayed+'_header'));
          var tName = eval(document.getElementById('record_'+tCurrentElementDisplayed+'_name'));
          var tEmail = eval(document.getElementById('record_'+tCurrentElementDisplayed+'_email'));
          
          //show a new one
          tHeader.style.display="";
          tName.style.display="";
          tEmail.style.display="";
          
          //now set the tCurrentElementDisplayed to the current id
          tCurrentElementDisplayed=tCurrentElementDisplayed+1;
     }
     
     // on page load, show the first field
     window.onload == showNewField(tCurrentElementDisplayed+1);

</script>


Then on the save page: save.cfm

<cfloop from="1" to="#url.numOfEntries#" index="i">
     <cfscript>
          tName = form['name_'&i];
          tEmail = form['email_'&i];
     </cfscript>
    
    <cfif len(trim(tName)) OR len(trim(tEmail))>
        <cfquery name="qInsertMember" datasource="yourDSN">
            insert into members (name, email)
            values ('#tName#', '#tEmail#');
        </cfquery>
    </cfif>
</cfloop>



Keep in mind that I wrote this in the forum box, so it's not tested but should show you the general concept.

Let me know if you have any questions!

Pablo Varando
Senior Application Architect
EasyCFM.COM, LLC.

904.483.1457 \\ mobile
webmaster@easycfm.com \\email

\m/ (>.<) \m/
--- rock on ---


DancingCeal    -- 01-22-2009 @ 11:51 AM
  Thanks very much for your reply. I couldnt' get either the simple code or advanced code to work but don't worry about it. I wouldn't be able to support it anyway because I don't use that much JavaScript or any CScript. However, I plan to use the other tutorial on "a datagrid like VB.net" because that has almost everything I need.



Cecilia, Queen of the Workarounds


EasyCFM.COM ColdFusion Forums : http://archive.easycfm.com/forums
Topic: http://archive.easycfm.com/forums/viewmessages.cfm?Forum=10&Topic=13996