html - Getting Form fields that were added using Javascript -
i using code below add in new product line when user clicks on "add new item", once submit form added rows found.
i have tried dumping form , form fields appear ones on page once has loaded cannot data rest of rows.
i have tried moving form tags around without luck
below page script use add in new rows:
<cfinclude template="header.cfm"> <cfparam name="form.step" default="1"> <cfparam name="form.submit" default=""> <script type='text/javascript'> //<![cdata[ $(document).ready(function() { var currentitem = 1; $('#addnew').click(function(){ currentitem++; $('#items').val(currentitem); var strtoadd = '<tr><td class="copy" valign="top">item name:</td><td><input type="text" name="itemname'+currentitem+'" id="itemname'+currentitem+'" required="yes" message="please enter name" class="textblock"></td></tr><tr><td class="copy" valign="top">item description:</td><td><input type="text" name="itemdesc'+currentitem+'" id="itemdesc'+currentitem+'" required="yes" message="please enter description" class="textblock"></td></tr><tr><td class="copy" valign="top">quantity</td><td><input type="text" name="quantity'+currentitem+'" id="quantity'+currentitem+'" required="yes" message="please enter quantity" class="textblock"></td></tr><tr><td class="copy" valign="top">product code:</td><td><input type="text" name="code'+currentitem+'" id="code'+currentitem+'" required="yes" message="please enter code" class="textblock"></td></tr><tr><td class="copy" valign="top">price:</td><td><input type="text" name="price'+currentitem+'" id="price'+currentitem+'" required="yes" message="please enter price" class="textblock"></td></tr>'; $('#data').append(strtoadd); }); }); //]]> </script> <table border="0" cellpadding="0" cellspacing="1" width="100%" class="border" align="center"> <tr> <td class="copywhite" align="left" background="images/tab_bg.gif" colspan="2">add new invoice</td> </tr> <cfoutput> <cfif form.step eq 1> <form method="post" action="inv_new.cfm" enctype="multipart/form-data"> <cfquery name="get_vendors" datasource="#application.db#"> select * tblpassvendor vendoractive = 1 , companyid = #session.companyid# </cfquery> <tr> <td class="copy" valign="top">invoice using:</td> <td> <select name="invby"> <cfloop query="get_vendors"> <option value="#vendorid#">#vendorname#</option> </cfloop> </select> </td> </tr> <tr> <td class="copy" align="center" colspan="2"> <input type="submit" name="submit" value="submit" class="submitbutton"> <input type="hidden" name="step" value="2" /> <input type="reset" name="reset" value="reset" class="submitbutton"> </td> </tr> </form> </cfif> <cfif form.step eq 2> <form method="post" action="inv_new.cfm" enctype="multipart/form-data"> <input type="hidden" name="vendor" value="#form.invby#" /> <tr> <td class="copy" valign="top">order details:</td> <td> </td> </tr> <tr> <td class="copy" valign="top">reference number:</td> <td> <input type="text" name="refnum" required="yes" message="please enter user name" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">billing details:</td> <td> </td> </tr> <tr> <td class="copy" valign="top">name:</td> <td> <input type="text" name="name" required="yes" message="please enter name" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">surname:</td> <td> <input type="text" name="lname" required="yes" message="please enter surname" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">tel:</td> <td> <input type="text" name="tel" required="yes" message="please enter tel" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">email:</td> <td> <input type="text" name="email" required="yes" message="please enter email" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">address line 1:</td> <td> <input type="text" name="addr1" required="yes" message="please enter address line 1" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">address line 2:</td> <td> <input type="text" name="addr2" required="yes" message="please enter address line 2" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">city/town:</td> <td> <input type="text" name="city" required="yes" message="please enter city/town" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">province/region:</td> <td> <input type="text" name="region" required="yes" message="please enter province/region" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">country:</td> <td> <input type="text" name="country" required="yes" message="please enter country" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">zip/postal code:</td> <td> <input type="text" name="zip" required="yes" message="please enter zip/postal code" class="textblock"> </td> </tr> <tr> <td class="copy" align="center" colspan="2"> <input type="submit" name="submit" value="submit" class="submitbutton"> <input type="hidden" name="step" value="3" /> <input type="reset" name="reset" value="reset" class="submitbutton"> </td> </tr> </form> </cfif> <cfif form.step eq 3> <!---write data tblinv---> <cfquery name="write_inv" datasource="#application.db#" result="test"> insert tblpassinv (invvendorid,invref,invname,invlname,invtel,invemail,invaddr1,invaddr2,invcity,invregion,invcountry,invzip,invcompany,invcreatedby,invdatecreated,invactive,invsend) values (#form.vendor#,'#form.refnum#','#form.name#','#form.lname#','#form.tel#','#form.email#','#form.addr1#','#form.addr2#','#form.city#','#form.region#','#form.country#','#form.zip#',#session.companyid#,#session.adminid#,#createodbcdatetime(now())#,1,0) </cfquery> <cfset newprimarykey = test.generated_key> <!---<cfinclude template="inv_amend_prods_new.cfm">---> <form method="post" action="inv_new.cfm" enctype="multipart/form-data"> <tr> <td class="copy" valign="top">products/line items:</td> <td> </td> </tr> <tr> <td colspan="2"> <table border="0" id="data" cellpadding="0" cellspacing="1" width="100%" class="border" align="center"> <tr> <td class="copy" valign="top">item name:</td> <td> <input type="text" name="itemname1" id="itemname1" required="yes" message="please enter name" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">item description:</td> <td> <input type="text" name="itemdesc1" id="itemdesc1" required="yes" message="please enter description" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">quantity</td> <td> <input type="text" name="quantity1" id="quantity1" required="yes" message="please enter quantity" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">product code:</td> <td><input type="text" name="code1" id="code1" required="yes" message="please enter code" class="textblock"></td> </tr> <tr> <td class="copy" valign="top">price:</td> <td><input type="text" name="price1" id="price1" required="yes" message="please enter price" class="textblock"></td> </tr> </table> </td> </tr> <tr> <td> <input type="submit" name="submit" value="submit" class="submitbutton"> <input type="button" id="addnew" name="addnew" value="add new item" /> <input type="hidden" id="items" name="items" value="1" /> <input type="hidden" name="step" value="4" /> <input type="hidden" name="invid" value="#newprimarykey#" /> </td> </tr> </form> </cfif> <cfif form.step eq 4> <cfdump var="#form#"> <form method="post" action="inv_new.cfm" enctype="multipart/form-data"> <tr> <td class="copy" valign="top">display details invoice:</td> <td> </td> </tr> <tr> <td> <input type="submit" name="submit" value="submit" class="submitbutton"> <input type="button" id="addnew" name="addnew" value="add new item" /> <input type="hidden" id="items" name="items" value="1" /> <input type="hidden" name="step" value="5" /> <input type="hidden" name="invid" value="#form.invid#" /> </td> </tr> </form> </cfif> <cfif form.step eq 5> <form method="post" action="inv_new.cfm" enctype="multipart/form-data"> <tr> <td class="copy" valign="top">bcc:</td> <td> <input type="text" name="bcc" required="yes" message="please enter bcc" class="textblock"> </td> </tr> <tr> <td> <input type="submit" name="submit" value="submit" class="submitbutton"> <input type="button" id="addnew" name="addnew" value="add new item" /> <input type="hidden" id="items" name="items" value="1" /> <input type="hidden" name="step" value="6" /> <input type="hidden" name="invid" value="#form.invid#" /> </td> </tr> </form> </cfif> <cfif form.step eq 6> <cfset invid = form.invid> <cfinclude template="inv_mail.cfm"> </cfif> </cfoutput> <cfinclude template="footer.cfm"> page source (for header , footer):
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="shortcut icon" href="favicon.ico" > <link rel="stylesheet" href="style/loginstyle.css" type="text/css"> <link rel="stylesheet" type="text/css" href="mailstyle.css"> <link type="text/css" rel="stylesheet" href="style/jquery.minicolors.css" /> <style type="text/css"> @import "calendar/jquery.datepick.css"; /* or use these themeroller theme instead @import "themes16/southstreet/ui.all.css"; @import "css/ui-southstreet.datepick.css"; */ </style> <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery.minicolors.js"></script> <script type="text/javascript" src="scripts/jquery.minicolors2.js"></script> <script type="text/javascript" src="calendar/jquery.datepick.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slidetoggle("slow"); }); }); </script> </head> <body topmargin="0" leftmargin="0" bgcolor="#cccccc"> <script type="text/javascript" src="swfobject.js"></script> <script language="javascript"> function popup(url) { day = new date(); id = day.gettime(); eval("page" + id + " = window.open(url, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=600,left = 340,top = 180');"); } </script> <script type="text/javascript"> $(function() { // $.datepick.setdefaults({usethemeroller: true}); $('#date1').datepick(); $('#date2').datepick(); $('#date3').datepick(); $('#date4').datepick(); $('#date0').datepick(); }); function showdate(date) { alert('the date chosen ' + date); } function limittext(limitfield, limitcount, limitnum) { if (limitfield.value.length > limitnum) { limitfield.value = limitfield.value.substring(0, limitnum); } else { limitcount.value = limitnum - limitfield.value.length; } } </script> <table align="center" width="1000px" cellpadding="5" cellspacing="0" border="0" bgcolor="#ffffff"> <tr> <td colspan="2" align="center" valign="top" style="padding:0px;"><img src="images/logo.png" width="400"></td> </tr> <tr> <td align="right" valign="middle" bgcolor="#ffffff" colspan="2"> <div style="width:100px; overflow:hidden"> <a href="index.cfm?action=logout">log out</a> </div> </td> </td> </tr> <tr> <td align="left" valign="top" width="250" style="padding-left:10px; border-right:1px solid #cccccc" bgcolor="#ffffff"> <table width="100%" align="left" bgcolor="#ffffff" cellpadding="1" cellspacing="1"> <tr> <td class="navsub" align="left">your account</td> </tr> <tr> <td align="left" bgcolor="#f1f1f1" class="header3">quick information</td> </tr> <tr> <td align="left" class="copy" id="logoutblue"> <img src="images/logo.jpg" align="middle"><br> <font class="copy">username:</font> demo<br> <font class="copy">name:</font> demo login<br> <font class="copy">current language:</font> english <img src="../images/flags/a22921bd-0055-9c1b-f9c07345bef072e7.png" align="absmiddle" /><br> <font class="copy">mode:</font> live mode<br> </td> </tr> <tr> <td> </td> </tr> <tr> <td class="nav-button"> <a href="company_amend2.cfm">manage company</a> </td> </tr> <tr> <td> </td> </tr> <tr> <td class="nav-button"> <a href="vendor_add.cfm">setup new vendor</a> <a href="vendor_amend.cfm">manage vendors</a> </td> </tr> <tr> <td> </td> </tr> <tr> <td class="nav-button"> <a href="inv_new.cfm">setup new invoice</a> <a href="inv_amend.cfm">manage invoices</a> <a href="inv_delete.cfm">delete invoices</a> </td> </tr> <tr> <td> </td> </tr> <tr> <td class="nav-button"> <a href="user_add.cfm">setup new user</a> <a href="user_amend.cfm">manage users</a> <a href="user_delete.cfm">delete users</a> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <td> </td> </tr> </table> </td> <td valign="top" width="800px" align="center" bgcolor="#ffffff"> <script type='text/javascript'> //<![cdata[ $(document).ready(function() { var currentitem = 1; $('#addnew').click(function(){ currentitem++; $('#items').val(currentitem); var strtoadd = '<tr><td class="copy" valign="top">item name:</td><td><input type="text" name="itemname'+currentitem+'" id="itemname'+currentitem+'" required="yes" message="please enter name" class="textblock"></td></tr><tr><td class="copy" valign="top">item description:</td><td><input type="text" name="itemdesc'+currentitem+'" id="itemdesc'+currentitem+'" required="yes" message="please enter description" class="textblock"></td></tr><tr><td class="copy" valign="top">quantity</td><td><input type="text" name="quantity'+currentitem+'" id="quantity'+currentitem+'" required="yes" message="please enter quantity" class="textblock"></td></tr><tr><td class="copy" valign="top">product code:</td><td><input type="text" name="code'+currentitem+'" id="code'+currentitem+'" required="yes" message="please enter code" class="textblock"></td></tr><tr><td class="copy" valign="top">price:</td><td><input type="text" name="price'+currentitem+'" id="price'+currentitem+'" required="yes" message="please enter price" class="textblock"></td></tr>'; $('#data').append(strtoadd); }); }); //]]> </script> <table border="0" cellpadding="0" cellspacing="1" width="100%" class="border" align="center"> <tr> <td class="copywhite" align="left" background="images/tab_bg.gif" colspan="2">add new invoice</td> </tr> <form method="post" action="inv_new.cfm" enctype="multipart/form-data"> <tr> <td class="copy" valign="top">products/line items:</td> <td> </td> </tr> <tr> <td colspan="2"> <table border="0" id="data" cellpadding="0" cellspacing="1" width="100%" class="border" align="center"> <tr> <td class="copy" valign="top">item name:</td> <td> <input type="text" name="itemname1" id="itemname1" required="yes" message="please enter name" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">item description:</td> <td> <input type="text" name="itemdesc1" id="itemdesc1" required="yes" message="please enter description" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">quantity</td> <td> <input type="text" name="quantity1" id="quantity1" required="yes" message="please enter quantity" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">product code:</td> <td><input type="text" name="code1" id="code1" required="yes" message="please enter code" class="textblock"></td> </tr> <tr> <td class="copy" valign="top">price:</td> <td><input type="text" name="price1" id="price1" required="yes" message="please enter price" class="textblock"></td> </tr> </table> </td> </tr> <tr> <td> <input type="submit" name="submit" value="submit" class="submitbutton"> <input type="button" id="addnew" name="addnew" value="add new item" /> <input type="hidden" id="items" name="items" value="1" /> <input type="hidden" name="step" value="4" /> <input type="hidden" name="invid" value="33" /> </td> </tr> </form> </td> </tr> <tr> <td align="right" colspan="2" valign="top"><img src="images/footer.png"></td> </tr> </table> </body> </html> i have noticed value items hidden updating correctly cant see of additional rows
i have noticed when view page source there 1 row item not sure if issue script
please see cfdump below (i have added 4 row items):
inspect request:
------webkitformboundaryzedcivzampmo4mt4 content-disposition: form-data; name="itemname1" 1 ------webkitformboundaryzedcivzampmo4mt4 content-disposition: form-data; name="itemdesc1" 1 ------webkitformboundaryzedcivzampmo4mt4 content-disposition: form-data; name="quantity1" 1 ------webkitformboundaryzedcivzampmo4mt4 content-disposition: form-data; name="code1" 1 ------webkitformboundaryzedcivzampmo4mt4 content-disposition: form-data; name="price1" 1 ------webkitformboundaryzedcivzampmo4mt4 content-disposition: form-data; name="submit" submit ------webkitformboundaryzedcivzampmo4mt4 content-disposition: form-data; name="items" 2 ------webkitformboundaryzedcivzampmo4mt4 content-disposition: form-data; name="step" 4 when view source code on firefox following (i have added 4 line items):
<form method="post" action="inv_new.cfm" enctype="multipart/form-data"></form> <tr> <td class="copy" valign="top">products/line items:</td> <td> </td> </tr> <tr> <td colspan="2"> <table id="data" class="border" width="100%" align="center" border="0" cellpadding="0" cellspacing="1"> <tbody><tr> <td class="copy" valign="top">item name:</td> <td> <input name="itemname1" id="itemname1" required="yes" message="please enter name" class="textblock" type="text"> </td> </tr> <tr> <td class="copy" valign="top">item description:</td> <td> <input name="itemdesc1" id="itemdesc1" required="yes" message="please enter description" class="textblock" type="text"> </td> </tr> <tr> <td class="copy" valign="top">quantity</td> <td> <input name="quantity1" id="quantity1" required="yes" message="please enter quantity" class="textblock" type="text"> </td> </tr> <tr> <td class="copy" valign="top">product code:</td> <td><input name="code1" id="code1" required="yes" message="please enter code" class="textblock" type="text"></td> </tr> <tr> <td class="copy" valign="top">price:</td> <td><input name="price1" id="price1" required="yes" message="please enter price" class="textblock" type="text"></td> </tr> <tr><td class="copy" valign="top">item name:</td><td><input name="itemname2" id="itemname2" required="yes" message="please enter name" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">item description:</td><td><input name="itemdesc2" id="itemdesc2" required="yes" message="please enter description" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">quantity</td><td><input name="quantity2" id="quantity2" required="yes" message="please enter quantity" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">product code:</td><td><input name="code2" id="code2" required="yes" message="please enter code" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">price:</td><td><input name="price2" id="price2" required="yes" message="please enter price" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">item name:</td><td><input name="itemname3" id="itemname3" required="yes" message="please enter name" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">item description:</td><td><input name="itemdesc3" id="itemdesc3" required="yes" message="please enter description" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">quantity</td><td><input name="quantity3" id="quantity3" required="yes" message="please enter quantity" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">product code:</td><td><input name="code3" id="code3" required="yes" message="please enter code" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">price:</td><td><input name="price3" id="price3" required="yes" message="please enter price" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">item name:</td><td><input name="itemname4" id="itemname4" required="yes" message="please enter name" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">item description:</td><td><input name="itemdesc4" id="itemdesc4" required="yes" message="please enter description" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">quantity</td><td><input name="quantity4" id="quantity4" required="yes" message="please enter quantity" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">product code:</td><td><input name="code4" id="code4" required="yes" message="please enter code" class="textblock" type="text"></td></tr><tr><td class="copy" valign="top">price:</td><td><input name="price4" id="price4" required="yes" message="please enter price" class="textblock" type="text"></td></tr></tbody></table> </td> </tr> <tr> <td> <input name="submit" value="submit" class="submitbutton" type="submit"> <input id="addnew" name="addnew" value="add new item" type="button"> <input id="items" name="items" value="4" type="hidden"> <input name="step" value="4" type="hidden"> </td> </tr> there seems no form closing tag
please advise on how can solve issue
thank in advance
okay did fix issue is
page.cfm:
<cfif form.step eq 3> <form method="post" action="inv_new.cfm" enctype="multipart/form-data"> </cfif> <table border="0" cellpadding="0" cellspacing="1" width="100%" class="border" align="center"> <tr> <td class="copywhite" align="left" background="images/tab_bg.gif" colspan="2">add new invoice</td> </tr> <cfoutput> <cfif form.step eq 3> <!---write data tblinv---> <cfquery name="write_inv" datasource="#application.db#" result="test"> insert tblpassinv (invvendorid,invref,invname,invlname,invtel,invemail,invaddr1,invaddr2,invcity,invregion,invcountry,invzip,invcompany,invcreatedby,invdatecreated,invactive,invsend) values (#form.vendor#,'#form.refnum#','#form.name#','#form.lname#','#form.tel#','#form.email#','#form.addr1#','#form.addr2#','#form.city#','#form.region#','#form.country#','#form.zip#',#session.companyid#,#session.adminid#,#createodbcdatetime(now())#,1,0) </cfquery> <cfset newprimarykey = test.generated_key> <!---<cfinclude template="inv_amend_prods_new.cfm">---> <tr> <td> <table id="data"> <tr> <td class="copy" valign="top">products/line items:</td> <td> </td> </tr> <tr> <td class="copy" valign="top">item name:</td> <td> <input type="text" name="itemname1" id="itemname1" required="yes" message="please enter name" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">item description:</td> <td> <input type="text" name="itemdesc1" id="itemdesc1" required="yes" message="please enter description" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">quantity</td> <td> <input type="text" name="quantity1" id="quantity1" required="yes" message="please enter quantity" class="textblock"> </td> </tr> <tr> <td class="copy" valign="top">product code:</td> <td><input type="text" name="code1" id="code1" required="yes" message="please enter code" class="textblock"></td> </tr> <tr> <td class="copy" valign="top">price:</td> <td><input type="text" name="price1" id="price1" required="yes" message="please enter price" class="textblock"></td> </tr> </table> </td> </tr> <tr> <td> <input type="submit" name="submit" value="submit" class="submitbutton"> <input type="button" id="addnew" name="addnew" value="add new item" /> <input type="hidden" id="items" name="items" value="1" /> <input type="hidden" name="step" value="4" /> <input type="hidden" name="invid" value="#newprimarykey#" /> </td> </tr> </cfif> footer.cfm
<tr> <td align="right" colspan="2" valign="top"><img src="images/footer.png"></td> </tr> </table> <cfif form.step eq 3> </form> </cfif> </body> </html>
Comments
Post a Comment