CODEWITHSUNDEEP
javascriptjqueryhtml
Codejoy
Codejoy

Reputation: 3816

Creating a complex html5 form. Getting dynamic form data across. Id vs Name?

EDIT: Almost have this working but the removeRow just isn't working like I thought it should. And it executes the function on load for some reason.

I have a form, its html 5. Has a table with rows. Each row has a + or a - as it can have another row added or destroyed. The rows added/destroyed are specific to which plus button was added...

(forgive the unkind state of the code below with its mix mash of id,values and name ultimately this is what I am asking help on)

First the headers

   <tr id="FacultyEmployees">
      <th  align="center" class="style1">Index Number</th>
      <th  align="center" class="style1">Faculty Type</th>
      <th  align="center" class="style1">IDC</th>
      <th  align="center" class="style1">Agency Budgeted Amount</th>
      <th  align="center" class="style1">PI Budgeted Amount</th>
      <th  align="center" class="style1">PI Adjusted Budget</th>
      <th  align="center" class="style1">Comments</th>
   </tr>

   <tr =id="regFacEmpType1"><!-- next row would be regExemptEmpType1 etc -->
                <td align="center">611000</td>
                <td align="center">Regular</td>
                <td><input type="checkbox" name="IDC" value="true" /></td>
                <td align="center" id="agencyBudgeted1">$43,0000</td>
                <td align="center" id="piBudgetedAmount1">$33,0000</td>                                     
                <td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5"/></td>
                <td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
                <td><button id="addRegular">+</button></td>
                <td><button>-</button></td>

   </tr>

But the added data Faculty type will be user input-able but I really still need to know is of type Faculty something like an example row added: (the tr above is when the form first loads, so its already filled out as Regular Faculty type data row.)

   <tr =id="tempEmpType1">      
                    <td align="center">611000</td>
                    <td><input type="text" name="FacultyTypeRegular" width="5"/></td>
                    <td><input type="checkbox" name="IDC" value="true" /></td>
                    <td align="center" id="agencyBudgeted1">$43,0000</td>
                    <td align="center" id="piBudgetedAmount1">$33,0000</td>                                     
                    <td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5"/></td>
                    <td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
                    <td><button id="addRegular">+</button></td>
                    <td><button>-</button></td>

       </tr>

Also for completeness the javascript I am hacking on to handle the button adding a row (this one is for the button on the regular employee type row, other buttons would bel ike Temp employee row etc. Then there are different tables as well, so i also think my java script and html will have to have the tables encoded to myTableFaculty, myTableExempt, etc etc... 

       <script language='javascript' type='text/javascript'>

        $(document).ready(function () {

            function addRow() {
                var $myTable = $("#myTable").find('tbody');
                var parent = $(this).parent("td").parent("tr").attr("id");
                var newRowID = $myTable.children("tr").length + 1;

                var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
                $newRow.append($("<td align='center'>611000</td>"));
                $newRow.append($("<td class='style1'><input type='text' name='RegEmpType" + newRowID + "' size='15' data-emp-type='Regular' /></td>"));
                //see the data-emp-type not sure how else to know what is coming back unless name is going to be dynamically generated here using  a counter.  Should
                //only be one type of each field, so instead of EmpType being generic:  EmpTypeRegular1 and if they add another employee then EmpTypeRegular2 etc.

                $newRow.append($("<td><input type='checkbox' name='RegEmpIDC" + newRowID + "' value='true' /></td>"));
                $newRow.append($("<td align='center' id='RegEmpAgencyBudgt" + newRowID + "'>$43,0000</td>"));
                $newRow.append($("<td align='center' id='RegEmpRowBdgt" + newRowID + "'>$3,0000</td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowAdjBudget" + newRowID + "'><input type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowComments" + newRowID + "'><input type='text' name='RegEmpComments" + newRowID + "' /></td>"));
                $newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow)));
                $newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", removeRegularRow(newRowID))));
                $myTable.append($newRow);
            };

            function removeRegularRow(index) {
                        $("#regFacEmpType" + index).remove();
            };

            $(".removeRegular").on("click", removeRegularRow(-1));



            $(".addRegular").on("click", addRow);
        });
</script>

