Link to home
Start Free TrialLog in
Avatar of jabronicus
jabronicus

asked on

Coldfusion: Add form fields without reloading page

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.
Avatar of jabronicus
jabronicus

ASKER

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>
Avatar of gdemaria
Looks good, I tested it and it seems to work.  What's the question?
I am trying to figure out now how to loop through those input fields to submit multiple rows to a single table
ASKER CERTIFIED SOLUTION
Avatar of gdemaria
gdemaria
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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>
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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>
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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
The new javascript code worked for me in both IE  and Firefox so give it a whirl.  Good Luck! Glad I could help.