函数不重命名从另一个页面拉取的字段


Function not renaming field pulled from another page

我有一个在需要时克隆的表单,在这个表单中我有一个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();
}

您的问题是,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'>