как сгенерировать id с клоном и поставить в него значение textbox - PullRequest
Новая
       8

как сгенерировать id с клоном и поставить в него значение textbox

0 голосов
/ 19 сентября 2018

, пожалуйста, помогите решить эту проблему, мне нужно увеличивать id каждый раз, когда пользователь клонирует строку нажатием кнопки, теперь клон работает нормально, но проблема с id =, мне нужно сгенерировать новый id для каждого клона и установить его в значениетекстовое поле "идентификатор файла" проверьте код также здесь jsfiddle 

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>   
<script>
$(document).ready(function(){
$( ".add-row" ).click(function(){
    var $clone = $( "ul.personal-details" ).first().clone();
    $clone.append( "<button type='button' class='remove-row'>-</button>" );
    $clone.insertBefore( ".add-row" );
});
$( ".form-style-9" ).on("click", ".remove-row", function(){
    $(this).parent().remove();
});
});
</script>
</head>
<body>
<span class="form-style-9">
<ul class="personal-details">
    <table class="stretch" border="0">
        <tr>
            <td><label for="fname">File ID</label>
            <input name="fileid2[]" type="text" class="stretchnights" id="fileid2" value=""></td>       
<td>
<label for="fname">First Name</label>
<input  name="fname[]"  type="text" class="stretch" size="15"  maxlength="30" required >
            </td>
            <td>
                    <label for="lname">Last Name</label>
                    <input  name="lname[]"  type="text" class="stretch" size="15" maxlength="30" required  >
                </td>
           </tr>
    </table>
    </ul>
    <button type="button" class="add-row">+ New Client</button>
   <table width="25%" border="0"> <tr> <input type="submit" name="Submit" value="Insert"></tr></table>
  </span>
</body>
</html>

1 Ответ

0 голосов
/ 19 сентября 2018

1-й: выберите вход в клон с помощью $clone.find('.stretchnights');

2-й: для увеличения идентификатора на единицу при каждом нажатии нужной кнопки добавлениячтобы установить переменную вне события щелчка var id=0 измените 0 на любое число, которое нужно начать с

3-й: измените идентификатор входа с помощью .attr('id' , newid) и измените его значение с помощью .val(newid) Вы можете сделать это двумя способами в одну строку

4-е: увеличить идентификатор на единицу после добавления финиша, используя id++

$(document).ready(function(){
  var id = 0;    // change 0 to the number you want to start with
  $( ".add-row" ).click(function(){
      var $clone = $( "ul.personal-details" ).first().clone();
      var $input = $clone.find('.stretchnights');
      $input.val('fileid'+id).attr('id' , 'fileid'+id)  // change fileid with any string you want 
      $clone.append( "<button type='button' class='remove-row'>-</button>" );
      $clone.insertBefore( ".add-row" );
      id++; // increase id by 1
  });
  $( ".form-style-9" ).on("click", ".remove-row", function(){
      $(this).parent().remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="form-style-9">
<ul class="personal-details">
    <table class="stretch" border="0">
        <tr>
            <td><label for="fname">File ID</label>
            <input name="fileid2[]" type="text" class="stretchnights" id="fileid2" value="fileid2"></td>        
<td>
<label for="fname">First Name</label>
<input  name="fname[]"  type="text" class="stretch" size="15"  maxlength="30" required >
            </td>
            <td>
                    <label for="lname">Last Name</label>
                    <input  name="lname[]"  type="text" class="stretch" size="15" maxlength="30" required  >
                </td>
           </tr>
    </table>
    </ul>
    <button type="button" class="add-row">+ New Client</button>
   <table width="25%" border="0"> <tr> <input type="submit" name="Submit" value="Insert"></tr></table>
  </span>
...