無法獲取動態生成的文本框數組的發布值

Question

我有一個具有2個下拉列表“文憑”和“字段”的表單，一個提交按鈕和一個“添加”按鈕，只要文本框的數量少於以下數目，該按鈕會將下拉列表的選定值復制到一些動態生成的文本框中5這是表單內包含的dipSecSelection.php文件的代碼：

<!----------- The dipSecSelection File ------------->
<div id="dipSecSelection">
    <table>
        <tr>
            <td><label for="diplomes">Diplome:</label></td>
            <td>
                <select name="Diplomes" id="Diplomes">
                    <option value="na">--Diplome--</option>
                    <option value="Technician">Technician</option>
                    <option value="Master">Master</option>
                    <option value="PhD">PhD</option>    
                </select>    
            </td>
            <td id="separator">|</td><!-- Separator -->
            <td><label for="secteurs">Secteur:</label></td>
            <td>
                <select name="Secteurs" id="Secteurs">
                    <option value="na">--Secteur--</option>
                    <option value="Software Dev">Software Dev</option>
                    <option value="Engineering">Engineering</option>
                    <option value="Physics">Physics</option>
                </select>
            </td>
            <td>
                <a href="#" Onclick="addDipSec()" value="Add" class="button">Add</a>
            </td>
            </tr>
    </table>
    <table>
        <tr>
            <td><div id='DipTextBoxesGroup'></div></td>
            <td><div id='SecTextBoxesGroup'></div></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    //Diplomas textBoxes!!!
    var counterdip = 1;
    var countersec = 1;
    function addDipSec(){
        if(counter>5){
            alert("Only 5 Diplomas allow");
            return false;
        }           
        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counterdip);
        newTextBoxDiv.after().html('<label>Diplome #'+ counterdip + ' : </label>' +
            '<input type="text" name="dipBox[]" id="textboxdip' + counterdip + '" value="" >');
        newTextBoxDiv.appendTo("#DipTextBoxesGroup");
        $('#textboxdip'+counterdip).val($('#Diplomes option:selected').html());
        counter++;

        //Secteurs textBoxes
        if(countersec>5){
            alert("Only 5  Setors are allowed");
            return false;
        }  
        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + countersec);
        newTextBoxDiv.after().html('<label>Secteur #'+ countersec + ' : </label>' +
              '<input type="text" name="secBox[]" id="textboxsec' + countersec + '" value="" size="35">');
        newTextBoxDiv.appendTo("#SecTextBoxesGroup");
        $('#textboxsec'+countersec).val($('#Secteurs option:selected').html());
        countersec++;
        alert(secBox[0].val);
}
</script>

這是PHP代碼：

<form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="POST" enctype="multipart/form-data">
    <?php include'includes/dipSecSelection.php'?>
    <?php
        if(isset($_POST['dipBox']) && isset($_POST['secBox'])){
            if(!empty($_POST['dipBox'])&&!empty($_POST['secBox'])){
                $dip= $_POST['dipBox'];
                $sec= $_POST['secBox'];
                $N = count($dip);
                for($i=0; $i < $N; $i++){
                    $add_AnnDipSec = "INSERT INTO annDipSec VALUES('$dip[$i]','$sec[$i]')";
                    if(mysqli_query($connection, $add_AnnDipSec)){
                        echo'Successfully Added to AnnDipSec';
                    }else{echo'Error while trying to insert into AnnDipSec';}
                }
            }else{echo"Dip and Sec were Empty";}
        }                            
    ?>
    <input type="submit" name="submit" value="Submit" class='button'>
</form>

問題在於， dipBox[]和secBox[]永遠不會設置，並且始終不返回任何內容，因此它們永遠不會插入到數據庫表中。

Answer 1

選擇器$('#Diplomes :selected')缺少option

嘗試這種方式-

$('#textboxdip'+counterdip).val($('#Diplomes option:selected').html());

這也是

$('#textboxsec'+countersec).val($('#Secteurs option:selected').html());

Answer 2

我剛剛解決了問題！ 當我拉表格時，我將表格標簽放在第一個表格中