フォームを動的に追加すると、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); 
?> 

私が追加しようとしている機能は、その後、第三、第四の（最初のものと同じ）を第二のフォームを追加し、「+」ボタンをクリックする機能があり、クライアントが同時に複数のアイテムをデータベースに追加できるようにします。

EDIT：

ただ動的に余分なフォームを追加するためのコードを終了：

<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

あなたは、あなたが、フォームが送信されるとき、私はちょうど今

<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> 

あなたの問題を追跡するためのアイデアを与えるためにしようとしていますalernativeを見つけることができますjqueryの使用したくない場合はねえ、私はjQueryのを使用しています新しいフィールドはフォームとともに提出されます。

UPDATE

名前の入力配列を追加して、あなたのデータベースCOL「名前」にすべての名前を格納したいあなたのhtmlからとします。

あなたはなど、違法な文字入力をエスケープするために、すべての機能を使用して、最後に

<?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. 
?> 

UPDATE 2

HTML今

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

文字列に配列を内破することができます

プラスボタンで新しい入力フィールドを追加するとき

[OK]を10

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

が今は、アレイは、私がちょうど似た何かをした

<?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)"; 

} 
?>