Skip to main content
W
Winston2
Inspiring
February 12, 2010
Question

Javascript Dynamic form field question

  • February 12, 2010
  • 2 replies
  • 1502 views

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>

<script language="javascript">
    row_no=1;
    function addRow(tbl,row){
        //so that user can only add 8 rows
        if(row_no<=8){   
       
        var textbox='<input type="text" name="textfield[]">';//for text box
        var remove= '<a href="#" onclick="removeRow(\''+ tbl +'\',\'' + row_no + '\')"/>Remove It</a>'; //for the text which is used to remove the current row by using the function removeRow(..,..)
       
        //for suitable label to the row
        if(row_no==1) text="<div class='label' align=right>First Textbox:</div>";
        else if(row_no==2) text="<div class='label' align=right>Second Textbox:</div>";
        else if(row_no==3) text="<div class='label' align=right>Third Textbox:</div>";
  else if(row_no==4) text="<div class='label' align=right>Fourth Textbox:</div>";
  else if(row_no==5) text="<div class='label' align=right>Fifth Textbox:</div>";
        else if(row_no==6) text="<div class='label' align=right>Sixth Textbox:</div>";
  else if(row_no==7) text="<div class='label' align=right>Seventh Textbox:</div>";
  else if(row_no==8) text="<div class='label' align=right>Eighth Textbox:</div>";

        var tbl = document.getElementById(tbl);//to identify the table in which the row will get insert
        var rowIndex = document.getElementById(row).value;//to identify the row after which the row will be inserted
        try {
            var newRow = tbl.insertRow(row_no);//creation of new row
            var newCell = newRow.insertCell(0);//first  cell in the row
            newCell.innerHTML = text;//insertion of the 'text' variable in first cell
            var newCell = newRow.insertCell(1);//second cell in the row
            newCell.innerHTML = textbox + " " + remove;//insertion of the text box and the remove text using their variable
            row_no++;
        } catch (ex) {
            alert(ex); //if exception occurs
        }
           
    }
    if(row_no>8)//if the row contain 3 textbox, the add button will disapper
    {
        document.getElementById("add").style.display="none";
    }                       
}
function removeRow(tbl,num)
{
    var table = document.getElementById(tbl);//adentification of table
    try {
        row_no--;
        table.deleteRow(num);//deletion of the clicked row
    } catch (ex) {
        alert(ex);
    }
   
    if(row_no<=8)//if row is less than 8 then the button will again appear to add row
    {
            document.getElementById("add").style.display="block";
    }   
}
</script>
</head>

<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>

    This topic has been closed for replies.

    2 replies

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    February 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:

    <cfif isdefined("form.fieldnames")>
        <cfdump var="#form#">
        </cfif>

    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.

    I
    insuractive
    Inspiring
    February 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.

    A
    Adam Cameron.
    Inspiring
    February 13, 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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices