0

Есть див в текстом и есть 4 пустых инпута. Нужно, если все 4 инпута заполнены, то динамически подставлять все их значения в этот див, а если хотя бы один не заполнен, то оставлять див без изменений. Как это реализовать?

1
  • Проверяете на заполненность высе инпуты и если заполнены, то копируете value каждого инпута в div :)
    – meine
    4 апр 2019 в 12:00

2 ответа 2

2

нечто подобное?

$("input").keyup(function(){
   var values = $("input").map(function(){ return $(this).val(); })
                   .get()
                   .filter(v => v.trim() != "");
   
   
   if(values.length == 4){ 
      $("div").text( values.join(',') );
   }
  
});
div {
   min-height: 50px;
   border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>text</div>

<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>

1

Можно как-то так

const values = {
inp1:null,
inp2:null,
inp3:null,
inp4:null
}

function setContent(event){
const inputId = event.target.id
const value = event.target.value
values[inputId] = value

if(Object.keys(values).every(key=>!!values[key] && values[key]!=='')){
 const text = Object.keys(values).map(key=>values[key])
  $('#content').text(text.map(value=>value))
}

}

$('#inp1').on('input', setContent)
$('#inp2').on('input', setContent)
$('#inp3').on('input', setContent)
$('#inp4').on('input', setContent)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id='inp1' />
<input id='inp2' />
<input id='inp3' />
<input id='inp4' />

<div id='content'></div>

1
  • Тяжелое решение, но имеет право на существование.
    – meine
    4 апр 2019 в 12:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.