Question

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

每个'克隆'表单字段都有一个带有函数的新名称，但是这个函数似乎很难看到作为表单一部分引入的字段，并且没有为它生成新名称。

有人可以给我这样的方式吗？

功能

$(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();
}

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

功能不重命名从另一页面拉出的字段

1 个答案: