Присылать повторяющиеся поля формы в виде отдельных строк

Question

Я перестроил свою форму, чтобы лучше разместить то, что мне нужно. Теперь мне просто нужно знать, как вводить значения в мою базу данных.

Мои поля формы дублируются по мере необходимости и имеют иную форму [0] [имя], чтобы их можно было рассматривать как отдельные поля. jsFiddle здесь http://jsfiddle.net/2fDYs.

функция;

$(document).ready(function() { 
    var newNum = 2; 
    cloneMe = function(el) { 
     var newElem = el.clone().attr('id', 'container' + newNum); 
     newElem.children().each(function(index, elem) { 
      //$(elem).attr('id', $(elem).attr('id') + newNum).attr('name', $(elem).attr('name')+ newNum); 
      var $elem = $(elem); 
      $elem.attr('id', $elem.attr('id') + newNum); 
      var ename = $elem.attr('name'); 
      if (ename) { 
       $elem.attr('name',ename.replace('form[0]','form['+newNum+']')); 
      } 
     }); 
     $('#cloneb').before(newElem); 
     $('#delete_name'+ newNum).html('<p id="rem_field"><a href="#"><span>Delete Line</span></a></p>'); 
     newNum++; 
    }; 

    $('p#rem_field').live('click', function() { 
    $(this).parents('div').remove(); 
    return false; 
});  

}); 

б.

<form action='' method='post' enctype='multipart/form-data' name='form' id='form'> 
    <div id="container1"> 
     <label>Style:</label> 
      <select name='form[0][style]' id='style' class='style' onchange="showDim(this)"> 
       <option value='0' class='red'>Select a style...</option>    
        <?php 
        include ('connect.php'); 
        $getsty = $db->prepare("SELECT Style_ID, Style_Type FROM style ORDER BY Style_Type ASC LIMIT 1, 18446744073709551615;"); 
        $getsty->execute(); 
         while($row = $getsty->fetch(PDO::FETCH_ASSOC)) {  
          $Style_ID = $row['Style_ID']; 
          $Style_Type = $row['Style_Type'];     
         echo "  <option value='$Style_ID'>$Style_Type</option>"; 
         }          
        ?> 
      </select>         
     <br /> 
     <div class='dimdiv'>      
      <label>Dimensions:</label> 
       <select name='form[0][Dim]' id='Dim'> 
        <option value='0' class='red'>Select the dimensions...</option> 
       </select>      
     </div> 
     <br /> 
     <label>Colour:</label> 
      <select name='form[0][Colour]' id='Colour'> 
       <option value='0' class='red'>Select a colour...</option> 
       <option value='Colour1'>Colour #1</option> 
       <option value='Colour2'>Colour #2</option> 
       <option value='Colour3'>Colour #3</option> 
       <option value='Colour4'>Colour #4</option> 
      </select> 
     <br /> 
     <label>Quantity:</label> <input type='text' name='form[0][Quantity]' id='Quantity'> 
     <br />   
     <div id="delete_name" style="margin:15px 0px 0px 0px; width:120px; height:30px;"></div> 
     <hr /> 
    </div> 
    <input type="button" id="cloneb" value="Clone" onclick="cloneMe($('#container1'));" /> 
    <input type='submit' name='post' value='Place Order' class='buttons' /> 
</form> 

Как я могу вставить каждую отдельную «клонированную» форму в базу данных как свою собственную строку?

Это насколько я могу получить мои ограниченные знания.

<?php    
    if(isset($_POST['submit'])) { 
     $i = 0; 
     foreach ($_POST as $val){ 
      $style = $_POST['form'][$i]['style']; 
      $Dim= $_POST['form'][$i]['Dim']; 
      $Colour= $_POST['form'][$i]['Colour']; 
      $Quantity= $_POST['form'][$i]['Quantity']; 

    include ('connect.php');  

    $stmt = $db->prepare("INSERT INTO details(Style, Dimensions, Colour, Quantity) VALUES(:Style,:Dimensions,:Colour,:Quantity)"); 

    $stmt->execute(array(':Style' => $Style, ':Dimensions' => $Dim, ':Colour' => $Colour, ':Quantity' => $Quantity));  

     $i++; 
     } 
    }   
?> 

EDIT: Значения, введенные в базу данных, все одинаковы, кроме поля «стиль». Все они принимают значения последней дублированной формы.

Answer 1

Ваш JS-код не работает, поэтому вы получаете только одну строку.

Вместо повторного использования над детьми вы можете редактировать содержимое нового элемента.

var newElem = el.clone().attr('id', 'container' + newNum); 
newElem.html(newElem.html().replace(/form\[0\]/g, 'form['+newNum+']')); 
newElem.html(newElem.html().replace(/id="(.*?)"/g, 'id="1'+newNum+'"')); 

http://jsfiddle.net/fMSa3/1/