Динамическое добавление значения в input text

12 января 2021, 13:50

Нужно динамически (id будут подставляться автоматически) при клике добавлять значения input в другой input. Как это сделать? Сейчас добавляет только первое значение.

Значения при нажатии кнопок в поля заменяются.
Одна кнопка add добавляет значение в name="add" и заменяется сама на другую кнопку del после нажатия, и наоборот, появившиеся кнопка del вместо add, добавляет то же значение (id, value) в другое поле name="del"
Не трогая name="add" (взаимно)
И наоборот постоянное переключение кнопок одна взаимен другой.

<script type="text/javascript">
                $(document).ready(function() {
                  $("input[class^='locatio-']").on('click', function () {
                     $("input[name=add]").val($("input[class^='location-']").val());
                      });
                  });
</script>

<input type="text" name="add" value="" />
<input type="text" name="del" value="" /> 
<input type="text" class="location-1" value="1" />
<input type="button" class="add-1" value="add1" />
<input type="button" class="del-1" value="del1" />
<input type="text" class="location-2" value="2" />
<input type="button" class="add-2" value="add2" />
<input type="button" class="del-2" value="del2" />
<input type="text" class="location-3" value="3" />
<input type="button" class="add-3" value="add3" />
<input type="button" class="del-3" value="del3" />
<input type="text" class="location-4" value="4" />
<input type="button" class="add-4" value="add4" />
<input type="button" class="del-4" value="del4" />

Answer 1

что-то такое вам надо?

$(".add").click(function(){ 
 
   var append = $("#mode").prop('checked'); 
   var value = null; 
 
   if(append){ 
      value =  $(this).siblings(".location").val(); 
   } 
   else{    
       value = $(".location").map( function(){  
                     return $(this).val();  
                  }).get().toString(); 
   } 
                   
  $("#favadd").val(value); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<label><input type="checkbox" id="mode"/>Добавлять/заменять</label><br/> 
 
<input type="text" id="favadd" value="" /> 
 
<div> 
  <input type="text" name="location[]" class="location" value="1" /> 
  <button class="add">+</button> 
</div> 
 
<div> 
  <input type="text" name="location[]" class="location" value="2" /> 
  <button class="add">+</button> 
</div>

Answer 2

Попробуйте вот так:

$(document).ready(function() { 
  $("input[type='button']").on('click', function () { 
    // Надо получить инпут связанный с кнопкой 
    const location = $(this).attr('class'); 
    const $input = $(`input[type='text'].${location}`); 
    $("input[name=add]").val($input.val()); 
  }); 
});

input { 
  display: block; 
  margin: 10px 0; 
  width: 150px; 
  box-sizing: border-box; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type="text" name="add" value="" /> 
<hr> 
<input type="text" class="location-1" value="1" /> 
<input type="button" class="location-1" value="1" /> 
<input type="text" class="location-2" value="2" /> 
<input type="button" class="location-2" value="2" /> 
<input type="text" class="location-3" value="3" /> 
<input type="button" class="location-3" value="3" /> 
<input type="text" class="location-4" value="4" /> 
<input type="button" class="location-4" value="4" />