克隆具有唯一ID的輸入字段

Question

我有一個表格，希望用戶可以根據需要添加任意數量的項目。 但是，某些項目需要AJAX調用才能從數據庫中檢索信息，並且該信息將返回到字段中。 當前，替換目標是靜態的，這意味着無論哪個項目調用替換方法，它都只會更改第一個。 我需要它來更改調用它的那個。 我已經堅持了三天，任何幫助將不勝感激！

使用Javascript：

ar uniqueId = 1;

function getAjax(seek, getId, destUrl, reset)
{
var xmlhttp;
if (seek=="")
    {
    document.getElementById(getId).innerHTML=reset;
    return;
    }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('m_width' + getId).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",destUrl+seek,true);
xmlhttp.send();
}




$(function() {
     $('.addRow').click(function() {
         var copy = $("#original").clone(true);
         var formId = 'NewForm' + uniqueId;
         copy.attr('id', formId );
         copy.attr('name', formId );
         $('#item').append(copy);
         $('#' + formId).find('input,select,div').each(function(){
            $(this).attr('id', $(this).attr('id') + uniqueId); 
            $(this).attr('name', $(this).attr('name') + uniqueId); 
         });
         $('#NewForm').style.display = 'inline';
         uniqueId++;  

     });
});

$(function() {
     $('.removeRow').click(function() {
     $(this).parent().remove();
    });
});

HTML：

<div id="container">
    <h3>item</h3>
    <div id="item" class="item" >
        <form action="" id="original">
        <input type="text" class="" id="hidden" value="">
        <select style="width: 160px" id="" name="" onchange="getAjax(this.value, 'm_width', 'm_width.php?media=','')">
                            <?php include 'includes/media.php'; ?>
        </select>

        <div id="m_width">
            <label for="media_color_size">Width: </label>
            <select id='media_color_size' style="width: 160px" disabled>
                <option value="">None</option>
            </select>
        </div>
      <select class="client" id="client" name="client" title="Client">
            <option>Client1</option>
            <option>Client2</option>
            <option>Client3</option>
            <option>Client4</option>
        </select>
        <input type="button" class="removeRow" value="Remove Row"/>
    </div>
    </form>
    <input type="button" class="addRow" value="Add Row" />


</div>

和m_width.php：

<?php
require_once $_SERVER['DOCUMENT_ROOT']. '/dev/scripts/connect.php';
require_once $_SERVER['DOCUMENT_ROOT']. '/dev/scripts/authorize.php';
authorize_user();
$media = trim(strip_tags($_GET["media"]));
$query = "SELECT distinct material_id, width FROM media WHERE material_id = $media;";
$result = mysql_query($query);
echo "<label for='media_color_size'>Width: </label><br />";
echo "<select id='media_color_size' name='media_color_size' class='width' style='width: 160px'>";
echo "<option>Select Width</option>";
while ($row = mysql_fetch_assoc($result)) {
    echo "<option value={$row['media_id']}>{$row['width']}</option>";
}
echo "</select>";
return;
?>

Answer 1

您無需使用唯一的ID即可完成所需的工作。 有太多不必要的開銷。 類選擇器可以正常工作。 這是我的建議； 如果每種形式都在div.item元素內，則使用它進行ajax調用。 另外 ，您不想使用嵌入式JavaScript。

$('div.item form select').not('.client').on('change', function() {
    //save a reference to the select element that triggered the change event
    var that = $(this);
    $.ajax({
        url:  '....',
        ....
        success: function() {
            //get the div.item ancestor of the select that triggered the change event
            var divItem = that.closest('div.item');

            //now change elements only within divItem
         }
    });
});

如您所見，所有這些都是在不引用任何特定形式的ID的情況下完成的。 因此，您可能不需要為表單分配唯一的ID。

概念演示的證明：

 $('div.item form select').not('.client').on('change', function() { alert( $(this).closest( '.container' ).find( 'h3' ).text() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <h3>item 1</h3> <div id="item" class="item" > <form action="" class="original"> <input type="text" class="hidden" value=""> <select style="width: 160px" id="" name=""> <option>One</option> <option>Two</option> <option>Three</option> </select> <div class="m_width"> <label for="media_color_size">Width: </label> <select id='media_color_size' style="width: 160px" disabled> <option value="">None</option> </select> </div> <select class="client" name="client" title="Client"> <option>Client1</option> <option>Client2</option> <option>Client3</option> <option>Client4</option> </select> <input type="button" class="removeRow" value="Remove Row"/> </div> </form> <input type="button" class="addRow" value="Add Row" /> </div> <div class="container"> <h3>item 2</h3> <div id="item" class="item" > <form action="" class="original"> <input type="text" class="hidden" value=""> <select style="width: 160px" id="" name=""> <option>One</option> <option>Two</option> <option>Three</option> </select> <div class="m_width"> <label for="media_color_size">Width: </label> <select id='media_color_size' style="width: 160px" disabled> <option value="">None</option> </select> </div> <select class="client" name="client" title="Client"> <option>Client1</option> <option>Client2</option> <option>Client3</option> <option>Client4</option> </select> <input type="button" class="removeRow" value="Remove Row"/> </div> </form> <input type="button" class="addRow" value="Add Row" /> </div> <div class="container"> <h3>item 3</h3> <div id="item" class="item" > <form action="" class="original"> <input type="text" class="hidden" value=""> <select style="width: 160px" id="" name=""> <option>One</option> <option>Two</option> <option>Three</option> </select> <div class="m_width"> <label for="media_color_size">Width: </label> <select id='media_color_size' style="width: 160px" disabled> <option value="">None</option> </select> </div> <select class="client" name="client" title="Client"> <option>Client1</option> <option>Client2</option> <option>Client3</option> <option>Client4</option> </select> <input type="button" class="removeRow" value="Remove Row"/> </div> </form> <input type="button" class="addRow" value="Add Row" /> </div>