如何解决动态表格导入mysql数据库
HTML：
<html>
<head>
<Meta charset="utf-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dynamic forms </title>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
<a class="navbar-brand text-white">Dynamic_form</a>
</nav>
<div class="container">
<div class="col-lg-12">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Forms</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Test</h4>
<p class="card-text"></p>
<form action="" id="needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-md-8">
<input type="number" id="input1" class="input form-control" placeholder="Enter number of forms" required>
</div>
<div class="form-group col-md-4">
<div class="text-center">
<button class="btn btn-sm btn-primary generate" id="btn1" type="submit">Generate tripleroom</button>
</div>
</div>
</form>
<p class="card-text"></p>
<form action="" id="needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-md-8">
<input type="number" id="input2" class="input form-control" placeholder="Enter number of forms" required>
</div>
<div class="form-group col-md-4">
<div class="text-center">
<button class="btn btn-sm btn-primary generate" id="btn2" type="submit">Generate doubleroom</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card text-center">
<div class="card-body">
<div class="forms">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnjsK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvcwpIPm49" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.card').css('margin-top',30);
$('#btn1').click(function(e){
e.preventDefault();
let input1 = $('#input1').val();
let temp_html = '';
for(i = 0; i < input1; i++){
temp_html += '<form id="form1" action="welcome.PHP" method="post">'+
'<div class="row">'+
'<div class="col-md-4">'+
'<div class="form-group">'+
'<label>Fullname</label>'+
'<input type="text" name="fullname[]" class="form-control" placeholder="Fullname" required="">'+
'</div>'+
'</div>'+
'<div class="col-md-4">'+
'<div class="form-group">'+
'<label>Email Address</label>'+
'<input type="email" name="email[]" class="form-control" placeholder="Email address" required="">'+
'</div>'+
'</div>'+
'<div class="col-md-4">'+
'<div class="form-group">'+
'<label>Mobile Number</label>'+
'<input type="text" name="phone[]" class="form-control" placeholder="Phone number" value="Tripleroom" readonly required="">'+
'</div>'+
'</div>'+
'</form>'+
'</div>';
}
$('.forms').append(temp_html);
});
});
</script>
<button id="submit">Submit</button>
<script type="text/javascript">
document.getElementById( 'submit' ).addEventListener( 'click',function () {
// check for and report errors here
for( var index = 0; index < document.forms.length; index++ ) {
document.forms[index].submit();
}
} );
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.card').css('margin-top',30);
$('#btn2').click(function(e){
e.preventDefault();
let input2 = $('#input2').val();
let temp_html = '';
for(j = 0; j < input2; j++){
temp_html +='<form id="form1" action="welcome.PHP" method="post">'+
'<div class="row">'+
'<div class="col-md-4">'+
'<div class="form-group">'+
'<label>Fullname</label>'+
'<input type="text" name="fullname[]" class="form-control" placeholder="Fullname" required="">'+
'</div>'+
'</div>'+
'<div class="col-md-4">'+
'<div class="form-group">'+
'<label>Email Address</label>'+
'<input type="email" name="email[]" class="form-control" placeholder="Email address" required="">'+
'</div>'+
'</div>'+
'<div class="col-md-4">'+
'<div class="form-group">'+
'<label>Mobile Number</label>'+
'<input type="text" name="phone[]" class="form-control" placeholder="Phone number" value="Doubleroom" readonly required="">'+
'</div>'+
'</div>'+
'</form>'+
'</div>';
}
$('.forms').append(temp_html);
});
});
</script>
</body>
</html>
首先，我只是尝试使用PHP打印结果：
<html>
<body>
<?PHP
$qty = $_POST['fullname'];
if (is_array($qty)) {
for ($i=0;$i<count($qty);$i++)
{
print_r ($qty[$i]);
}
}
?><br>
</body>
</html>
问题是我只从最后生成的表单中获取数据。例如，如果我生成2个表格，则只能从第二个表格中获取数据。
如何提交动态生成的表单中的所有数据？
感谢所有帮助。我想我现在已经有了洞察力，因为最近几天我一直在努力探究这一点。
谢谢。
解决方法
这样做
document.forms[index].submit();
浏览器会自动转到welcome.php，而无需实际提交任何其他形式。如果要创建动态表单，则应将数据保存为对象/数组或其他某种形式，并通过一种表单将所有数据发送到welcome.php，而不是创建多种不同的表单。
但是，如果您希望保留其他格式，则需要使用AJAX发送数据。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。