javascript - 动态添加表单，可以插入到sql表中

Question

正在寻找一种解决方案，允许我动态添加另一个表单，单击“保存”时该表单将单独发送到 SQL 并保存为一行。

为了更好地解释我想要实现的目标，这里有一张图片:

如您所见，这是一个带有 3 个输入字段的简单表单。目前，如果您单击“Opslaan”(保存)，数据将发送到数据库并保存。这是代码:

<form style="margin-bottom: 50px;" action="(linktothephpfilelistedbelow" method="POST" class="form-horizontal">
            <fieldset>

            <!-- Form Name -->
            <legend>Verkocht Product Toevoegen</legend>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="klantnummer">Klant nummer</label>  
              <div class="col-md-4">
              <input id="textinput" name="klantnummer" type="text" placeholder="hier het klantnummer" class="form-control input-md" required="">

              </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="kledingstuk-nummer">Kledingstuk nummer</label>  
              <div class="col-md-4">
              <input id="Kledingstuk-nummer" name="kledingstuk" type="text" placeholder="hier het nummer van het kledingstuk" class="form-control input-md" required="">

              </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="prijs">Prijs kledingstuk</label>  
              <div class="col-md-4">
              <input id="Prijs" name="prijs" type="text" placeholder="hier de prijs van het kledingstuk" class="form-control input-md" required="">

              </div>
            </div>

            <!-- Button (Double) -->
            <div class="form-group">
              <label class="col-md-4 control-label" for="extraproduct"></label>
              <div class="col-md-8">
                <input id="extraproduct" type="submit" value="Opslaan" name="extraproduct" class="btn btn-success"></input>
                <button id="button2id" name="extraproduct" class="btn btn-success">+</button>
              </div>
            </div>

            </fieldset>
            </form>




<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysql_connect("blankforreasons");

// Check connection
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
} 

// Escape user inputs for security

$klant_nummer1 = $_POST['klantnummer'];
$artikel_nummer1 = $_POST['kledingstuk'];
$prijs1 = $_POST['prijs'];

$klant_nummer = mysql_real_escape_string($klant_nummer1);
$artikel_nummer = mysql_real_escape_string($artikel_nummer1);
$prijs = mysql_real_escape_string($prijs1);



// attempt insert query execution
$sql = "INSERT INTO soldproducts (klantnummer, artikelnummer, prijs, tijd) VALUES ('$klant_nummer','$artikel_nummer', '$prijs', CURRENT_TIMESTAMP)";

mysql_select_db('blankforreasons');

$retval = mysql_query ($sql, $link);

if(! $retval ) { 
    die('Could not enter data: ' . mysql_error());
}
echo "<h2>Producten succesvol toegevoegd</h2>
    <a href='../producten'><button>klik hier om terug te gaan</button></a>";


// close connection
mysql_close($link);
?>

我试图添加的功能是能够单击“+”按钮，添加第二个表单(与第一个表单相同)，然后添加第三个、第四个等等。这样我的客户就能够同时向数据库添加多个项目。

编辑:

刚刚完成动态添加额外表单的代码:

<script>
        var i = 1;
        $(document).ready(function(){
            $("#button2id").on('click', function () {
                i++;
                var data = "<legend>Product #"+i+"</legend><div class='form-group'><label class='col-md-4 control-label' for='klantnummer'>Klant nummer</label>  <div class='col-md-4'><input id='textinput' name='klantnummer' type='text' placeholder='hier het klantnummer' class='form-control input-md' required=''></div></div><div class='form-group'><label class='col-md-4 control-label' for='kledingstuk-nummer'>Kledingstuk nummer</label>  <div class='col-md-4'><input id='Kledingstuk-nummer' name='kledingstuk' type='text' placeholder='hier het nummer van het kledingstuk' class='form-control input-md' required=''></div></div><div class='form-group'><label class='col-md-4 control-label' for='prijs'>Prijs kledingstuk</label>  <div class='col-md-4'><input id='Prijs' name='prijs' type='text' placeholder='hier de prijs van het kledingstuk' class='form-control input-md' required=''></div></div>";
                $(".form-horizontal fieldset .inputfields").append(data);
            });
        });
    </script>

现在，我只需要在单击“保存”时能够将每个额外添加的表单保存为新记录。

Answer 1

嘿，我正在使用 Jquery 如果你不想使用 jquery 那么你可以找到替代方案，我只是想提供跟踪你的问题的想法

    <script>
var i = 0;
     $('#btn2').on('click',function(){
          i =i+1;
       var html = '"<div class="form-group">
              <label class="col-md-4 control-label" for="klantnummer">XYZ nummer</label>  
              <div class="col-md-4">
              <input id="textinput'+i+'" name="klantnummer[]" type="text" placeholder="hier het klantnummer" class="form-control input-md" required="">

              </div>
            </div>"';
       $('#appendUp').insertBefore(html) // Add a empty div where you want to append your html.

     });
    </script>

现在，当提交表单时，新字段将随表单一起提交。

更新

假设您在 html 中添加了一个名称输入数组，并且您希望将所有名称存储在数据库 col 'name' 中。

您可以使用所有函数来转义非法字符输入等，最后将数组内爆为字符串

<?php
 if(isset($_post('name')))
{
   $x = $post('name');
  $x = implode(',',$x);
}else{
$x = null;
}

//Now Save $x in your datatable if any extra coloumn are added then they would be stored or null will be stored.
?>

更新2

HTML

<input name = "productitem[0]" id= "productitem0"/> // this is your base form

现在，当您使用加号按钮添加新的输入字段时

var html = '<input name = "productitem[]" id= "productitem'+i+'"/>';

现在你已经有一个名为productitem的数组发送到你的php服务器了

<?php
 //use Foreach loop
$x =$_POST['productitem'];
$y =$_POST['articles'];
 foreach($x as $key => $data){
   $sql = "INSERT INTO soldproducts (klantnummer, artikelnummer, prijs, tijd) VALUES ('$x[$key]','$y[$key]', '$prijs[$key]', CURRENT_TIMESTAMP)";

} 
?>