Javascript Dynamic form field question

Report · Feb 12, 2010

Hi,

I am using coldfusion 9 and I have a form with javascript in it that allows the user to create text boxes on the fly. It works well but I have no idea how I write it to a database. I have plenty of experience with writing form information to a db but not from dynamic fields. How do I do this when it is with dynamic fields in a primarily js form? My form code is below. Thank you very much.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Page</title>

<body>
<form name="form1" method="post" action="">
<table width="450" border="0" cellspacing="0" cellpadding="0" id="mytable">
    <tr id="myrow">
      <td colspan="2" align="center"><h3>Dynamically Handeled Table</h3>
      </td>
    </tr>
    <tr ID="add">
      <td width="177"> </td>
      <td width="273" align="right"><input type="button" name="Button" value="Add Text Box" onClick="addRow('mytable','myrow')"></td>
    </tr>
    <tr ID="add">
      <td width="177"> </td>
      <td width="273" align="right"> </td>
    </tr>
</table>

</form>
</body>
</html>

Report · Feb 12, 2010

There's not difference. The form still POSTs when it's submitted (in your case back to itself), and any form fields -

dynamically created or otherwise - will be posted too. CF will receive the form fields in the FORM scope, as per usual. CF neither knows nor cares what sort of form fields were used to provide the values for the post, it just sees names and values.

Do a <cfdump> of the form scope on your template, and it'll probably start making sense.#

--

Adam

Report · Feb 14, 2010

You should have given each field its own name, perhaps like this:

if(row_no==1) {
                textbox='<input type="text" name="txtfield1">';
                text="<div class='label' align=right>First Textbox:</div>";
            }
            else if(row_no==2) {
                textbox='<input type="text" name="txtfield2">';
                text="<div class='label' align=right>Second Textbox:</div>";
            }

            else if(row_no==3) {
                textbox='<input type="text" name="txtfield3">';
                text="<div class='label' align=right>Third Textbox:</div>";
            }

      else if(row_no==4) {
                textbox='<input type="text" name="txtfield4">';
                text="<div class='label' align=right>Fourth Textbox:</div>";
            }

      else if(row_no==5) {
                textbox='<input type="text" name="txtfield5">';
                text="<div class='label' align=right>Fifth Textbox:</div>";
            }

        else if(row_no==6) {
            textbox='<input type="text" name="txtfield6">';
            text="<div class='label' align=right>Sixth Textbox:</div>";
        }

      else if(row_no==7) {
                textbox='<input type="text" name="txtfield7">';
                text="<div class='label' align=right>Seventh Textbox:</div>";
            }

      else if(row_no==8) {
                textbox='<input type="text" name="txtfield8">';
                text="<div class='label' align=right>Eighth Textbox:</div>";
            }

You should then add a submit field to the form, and add the following code at the top of the page to test for the submitted fields:

Even then, your input fields aren't yet truly dynamic. For example, when there are "First Textbox", "Second Textbox" and "Third Textbox", and I remove the first, then "Second Textbox" and "Third Textbox" remain. If the fields were truly dynamic, "First Textbox" and "Second Textbox" would always remain, whichever text box was removed.

Report · Feb 23, 2010

Remember that you have access to the FORM scope on your action page, which contains the FieldNames key (contains a list of every form field that was passed from your form). Assuming you name your JS-created form fields in an expected format, you should be able to loop over the fields in the Form.FieldNames variable, extract your newly-created fields and do whatever you want with them. If you have a scenario where you allow users to create an unlimited amount of fields, you may want to consider either a) storing your user-generated fields in their own database table that provides you a one-to-many relationship with your primary table or b) packaging up the fields as a JSON or WDDX object, serializing them, then putting them all in a database field in your primary table.