Форум

snut8 · #1 (**permalink**) 06.06.2018, 14:56

Доброго времени суток уважаемые форумчане. Мне необходимо что бы в определенный input добавлялось несколько значений из diva.

Есть такой код:

if ($("input[id='"+id+"']").length) {
  $('#'+id).val($(this).find(".value").text());
}
	else {
	 $("#hidden").after('<input id="'+id+'" type="hidden" name="'+name+'" value="'+$(this).find(".value").text()+'">');
	}

Суть в том, что на странице несколько дивов с классом value, если произошёл клик по диву, то происходит проверка если на странице нету нужного инпута, он создаётся и помещается в него значение из дива по которому произошёл клик, а если инпут есть, то просто меняется значение.

Мне надо сделать так, что бы при клике по нескольким дивам в инпут так же добавлялись их значения. т.е. допустим есть код

<div class="value">1</div>
<div class="value">2</div>
<div class="value">3</div>
<div class="value">4</div>

мне надо что бы по клику на дивы в инпут с определенным айди добавлялись значения и происходила проверка, было ли данное значение добавлено ранее, если да, то ничего не меняется, если нет, то в инпут добавляется значение.

то есть что бы при клики на 1 3 и 4 див в инпуте получилось так

<input id="2" type="hidden" name="name" value="1 3 4">

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

Надеюсь понятно объяснил...

animhotep · #2 (**permalink**) 06.06.2018, 17:05

для начала так
https://codepen.io/animhotep/pen/qKNgxj?editors=1111
осталось проверку добавить)

рони · #3 (**permalink**) 06.06.2018, 17:34

snut8,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .value {
         border: solid 1px rgba(255, 0, 0, 1);
         width: 100px;

     }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
   var inp = document.querySelector("#two") || $("<input>", {/*type : "hidden",*/ name : "test", id : "two"}).appendTo("body")[0];
   $(".value").on("click", function() {
   if($(this).is(".add")) return;
   $(this).addClass("add");
   var text = $.map($(".add"), $.text);
   inp.value = text.join(" ");
})
});
  </script>
</head>

<body>
<div class="value">1</div>
<div class="value">2</div>
<div class="value">3</div>
<div class="value">4</div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript