克隆具有唯一 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>