javascript - 动态表格提交表单
问题描述
我正在尝试使用 Bootstrap 创建提交表单。它具有动态表行和电子邮件验证部分。我希望用户提交带有数据库、残基和参考的注释。我的问题是提交按钮不会从任何表格行中获取信息。我不确定是否有其他方法可以将动态表转换为提交表单。任何帮助将不胜感激。PS:我正在使用引导程序。
这是我的代码,它创建了一个包含 4 个不同列的表,其中包含可添加/可删除的行和电子邮件验证:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="Database' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="Residue' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="Annotation' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="reference' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
</script>
<script>
$(function () {
$('title="tooltips"').tooltip({});
});
</script>
<script> // VALİDATION
$(document).ready(function () {
$('.input-group input[required]').on('keyup change', function () {
var $form = $(this).closest('form'),
$group = $(this).closest('.input-group'),
$addon = $group.find('.input-group-addon'),
$icon = $addon.find('span'),
state = false;
if (!$group.data('validate')) {
state = $(this).val() ? true : false;
} else if ($group.data('validate') == "email") {
state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val())
}
if (state) {
$addon.removeClass('danger');
$addon.addClass('success');
$icon.attr('class', 'glyphicon glyphicon-ok');
} else {
$addon.removeClass('success');
$addon.addClass('danger');
$icon.attr('class', 'glyphicon glyphicon-remove');
}
});
$('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');
});
</script>
<section class="mb-4">
<form name="myform" action="mail.php" method="POST">
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr title="tooltips">
<td title="Database_Explanation1">Database</td>
<td title="Residue_Explnation2">Residue</td>
<td title="Annotation_Explnation3">Annotation</td>
<td title="Reference_Explnation4">Reference</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="inputs">
<input type="text" name="Database" class="form-control"/>
</td>
<td class="col-sm-4">
<input type="mail" name="Residue" class="form-control"/>
</td>
<td class="col-sm-3">
<input type="text" name="Annotation" class="form-control"/>
</td>
<td class="col-sm-4">
<input type="text" name="reference" class="form-control"/>
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row"/>
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
<div class="col-md-6">
<div class="md-form mb-0">
<div class="input-group" data-validate="email">
<input type="text" class="form-control" name="validate-email" id="validate-email"
placeholder="Validate Email" required>
<span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
</div>
</div>
</div>
</div>
<div class="status"></div>
</form>
<div class="text-center text-md-left">
<a class="btn btn-primary" type="submit" onclick="document.getElementById('myform').submit();">Submit</a>
</div>
</section>
解决方案
尝试这个:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="Database' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="Residue' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="Annotation' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="reference' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
</script>
<script>
$(function () {
$('[title="tooltips"]').tooltip({});
});
</script>
<script> // VALİDATION
$(document).ready(function () {
$('.input-group input[required]').on('keyup change', function () {
var $form = $(this).closest('form'),
$group = $(this).closest('.input-group'),
$addon = $group.find('.input-group-addon'),
$icon = $addon.find('span'),
state = false;
if (!$group.data('validate')) {
state = $(this).val() ? true : false;
} else if ($group.data('validate') == "email") {
state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4}) + $ /.test($(this).val())
}
if (state) {
$addon.removeClass('danger');
$addon.addClass('success');
$icon.attr('class', 'glyphicon glyphicon-ok');
} else {
$addon.removeClass('success');
$addon.addClass('danger');
$icon.attr('class', 'glyphicon glyphicon-remove');
}
});
$('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');
});
</script>
<section class="mb-4">
<form id="myform" action="mail.php" method="POST">
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr title="tooltips">
<td title="Database_Explanation1">Database</td>
<td title="Residue_Explnation2">Residue</td>
<td title="Annotation_Explnation3">Annotation</td>
<td title="Reference_Explnation4">Reference</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="inputs">
<input type="text" name="Database" class="form-control"/>
</td>
<td class="col-sm-4">
<input type="mail" name="Residue" class="form-control"/>
</td>
<td class="col-sm-3">
<input type="text" name="Annotation" class="form-control"/>
</td>
<td class="col-sm-4">
<input type="text" name="reference" class="form-control"/>
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row"/>
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
<div class="col-md-6">
<div class="md-form mb-0">
<div class="input-group" data-validate="email">
<input type="text" class="form-control" name="validate-email" id="validate-email"
placeholder="Validate Email" required>
<span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
</div>
</div>
</div>
</div>
<div class="status"></div>
</form>
<div class="text-center text-md-left">
<a class="btn btn-primary" type="submit"
onclick="document.getElementById('myform').submit();">Submit</a>
</div>
</section>
</body>
</html>
推荐阅读
- mongodb - 如何使用 Mongo 和多个字段进行过滤
- php - PHP 注意:试图访问 bool 类型值的数组偏移量
- laravel - 如何在 laravel 中过滤集合?
- java - 如何使用 Mockito 模拟此方法
- qt - 是否可以在 QML 页面中使用 QML Singleton 作为标题项?
- c# - 如何使用 Xamarin 中的开关更改页面背景颜色
- python - 哪些语言具有与 Numpy 相似或等效的数组切片符号以及为什么它不更常见?
- c++-cli - C++/CLI 的 Cppcheck 语法错误代码异味
- genexus - 开发人员菜单中同一事务的多个条目-Genexus 16
- python - 在 Python“for”循环中定义具有更改名称的变量