[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Coldfusion: Add form fields without reloading page

Posted on 2007-05-18
11
Medium Priority
?
1,177 Views
Last Modified: 2013-12-24
I have a form that contains authors and books.  My issue is that there is an undetermined number of authors and books that the user may want to submit.  How do I go about creating a form that depending on the number of author/book entries, the user can simply add another form field by clicking an add button.  What would really be nice is to do this without reloading the page.  

Any direction would be greatly appreciated.
0
Comment
Question by:jabronicus
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
11 Comments
 

Author Comment

by:jabronicus
ID: 19116391
Here is what I have come up with so far.  The following adds the form fields like I need.

<script type="text/javascript" language="Javascript">
    var counter = 0;
    function addnew(){
        counter += 1;
        document.getElementById("data").innerHTML = document.getElementById("data").innerHTML +
            "<input type=text name=option" + counter +" value=option" + counter + ">" +
            "<input type=text name=value" + counter + " value=value" + counter + "><br>";
    }
    </script>

<div id="data">
  <input type="text" name="option0" value="option0" />
  <input type="text" name="value0" value="value0" /><br />
</div>
<div style="clear:both;">
  <input type="submit" name="submitCalendarUpdate" value="Next >">
  <input id="addAnother" type="button" name="addAnother" value="Add Another Line"  onclick="javascript:addnew();">
</div>
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 19116605
Looks good, I tested it and it seems to work.  What's the question?
0
 

Author Comment

by:jabronicus
ID: 19116852
I am trying to figure out now how to loop through those input fields to submit multiple rows to a single table
0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 39

Accepted Solution

by:
gdemaria earned 1800 total points
ID: 19116951
When you submit the form, your action page will receive an "array" of form variables, for example  FirstName1, FirstName2, FirstName3, etc..   To process these, create a cfloop, test for the existance of a variable, if it exists, insert/update the record.   All fields for the same record will have the same number on the end (that is firstname1 corresponds to lastname1, etc) so you will insert/update them as one set, then move on to the next counter...


<cfloop index="kk" from="1" to="99">
  <cfif IsDefined('form.lastName#kk#')>
    <cfset variables.firstName = form['firstName' & kk]>
    <cfset variables.lastName  = form['lastName' & kk]>
    <cfset variables.username  = form['username' & kk]>
    <cfset variables.userID    = form['userID' & kk]>

   <cfif len(variables.userID)> <!--- update --->
        <cfquery name="UpdateUser" datasource="DSN">
          update user
              set firstName = '#variables.firstName#'
                , lastName  = '#variables.lastName#'
                  , userName  = '#variables.username#'
             where userID = #val(variables.UserID)#
        </cfquery>
    <cfelse> <!--- no ID, so insert --->
        <cfquery name="UpdateUser" datasource="DSN">
          insert into user (firstname, lastname, username)
            values ('#variables.firstName#','#variables.lastName#','#variables.username#')
        </cfquery>
     </cfif>
  </cfif>  
</cfloop>
0
 

Author Comment

by:jabronicus
ID: 19117838
Thanks for the help.  I am still having a few problems.
1.  When I use the add another line button I lose any information that I put into the form fields
2. I am not getting the Form.Composition#kk# defined so the Update/Insert is never running.  

Here is the code that I have thus far.
calendar.cfm
----------------------------------------------------
<form name="calendarUpdate" action="calendar2.cfm" method="post">
<div id="data">
  <input type="text" name="ComposerName" value="#FORM.ComposerName#"  />
  <input type="text" name="CompositionName" value="#FORM.CompositionName#" /><br />
</div>
<input type="hidden" name="ProgramID" value="#qConcertInfo.ProgramID#" />
<input type="submit" name="submitCalendarUpdate" value="Next >">
<input id="addAnother" type="button" name="addAnother" value="Add Another Line" onclick="javascript:addnew();">
</form>

calendar2.cfm
----------------------------------------
<cfloop index="kk" from="1" to="99">
  <cfif IsDefined('FORM.CompositionName#kk#')>
      <cfset variables.CompositionName = form['CompositionName'& kk]>
      <cfset variables.ProgramID = form['ProgramID' & kk]>
            
      <cfif len(variables.ProgramID)>
      <!---Update--->
            <cfquery name="UpdateComposition" datasource="#APPLICATION.datasource#">
            UPDATE compositions
            SET CompositionName = '#variables.CompositionName#'
            WHERE ProgramID = #val(variables.ProgramID)#
            </cfquery>
      <cfelse>
            <cfquery name="insComposition" datasource="#APPLICATION.datasource#">
            INSERT INTO compositions (
                                          CompID
                                          ,ProgramID
                                          ,CompositionName
                                    )
            VALUES (
                        '#CreateUUID()#'
                        ,'#FORM.ProgramID#'
                        ,'#FORM.CompositionName#'
                        )
      </cfquery>
  </cfif>            
</cfif>
</cfloop>
0
 
LVL 39

Assisted Solution

by:gdemaria
gdemaria earned 1800 total points
ID: 19117932
> 1. When I use the add another line button I lose any information that I put into the form fields

I am trying to reproduce this - I open the form, it starts with one record (two fields).  I change the field values to Hello and World and click the "Add" button.  A second record appears, but the first record's values are still Hello and World.   Could you explain more of what you are experiencing and what you want to happen?

>  I am not getting the Form.Composition#kk# defined so the Update/Insert is never running.  

Looks like the field you're starting with isn't named with a 1 after it.   Your CFLOOP is looking for names only with numbers after them.   You need to either change your action to look for the non numbered name as well, or start off your tag with a name1 like this...
 
  <input type="text" name="ComposerName1" value="#FORM.ComposerName#"  />
  <input type="text" name="CompositionName1" value="#FORM.CompositionName#" />
0
 

Author Comment

by:jabronicus
ID: 19118389
1. interesting...works in IE but not in Firefox

2.  Changed input field to ComposerName1- now the cfif statement works. I modified my sql statement a bit and took out the update.  All I want to do on this page is INSERT.  I am only getting one record entered into the database..doesn't seem to be looping through the added text inputs

<cfloop index="kk" from="1" to="99">
      <cfif IsDefined('FORM.CompositionName#kk#')>
            <cfset variables.CompositionName = form['CompositionName'& kk]>
            <cfset variables.ProgramID = form['ProgramID']>
                        <cfquery name="insComposition" datasource="#APPLICATION.datasource#">
                              INSERT INTO compositions (
                                                CompID
                                                ,ProgramID
                                                ,CompositionName
                                                )
                              VALUES (
                                                      '#CreateUUID()#'
                                                      ,'#FORM.ProgramID#'
                                                      ,'#variables.CompositionName#'
                                                      )
                        </cfquery>            
            </cfif>
</cfloop>
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 19119150
For #2, examine the debug information at the bottom of the page (assuming you have debug turned on in your CFIDE/administrator - which you should for development) and see what the FORM scoped variables are showing.  That will tell you if you have the right fields being sent to the action page from the form page.
0
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 200 total points
ID: 19119167
jabronicus:

-----------------------------------------------------
>.... Changed input field to ComposerName1
-----------------------------------------------------
If the first field is "ComposerName1", then the javascript counter should also start at "1" (not 0)

<script type="text/javascript" language="Javascript">
    var counter = 1;
</script>


-----------------------------------------------------
>.. I am only getting one record entered into the database..doesn't seem
> to be looping  through the added text inputs
-----------------------------------------------------
gdemaria's suggestions should work.  So I'm not sure why that's happening, unless your javascript code isn't adding a counter number to the text field names.  

-----------------------------------------------------
>interesting...works in IE but not in Firefox
-----------------------------------------------------
Try using document.createElement()  instead of the innerHTML() method (see below)

By the way, I noticed you're not doing anything with the ComposerName field on the action page. Is that intentional?

<!--- form page ---->
<script type="text/javascript" language="Javascript">
    function addnew(){
            var newNode;
            //** note the field ID's are case sensitive **
            var outerDiv = document.getElementById('data');
            var rowsField = document.getElementById('NumberOfRows');

            //increment the number of rows
            var counter = parseInt(rowsField.value) + 1;

            //add the "composername" textbox
            newNode = document.createElement('input');
            newNode.setAttribute('type', 'text');
            newNode.setAttribute('name', 'ComposerName'+ counter);
            newNode.setAttribute('value', 'ComposerName'+ counter);
            outerDiv.appendChild(newNode);
            
            //add the "compositionname" textbox
            newNode = document.createElement('input');
            newNode.setAttribute('type', 'text');
            newNode.setAttribute('name', 'CompositionName'+ counter);
            newNode.setAttribute('value', 'CompositionName'+ counter);
            outerDiv.appendChild(newNode);

            //add a line break
            newNode = document.createElement('br');
            outerDiv.appendChild(newNode);
            
            //increment the hidden field value
            rowsField.value = counter;
    }
 </script>

<!--- The starting counter value is "1" --->
<cfset Counter = 1>
<form name="calendarUpdate" action="calendar2.cfm" method="post">
   <cfoutput>
   <div id="data">
       <!--- append row number to first set of fields --->
     <input type="text" name="ComposerName#Counter#" value="#FORM.ComposerName#"  />
     <input type="text" name="CompositionName#Counter#" value="#FORM.CompositionName#" /><br />
   </div>
   <!--- store the number of rows in a hidden field --->
   <input type="hidden" name="NumberOfRows" id="NumberOfRows" value="#val(Counter)#">
   <input type="hidden" name="ProgramID" value="#qConcertInfo.ProgramID#" />
   </cfoutput>
   <div style="clear:both;">
     <input type="submit" name="submitCalendarUpdate" value="Next >">
     <input id="addAnother" type="button" name="addAnother" value="Add Another Line"  onclick="javascript:addnew();">
   </div>
</form>

<!--- calendar2.cfm --->
<cfparam name="form.NumberOfRows" default="0" />

<cfloop from="1" to="#val(form.NumberOfRows)#" index="kk">
   <cfif IsDefined("form.CompositionName#kk#") >
       <cfset variables.CompositionName = form["CompositionName"& kk]>
        <cfquery name="insComposition" datasource="#APPLICATION.datasource#">
           INSERT INTO compositions
               (
                       CompID
                ,ProgramID
                ,CompositionName
            )
            VALUES (
                  '#CreateUUID()#'
                ,'#FORM.ProgramID#'
                ,'#variables.CompositionName#'
            )
            </cfquery>
      </cfif>
</cfloop>


0
 

Author Comment

by:jabronicus
ID: 19119246
gdemaria

The loop is working now...had an error in javascript.

agx
Thanks for the var count help fixed my INSERTS.  Haven't worked on the Firefox issue yet.  Thanks for the input.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 19119284
The new javascript code worked for me in both IE  and Firefox so give it a whirl.  Good Luck! Glad I could help.  
0

Featured Post

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, I was working on some optimization and spam-stopping techniques when I encountered Ben Nadel's post to reduce spam feature using Math (http://www.bennadel.com/blog/197-How-I-Stop-Spammers-On-My-ColdFusion-Blog.htm). While this method is not o…
Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question