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>

dimdiv を get_dim.php に置き換える関数。

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 に答える