Home > ColdFusion Tutorials > Displaying Data > Using Dynamic Forms

Using Dynamic Forms

Comment on this Tutorial

Here's the situation
You have a form that is dynamically generated. The number of form fields is not known until run time. It might have one field, it could have ten, who knows? This tutorial will show you some of the basics of working with dynamic forms.

Let's make a form script in a file called frmDynamic.cfm. I am going to make a very simple dynamically generated form with between 2 and 10 fields using the randRange() function. You will generate your form based on your sites needs.

Start with the form HTML posting to file we will create called frmActDynamic.cfm. Start a cfoutput tag and some non-dynamic form fields.

<form action="frmActDynamic.cfm" method="post">
   first name <input type="text" name="fname" /><br/>
   last name <input type="text" name="lname" /><br/>
   zip <input type="text" name="zip" /><br/>
   <cfoutput>


I am making the form using a loop from 1 to a random number between 2 and 10. Your form will be created based on the needs of your site, a value from a database, a form for each row of a query, etc..
The field name is going to have a constant name as a prefix, and the loop index as a unique identifier for the form.
Close the loop.
Outside of the loop add a hidden field names fieldCount, and a value of i. This will let us know how many fields there are in this set of dynamic fields. This is OPTIONAL, and I will also explain how to read the form variables with a counter or without. If you are coding the form page yourself, I find it easier to code in a counter like this. If the form is posting to your site from someone else's, and you have no control over it, the second method I will show in the action page section will show you what to do also.
End the cfoutput, add a submit button, and close the form tag.

      <cfloop from="1" to="#randRange(2,10)#" index="i">
         field #i#. <input type="text" name="field_#i#" /><br/>
      </cfloop>
      <input type="hidden" name="fieldCount" value="#i#" />
   </cfoutput>
   <input type="submit" name="sendForm" value="Go">
</form>



Now let's build the action page. Since I don't have anything to actually do with the form variables, I will just use cfoutput to display them. You can do whatever you want with yours.

Start cfoutput so we can see whats going on.

<cfoutput>


METHOD 1: Using a hidden field counter.

Start a loop from 1 to #form.fieldCount#, index of i.
Inside the loop we will be able to get the values of our dynamically created form fields. Remember, the FORM scope is nothing more than a structure with a special use. We can access the FORM scope variables as we would any other structure in ColdFusion. Using the bracket notation, we can call the form structure: FORM["fieldname"]. In this case "fieldname" is dynamic, so we call it as FORM["field_"&i]
Close the loop and close cfoutput.
   <cfloop from="1" to="#form.fieldCount#" index="i">
      field #i# = #FORM["field_"&i]# <br/>
   </cfloop>
</cfoutput>

   
   
Method 2: No hidden field counter.

In this method we don't know how many fields there will be in our group of dynamic fields. We must now loop through all the fields sent to the action page and pick out the ones we need.
The first methos also relies on the fiel names to have a sequential numeric naming system. This method only needs a field name prefix to look for.

Start a loop using the collection attribute to loop through the form scope.

<cfloop collection="#form#" item="i">


I like to use a delimiter such as the underscore to seperate the field group name from the unique number or name of the field. With a set delimiter, you can simply use listFirst() to check if the form name is one we want or not.
Now you can see how the variables are accessed. The loop index is the form field name. Usinf the bracket notation and accessing the form as a structure, you can get the form field value.
Close the loop, close the cfoutput and your done! An alternate method for the cfif condition below would be to do <cfif left(i,5) IS "field">#i# = #form[i]#<br/></cfif>. This way would work wether or not there was a descernable delimiter in the form field names.

   <cfif listFirst(i,"_") IS "field">
      #i# = #form[i]#<br/>
   </cfif>
</cfloop>
</cfoutput>


____________

Back to the Top 

Comments

Leave this field empty
No comments on this tutorial. Be the first to leave a comment by using the form above.

A lot-o-nothin STORE (Demo & Test Area - but feel free to purchase - it's all really for sale!)

Check Page Ranking