创建一个复杂的html5表单.获取动态表单数据.Id vs Name
Creating a complex html5 form. Getting dynamic form data across. Id vs Name?
编辑:几乎有这个工作,但removeRow只是不像我认为它应该工作。由于某些原因,它在加载时执行函数
我有一个表单,它的html 5。有一个有行的表。每一行都有一个+或-,因为它可以添加或删除另一行。添加/销毁的行是特定于加号按钮添加…
(请原谅下面代码的不友好状态,它混合了id,值和名称最终这是我要求帮助的)
首先是header
<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>
但是添加的数据院系类型将是用户可输入的,但我仍然需要知道是院系类型的东西,就像添加的示例行:(上面的tr是表单第一次加载时,所以它已经填写为常规院系类型数据行。)
<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>
也为完整的javascript我正在黑客处理按钮添加一行(这是为常规员工类型行上的按钮,其他按钮会像Temp员工行等。然后有不同的表,以及,所以我也认为我的java脚本和html将不得不有表编码到myTableFaculty, myTableExempt等…
<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>
上面的代码不工作添加行后提交按钮(容易修复),但然后它消失了不知道为什么,这是在一个jquery根据视图,也许节不够大或知道动态改变?
所以那个按钮可以添加另一个tr,如果这个按钮被点击它会添加另一个tr和数据必须是唯一的那个tr,所以我想我的问题是,我想使用javascript当我添加另一个tr有名称每个输入的变化来反映哪个tr我有?这是否会使表单提交变得混乱,我是否应该使用非唯一名称,而不是使用每个td的id来处理这些数据?
一些tds中的id显示了从服务器返回的数据或计算值我需要id这样我就知道如何在javascript (ajax)中将字段更新为视图中的用户
我几乎认为在rails(甚至Sinatra)这样的框架中这样做会更容易。我只是有一段时间没有做过这种低级别的html类型的欺骗,记不起正确的方法了。
我想我正在努力解决的最大的事情是如何正确地开发这个表单的数据繁重的部分,这样我就可以提交那里的行和动态添加的行,知道它来自什么行。要知道何时提交,以便我可以重新计算已计算值的字段并相应地更新它们。
因为我不能在评论中发布,所以我被迫将其作为答案发布。这个JS按预期添加行,只是不确定接下来要去哪里;
编辑:第一个解决方案只适用于初始的[+]按钮,这个也适用于动态添加的行。
<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>
- jQuery动态表单显示在select选项上
- 动态Javascript表单不起作用
- 将表单张贴到MailChimp,但显示动态成功页面
- 如何在js中实现树结构类型的表单动态填充
- 向laravel表单动态添加字段
- 通过javascript向表单动态添加验证
- HtmlService表单-动态下拉列表
- 引导表单动态添加带有字段的删除表单
- 为多个表单动态指定输出ajax成功结果的位置
- POST 表单动态生成的输入
- 如何使用PHP将我从表单动态添加的行添加到mySQL数据库
- 表单动态属性更改和提交不起作用
- 为php表单动态生成文本框,将它们放入数组,内爆为字符串,并将字符串写入数据库
- Persist通过post通过PHP表单动态生成html
- Django使用谷歌地图自动建议将表单动态添加到表单集
- 添加<表单动态参数Action="">
- 条纹:不能添加到表单动态创建的表格通过javascript
- Zend表单-动态添加子表单
- PHP表单动态输入
- Firefox中的表单动态中断