Как изменить имя элемента, которое было клонировано с помощью jquery

Question

Я хочу изменить имя поля ввода. В коде у меня есть имя, начинающееся с myText0, и я хочу, чтобы клоны менялись с шагом myText1, myText2, myText3, myText4 ... в зависимости от количества добавленных ящиков, чтобы каждое поле ввода было названо по-разному.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<?php 
$num = 0; 
echo ' 
<div class="input_fields_wrap"> 
    <button class="add_field_button">Add More Fields</button> 
    <div><input type="text" name="'.${'myText'.$num.}.'"></div> 
</div> 
'; 
?> 

<script type="text/javascript"> 
$(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      //${myText.$num} 
      // I don't know how to add this without php code to keep changing every added input box. 
      $(wrapper).append('<div><input type="text" name="myText"/><a href="#" class="remove_field">Remove</a></div>').clone(true); //add input box 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 
</script> 

Answer 1

В принципе, у вас есть два варианта:

1. Have первое текстовое поле, и для каждого нового ввода, вы просто клонировать его, получить ссылку на этот клон, а затем обновить его имя атрибута , и добавьте его в оболочку.
2. Приложите непосредственно к оболочке элемент ввода, создавая новый каждый раз, когда вам нужно.

Для второго варианта, я только изменил код:

• Там нет необходимости, чтобы клонировать элемент при добавлении его к обертке.
• Вы должны проверить для x <= max_fields.

-

$(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var x = 1; //initial text box count 

    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x <= max_fields){ //max input box allowed 
      $(wrapper).append('<div><input type="text" name="myText' + x + '"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
      x++; //text box increment 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); 
     $(this).parent('div').remove(); 
     x--; 
    }) 
}); 
</script> 

Answer 2

Я не уверен, почему вы вызываете клон на жестком кодированного HTML в JavaScript. Ниже код с добавит DIV в HTML и установите свойство имя на новом eleemnt

$('<div><input type="text"/><a href="#" class="remove_field">Remove</a></div>').appendTo(wrapper).children("input").prop("name", "myText" + x); //add input box 

Answer 3

Вот решение, используя ненавязчивый JavaScript:

function createNewInput() { 
 
\t 
 
\t var inputDiv = document.querySelector('button + div'); 
 
\t var inputs = inputDiv.getElementsByTagName('input'); 
 
\t var lastInput = inputs[(inputs.length - 1)]; 
 
\t var lastInputX = Number(lastInput.getAttribute('name').match(/\d+$/)); 
 

 
\t var newInput = document.createElement('input'); 
 
\t var newType = document.createAttribute('type'); 
 
\t newType.value = 'text'; 
 
\t var newName = document.createAttribute('name'); 
 
\t newName.value = 'myText' + (lastInputX + 1); 
 

 
\t newInput.setAttributeNode(newType); 
 
\t newInput.setAttributeNode(newName); 
 
\t inputDiv.insertBefore(newInput,lastInput); 
 
\t inputDiv.insertBefore(lastInput,newInput); 
 
    } 
 

 
var button = document.getElementsByTagName('button')[0]; 
 
button.addEventListener('click',createNewInput,false);

input { 
 
display: block; 
 
margin: 12px 0; 
 
}

<div class="input_fields_wrap"> 
 
<button class="add_field_button">Add More Fields</button> 
 
<div> 
 
<input type="text" name="myText1" /> 
 
</div> 
 
</div>

Answer 4

Несколько проблем с Подход:

Вы должны убедиться, что одно и то же имя не добавляется несколько раз. Если кто-то добавит myText1, myText2 и myText3 - и затем они удалят myText2, ваша логика будет иметь x установленную в 3 - и добавление другого поля приведет к myText0, myText1, myText3 и другому myText3.

Итак, мы должны убедиться, что мы не добавляем один и тот же вход несколько раз. Используя цикл for, который вы видите ниже (вместо использования переменной x), вы избежите этой проблемы и убедитесь, что используется самое низкое неиспользованное целое число.

Итак, если вы добавите поля 1, 2, 3, 4 и 5 - и затем удалите поле 2, оно обнаружит, что поле 2 не существует и использует это как следующее имя для добавления. Очевидно, что они будут не в порядке (1, 3, 4, 5, 2), но вы избегаете дубликатов и пробелов, поэтому вы можете легко получить доступ к их значениям с помощью другого кода.

Ваша линия .clone не нужна - добавление div в нужный элемент будет достаточным.

Нет необходимости присваивать элементы переменным, если вы только собираетесь ссылаться на них один раз.

Добавляя класс к своим входам, вы можете легко увидеть, сколько их уже существует, и соответственно включить/отключить кнопку «Добавить».

Непроверенные код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<?php 
$num = 0; 
echo ' 
<div class="input_fields_wrap"> 
    <button class="add_field_button">Add More Fields</button> 
    <div><input type="text" class="InputField" name="'.${'myText'.$num.}.'"></div> 
</div> 
'; 
?> 

<script type="text/javascript"> 

$(document).ready(function() { 
     var max_fields  = 10; //maximum input boxes allowed 

     $(".add_field_button").click(function(e){ 
      e.preventDefault(); 
      var newId = 1; 
      for (var i=0;i<max_fields;i++){ 
      if ($("input[name='myText" + i + "']") == null){ //If this control doesn't yet exist, set newId 
       newID = i; 
       break; 
      } 
     } 

    $(".input_fields_wrap").append('<div><input type="text" class="InputField" name="myText' + newId + '"/><a href="#" class="remove_field">Remove</a></div>'); 

    if ($(".InputField".length >= max_fields) //Disable add field button if the max number of fields has been met 
     $(".add_field_button").prop("disabled", true); 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ 
     e.preventDefault(); 
    $(this).parent('div').remove(); //Remove the associated div 
    $(".add_field_button").prop("disabled", false); //Enable the add field button 
    }) 
}); 
</script>