动态表格导入mysql数据库答案

【问题标题】：Dynamic form into mysql database动态表格导入mysql数据库
【发布时间】：2021-01-15 22:12:16
【问题描述】：

我正在尝试使用动态表单将数据插入 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 个表单，我只会从第二个获取数据。

如何从动态生成的表单中提交所有数据？

感谢所有帮助。我想我现在有狭隘的视野，因为过去几天我一直在努力追根究底。

谢谢。

【问题讨论】：

标签： php html jquery forms dynamic

【解决方案1】：

通过做

document.forms[index].submit();

浏览器会自动转到welcome.php，而无需实际提交任何其他表单。如果你想创建一个动态表单，你应该将数据保存在一个对象/数组或其他表单中，并通过一个表单将所有数据发送到 welcome.php，而不是创建多个不同的表单。

但是，如果您想保留不同的表单，则需要使用 AJAX 发送数据。

【讨论】：