将重复的表单字段提交为单独的行

时间:2013-10-11 06:37:41

标签: php jquery forms

我正在重建我的表单以更好地适应我需要它做的事情。现在我只需要知道如何将值输入到我的数据库中。

我的表单字段根据需要重复,并命名为[0] [name],以便将它们视为单独的字段。 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++;
        } 
    }           
?>

编辑:输入数据库的值除“样式”字段外都是相同的。它们都采用最后一个重复形式的值。

1 个答案:

答案 0 :(得分:0)

您的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/