Как сохранить значения разных кнопок отдельно в текстовом поле при событии клика, используя Javascript? - PullRequest
Новая
       59

Как сохранить значения разных кнопок отдельно в текстовом поле при событии клика, используя Javascript?

0 голосов
/ 10 марта 2019

Я работаю над модулем посещаемости, и это прототип кода, но у меня есть некоторые ошибки.

Как вы можете видеть, есть динамически генерируемые кнопки, которые меняют цвет при событии нажатия.Я также сохраняю значение кнопок в текстовых полях при щелчке, так как мне приходится обрабатывать эти данные на бэкэнде с помощью PhP, ошибка в том, что, когда я поворачиваю кнопку в зеленый цвет, ее значение переходит в текстовое поле, а когда снова я его тоже красныйзначение также входит в другое текстовое поле, которое я не хочу.Поэтому, пожалуйста, помогите мне решить эту проблему, уменьшив дублирование данных или предоставив код другой кнопки отправки, которая при нажатии проверяет цвет всех кнопок и сохраняет значения в разных текстовых полях соответственно: одно для красного и одно для зеленого,Заранее спасибо. 

<html>
  <head>
    <title>Button click event</title>
    </head>
  <body>

  <?php
  for($i=0;$i<=10;$i++) {
    ?>
    <button class="btnColorChange" id="<?php echo $i; ?>" style="background-color:#FF0000"><?php echo $i; ?></button>
    <?php
  }
  ?>

  <div>
    <input type="text" name="text1" id="textbox1" value=""/><br><br>
    <input type="text" name="text2" id="textbox2" value=""/><br><br>
  </div>

  <script>
  $(".btnColorChange").click(function(){
    xyz = this.id
    if(this.clicked){
      $(this).css('background-color', '#FF0000');
      const tb=document.querySelector("#textbox1");
      tb.value=tb.value+","+xyz;
      console.log(xyz)
      this.clicked  = false;
    } else {
      $(this).css('background-color', '#008000');
      const tb2=document.querySelector("#textbox2");
      tb2.value=tb2.value+","+xyz;
      console.log(xyz)
      this.clicked  = true;
    }
  });
  </script>

  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 11 марта 2019

Если я вас хорошо понял, вы хотите, например, кнопку для обработки обновлений textbox1 при первом нажатии и обновления textbox2 при втором нажатии. Вы могли бы сделать это. 

$(".btnColorChange").on("click", function(){
    var btn = $(this);
    var id = btn.attr("id");

    if(btn.hasClass('clicked')){
        var textboxselected = $("#textbox1");
        var backgroundColor = "#FF0000";
        btn.removeClass('clicked');
    }else{
        var textboxselected = $("#textbox2");
        var backgroundColor = "#008000";
        btn.addClass('clicked');
    }
    btn.css("background-color", backgroundColor);
    textboxselected.val(textboxselected.val()+id);
});

Предположим, вы хотите обновить то же текстовое поле 

$(".btnColorChange").on("click", function(){
    var btn = $(this);
    var id = btn.attr("id");
    var textvalue = $("#textbox1").val();

    if(btn.hasClass('clicked')){
        var backgroundColor = "#FF0000";
        btn.removeClass('clicked');
    }else{
        var backgroundColor = "#008000";
        btn.addClass('clicked');
    }
    btn.css("background-color", backgroundColor);
    $("#textbox1").val(textvalue);
});

Не проверено, но надеется, что оно работает для вас.

0 голосов
/ 10 марта 2019

Во-первых, приведенное ниже утверждение неверно:

есть динамически генерируемые кнопки ...

Говоря о «динамических» элементах, мы говорим об элементе, которого не было при загрузке страницы. Это не тот случай, так как они были созданы до загрузки страницы на стороне сервера. Использование цикла не делает их «динамическими».

Для хранения идентификаторов кликов / не кликов, я предлагаю вам использовать для этого несколько массивов.

Насколько я понимаю, вы хотите, чтобы все "нажали" и "не нажали" идентификаторы отдельно.
"никогда не нажимал" игнорируются.

Используя два массива, вы можете хранить идентификаторы в соответствующей группе ... И даже сортировать их (опционально).

И вы можете отправлять эти массивы прямо на ваш бэкэнд ... Так что элементы input теперь будут только для целей тестирования.

Смотрите комментарии в коде: 

// Arrays to store ids
var clicked = [],
    unclicked = [];

$(".btnColorChange").on("click",function(){
  // useful for this demo
  console.clear();

  // Get the clicked element id
  var this_id = this.id;
  console.log("Clicked id: "+this_id);

  // Toggle the classes (button colors)
  $(this).toggleClass("clicked unclicked");

  // Check if in array
  var in_clicked = $.inArray(this_id,clicked);
  var in_unclicked = $.inArray(this_id,unclicked);
  //console.log(in_clicked+" "+in_unclicked)

  // If clicked
  if($(this).hasClass("clicked")){
    if(in_clicked==-1){
      clicked.push(this_id);
      clicked.sort();
    }
    if(in_unclicked>-1){
      unclicked.splice(in_unclicked,1);
    }
  }

  // If unclicked
  if($(this).hasClass("unclicked")){
    if(in_unclicked==-1){
      unclicked.push(this_id);
      unclicked.sort();
    }
    if(in_clicked>-1){
      clicked.splice(in_clicked,1);
    }
  }

  // Show arrays content in console
  console.log(clicked);
  console.log(unclicked);

  // Show the ids in inputs as a coma separated string
  $("#textbox1").val(clicked.join(","));
  $("#textbox2").val(unclicked.join(","));
});
.unclicked{
  background-color: #FF0000;
}
.clicked{
  background-color: #008000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btnColorChange unclicked" id="1">1</button>
<button class="btnColorChange unclicked" id="2">2</button>
<button class="btnColorChange unclicked" id="3">3</button>
<button class="btnColorChange unclicked" id="4">4</button>
<button class="btnColorChange unclicked" id="5">5</button>
<br>
<br>
<div>
  <input type="text" name="text1" id="textbox1" value=""/><br><br>
  <input type="text" name="text2" id="textbox2" value=""/><br><br>
</div>

Пожалуйста, запустите фрагмент в режиме полной страницы из-за журналов консоли.

Для дополнительной информации в приведенной ниже демонстрационной программе используются следующие методы:

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

CodePen

...