The rows I am filling out are near the bottom of the form. Each time I click the add rows button the page reloads and puts me at the top again. I have to then page down to fill in data to the added row. I would like the cursor to be planted in the added row ready for input. Any suggestions?
By: Jennifer Davis
<!--- Dynamically Add Rows To a Form --->
<!--- This was a part of a system I wrote to create a purchase order
that gives the user the ability to add multiple items to it --->
<!--- The user enters the data, clicks on the "Add Another" Button,
the page reloads, and a new row is added to the form and the previous data entered is kept intact --->
<!--- Checks to see if form.numba is defined and if it is, adds one to the amount. If its not, it sets it to 1.
This keeps track of how many lines the user has added --->
<cfif isdefined ("form.numba")>
<cfset getnumba = form.numba +
1>
<cfelse>
<cfset getnumba = 1>
</cfif>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<!--- If there is more than one record, it returns the cursor to the new row --->
<cfif getnumba GT
1>
<cfset focusonme = " document.all.osform.partno"
& getnumba & ".focus();">
<cfelse>
<cfset focusonme = "document.all.osform.partno.focus();">
</cfif>
<cfoutput>
<!--- function dofocusthing essentially puts the cursor either on the original first row
(if nothing has been entered) or if "Add Another" has been clicked and a new row created
it returns it to the first field of the new row --->
<!--- fuction submitform submits the form --->
<!--- function getnutherline reloads the page with the information stored in it--->
<script type="text/javascript">
function dofocusthing(){
#focusonme#
}
function submitform(){
document.all.osform.action = 'act_add.cfm';
document.all.osform.submit();
}
function getnutherline(){
document.all.osform.action = 'dsp_form2.cfm';
document.all.osform.submit();
}
</script>
</cfoutput>
</head>
<!--- Tells it where to stick the cursor --->
<body onload="javascript:dofocusthing();">
<!--- Create the form --->
<cfform name="osform"
action="act_add.cfm" >
<table width="90%"
rules="none"
align="center">
<tr>
<td class="five">Part #</td>
<td class="five">Quantity</td>
<td class="five">Unit Cost</td>
</tr>
<cfoutput>
<!--- Gets the value of getnumba from above --->
<input
type="hidden"
name="numba"
value="#getnumba#">
<!--- Loop Through from 1 to the number above --->
<cfloop
from="1" to="#getnumba#"
index="idx">
<!--- At first, it displays the original one row form --->
<!--- User enters the data and hits "Add Another" --->
<!--- The page reloads with the data already entered and creates a new blank row that is ready for data entry --->
<tr>
<cfif isdefined ("form.partno#idx#")>
<Td class="two"><input type="text" name="partno#idx#"
value="#evaluate("form.partno#idx#")#"></TD>
<cfelse>
<Td class="two"><cfinput type="text"
name="partno#idx#"></TD>
</cfif>
<cfif isdefined ("form.quantity#idx#")>
<Td class="two"><cfinput type="text" name="quantity#idx#"
value="#evaluate("form.quantity#idx#")#"></TD>
<cfelse>
<Td class="two"><cfinput type="text"
name="quantity#idx#"></TD>
</cfif>
<cfif isdefined ("form.cost#idx#")>
<Td class="two"><cfinput type="text" name="cost#idx#"
value="#evaluate("form.cost#idx#")#"></TD>
<cfelse>
<Td class="two"><cfinput type="text"
name="cost#idx#"></TD>
</cfif>
</tr>
</cfloop>
</cfoutput>
<tr>
<td class="two"
colspan="8"><input type="button" name="add" value="Add Another"
onClick="javascript:getnutherline();"></td>
</tr>
</table>
<table width="90%"
align="center">
<tr>
<td><input type="button" name="submitformresult" value="Submit Form"
onclick="javascript:submitform();"></td>
</tr>
</table>
</cfform>
</body>
</html>
<!--- act_add.cfm --->
<!--- How to Insert the Data Into A Table --->
<!--- For each row entered, it loops through each row, evaluates the fields and it inserts the data one row at a time --->
<cfloop from="1"
to="#form.numba#"
index="idx">
<cfset getcost = evaluate("form.cost" & idx)>
<cfset getpartno = evaluate("form.partno" & idx)>
<cfset getquantity = evaluate("form.quantity" & idx)>
<cfquery name="data"
datasource="#application.dsn#">
insert into data (unitcost,partno,quantity)
values (#getcost#,'#getpartno#','#getquantity#')
</cfquery>
</cfloop>
About This Tutorial
Author: Jennifer Davis
Total Views: 43,418
Submission Date: February 21, 2005
Last Update Date: June 05, 2009
All Tutorials By This Autor: 2
Skill Level: Beginner
Platforms Tested: CF5Total Views: 43,418
Submission Date: February 21, 2005
Last Update Date: June 05, 2009
All Tutorials By This Autor: 2
Discuss This Tutorial
-
-
I am using above code in my page....i am not able to add form field validation. If user forgot add value in one textbox, i want to validate and show a message. How can i do?. i can't use cfinput default message validation. I am not using cfinput...i am using input in my page. I want javascipt to validate dynamic elements in the page.
-
Can this be used to add 3 form rows (
) at a time? I need to make one of the fields in this form a dynamic drop down list showing locations. Anybody that can help would be great. Thanks
Can this code be used with other form elements (i.e. textareas, dropdown, checkboxes)?
If you wanting to submit the form to the same page (having the page reload itself), you might also try posting to #cgi.scriptname#.
found it. needed output tags around the rows.
I want to output this contents that gets entered on the first page to appear in a second page that would be part of an html email that would be generated. But I just keep getting rows of #getcost# #getpartno# #getquantity# with no values. Please help as it's an urgent project. Thanks.
I was correct in changing it to add_tracks.cfm, blank fields was a typo. So the solution is to change dsp_form2.cfm the name of your currenty document.
I was trying to follow this tutorial and found that there is no dsp_form2.cfm that is called for in the "getnutherline" function. I set it to be add_tracks.cfm cause that is the name of my page that the form is on so it just reloads its self but that doesn't work. The page reloads with a new row to add data but the previous rows are blank. Any suggestions?
Advertisement
Sponsored By...
Powered By...
© 2002-2012 EasyCFM, LLC. All rights reserved.
You are 1 of 645 active visitors.