The code above doesn't work adds the row after the submit buttons (easy fix) but then it disappears no idea why,t his is in a jquery according view, maybe the section isn't large enough or knows to dynamically change?

So that button can add another tr, if this button was clicked it will add another tr and that data has to be unique to that tr. So i guess my question is, do I want to use javascript to when I add another TR have the name each input change to reflect which tr I have? would that make the form submission to messy and should I use non-unique names and instead us the id of each td somehow to wrangle this data?

The id's in some of the tds are because its showing data coming back from the server or a calculated value that I need the id so I know how to update that field to the user in the view in javascript (ajax really)

I almost think doing this in some framework like rails (or Sinatra even) would be easier. I just haven't done this lower level type html finagling in a while and cannot remember the proper approach.

I guess the biggest thing I am grappling with is how to properly develop the data heavy parts of this form so that I can submit the rows there and the ones added dynamically, know to what row its coming from. To know when its been submitted so I can recalculate the fields that are calculated values and update them accordingly.

Upvotes: 0

Views: 1446

Answers (1)

Sage
Sage

Reputation: 4937

since I cant post this in a comment, I am forced to post it as an answer. This JS is appending the rows as expected, just not sure where to go next with it;

EDIT: the first solution only worked on the initial [+] button, this one works with the dynamically added rows too. 

        <table id='myTable'>
            <tbody>
                <tr id="FacultyEmployees">
                    <th align="center" class="style1">Index Number</th>
                    <th align="center" class="style1">Faculty Type</th>
                    <th align="center" class="style1">IDC</th>
                    <th align="center" class="style1">Agency Budgeted Amount</th>
                    <th align="center" class="style1">PI Budgeted Amount</th>
                    <th align="center" class="style1">PI Adjusted Budget</th>
                    <th align="center" class="style1">Comments</th>
                </tr>
                <tr id="regFacEmpType1" data-child-type='regExemptEmpType1' data-parent-type='regFacEmpType1'>
                    <!-- next row would be regExemptEmpType1 etc -->
                    <td align="center">611000</td>
                    <td align="center">Regular</td>
                    <td><input type="checkbox" name="IDC" value="true" /></td>
                    <td align="center" id="agencyBudgeted1">$43,0000</td>
                    <td align="center" id="piBudgetedAmount1">$33,0000</td>
                    <td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5" /></td>
                    <td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
                    <td><button class='addRegular' type='button'>+</button></td>
                    <td><button class='removeRegular' type='button'>-</button></td>
                </tr>
            </tbody>
        </table>

    <script language='javascript' type='text/javascript'>

        $(document).ready(function () {

            function addRow() {
                var $myTable = $("#myTable").find('tbody');
                var parent = $(this).parent("td").parent("tr").attr("id");
                var newRowID = $myTable.children("tr").length + 1;

                var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
                $newRow.append($("<td align='center'>611000</td>"));
                $newRow.append($("<td class='style1'><input type='text' name='RegEmpType" + newRowID + "' size='15' data-emp-type='Regular' /></td>"));
                //see the data-emp-type not sure how else to know what is coming back unless name is going to be dynamically generated here using  a counter.  Should
                //only be one type of each field, so instead of EmpType being generic:  EmpTypeRegular1 and if they add another employee then EmpTypeRegular2 etc.

                $newRow.append($("<td><input type='checkbox' name='RegEmpIDC" + newRowID + "' value='true' /></td>"));
                $newRow.append($("<td align='center' id='RegEmpAgencyBudgt" + newRowID + "'>$43,0000</td>"));
                $newRow.append($("<td align='center' id='RegEmpRowBdgt" + newRowID + "'>$3,0000</td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowAdjBudget" + newRowID + "'><input type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowComments" + newRowID + "'><input type='text' name='RegEmpComments" + newRowID + "' /></td>"));
                $newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow)));
                                    $newRow.append($("<td></td>").append($("<button class='removeRegular' type='button'>-</button>").bind("click", removeRow)));
                $myTable.append($newRow);
            };
            function removeRow() {
                if (confirm("you sure?")) {
                    $(this).parent("td").parent("tr").remove();
                };
            };
            $(".addRegular").on("click", addRow);
            $(".removeRegular").on("click", addRow);
        });
</script>

Upvotes: 2

Related Questions