0

我有一个在需要时克隆的表单，在这个表单内我有一个 div，这个 div 被从另一个页面拉取的 div 替换，该页面具有基于上述字段的选择选项的新选择选项。

每个“克隆”表单字段都有一个新名称和一个函数，但这个函数似乎很难看到作为表单一部分拉入的字段并且没有为其生成新名称。

有人可以给我指路吗？

功能;

$(document).ready(function() {
    var newNum = 2;
    cloneMe = function(el) {
        var newElem = el.clone().attr('id', 'container' + newNum);
        newElem.html(newElem.html().replace(/form\[1\]/g, 'form['+newNum+']'));
        newElem.html(newElem.html().replace(/id="(.*?)"/g, 'id="1'+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">
        <div class="instance" id="instance">
            <label>Style:</label>
                <select name='form[1][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[1][Dim]' id='Dim'>
                        <option value='0' class='red'>Select the dimensions...</option> 
                    </select>
            </div>
            <br />
            <label>Colour:</label>
                <select name='form[1][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[1][Quantity]' id='Quantity'>
            <br />              
        </div>  
        <div id="delete_name" style="margin:15px 0px 0px 0px; width:120px; height:30px;"></div>
    </div>
    <input type="button" id="cloneb" value="Clone" onclick="cloneMe($('#container1'));" />
    <input type='submit' name='submit' value='Submit' class='buttons'>
</form>

从 get_dim.php 中提取的字段；

<label>Dimensions:</label>
    <select name='form[1][Dim]' id='Dim'>
        <option value='0' class="red">Select the dimensions...</option>                 
            <?php       

            $id = intval($_GET['id']);

            include ('connect.php');
            $getcus = $db->prepare("SELECT Dim_ID, Dim FROM dimentions WHERE Style_ID=? ORDER BY Dim ASC "); 
            $getcus->execute(array($id));
            while($row = $getcus->fetch(PDO::FETCH_ASSOC)) {    
                $Dim_ID = $row['Dim_ID'];
                $Dim = $row['Dim'];                 
                echo "      <option value='$Dim_ID'>$Dim</option>";
                }   
            ?>
    </select>

用get_dim.php替换dimdiv的函数；

function showDim(elem)
{
    var elems = document.getElementsByClassName('style'),
        groupIndex = -1,
        targetDimDiv,
        i;
    for( i = 0; i < elems.length; ++i ) {
        if( elems[i] == elem ) {
            groupIndex = i;
            break;
        }
    }
    if( groupIndex == -1 )
    {
        return;
    }
    targetDimDiv = document.getElementsByClassName('dimdiv')[groupIndex];
    if (elem.value == "")
    {
        targetDimDiv.innerHTML="";
        return;
    }       
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange = function( ) {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
            targetDimDiv.innerHTML = xmlhttp.responseText;
        }
    };          
    xmlhttp.open("GET","get_dim.php?id="+elem.value,true);
    xmlhttp.send();
}
4

1 回答 1

1

您的问题是，它form[1][Dim]被硬编码为get_dim.php. 当您克隆一个表单时，您更改了每个元素的名称，但是这个 AJAX 请求仍然会返回一个带有名称的表单元素form[1][Dim]。

您可以通过读出当前的表单 id 并将其传递给get_dim.php并在那里动态生成名称来解决此问题。

您必须更改的部分（大致）：

替换功能：

form_id = groupIndex + 1; // if I get groupIndex right
xmlhttp.open("GET","get_dim.php?id="+elem.value+"&form_id="+form_id,true);

get_dim.php：

<select name='form[<?php echo intval($_GET['form_id']); ?>][Dim]' id='Dim'>
于 2013-10-12T08:23:06.623 回答