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

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как сделать, что бы в переменную не записывались пустые значения? (https://javascript.ru/forum/dom-window/78436-kak-sdelat-chto-v-peremennuyu-ne-zapisyvalis-pustye-znacheniya.html)

DivMan

14.09.2019 12:18

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

Есть несколько блоков, которые перебираются циклом. В них содержатся инпуты и label, при нажатии на input, в консоль попадает input поле и label для него, в label нету атрибута value, а в input есть и в переменную я записываю значение атрибута value для input, но так как его нету в label, то в переменную попадает пустое значение.

И я решил сделать условие, что бы не попадало пустое значение, можно ли как то этот код улучшить?

<div class="options">
        <input type="hidden" value="18" class="questionId" name="questionId">
          <input type="radio" name="r-1" id="radio-1" value="1" title=""/>
          <label for="radio-1" class="false-answer">Да</label>
          <input type="radio" name="r-1" id="radio-2" value="2" title=""/>
          <label for="radio-2" class="true-answer">Нет</label>
        </div>

<div class="options">
            <input type="hidden" value="17" class="questionId" name="questionId">
          <input type="radio" name="r-2" id="radio-3" value="1" title=""/>
          <label for="radio-3" class="false-answer">Да</label>
          <input type="radio" name="r-2" id="radio-4" value="2" title=""/>
          <label for="radio-4" class="true-answer">Нет</label>
          <input type="radio" name="r-2" id="radio-5" value="3" title=""/>
          <label for="radio-5" class="false-answer">Движение разрешено только по обочине.</label>
        </div>

<div class="options">
        <input type="hidden" value="16" class="questionId" name="questionId">
          <input type="radio" name="r-3" id="radio-6" value="1" title=""/>
          <label for="radio-6" class="false-answer">Да</label>
          <input type="radio" name="r-3" id="radio-7" value="2" title=""/>
          <label for="radio-7" class="true-answer">Нет</label>
        </div>

var ans = document.querySelectorAll('.options');
    
    ans.forEach(function (element, i) {

        ans[i].addEventListener('click', function (e) {
         var inputs = e.target.closest('.options');
         var idQuestion = inputs.getElementsByClassName("questionId")[0].value;
            
        var answer = '';
           
           if(e.target.hasAttribute('value')) {
             answer = e.target.value;
           }

            else {
                return; // что бы не попадало пустое значение
            }

        console.log(answer);
        
 })

    })

laimas

14.09.2019 13:48

И зачем такие сложности.

var ans = document.querySelectorAll('.options');
     
ans.forEach(function (element) {
    element.addEventListener('change', function (e) {
        console.log(e.target) //это та радио кнопка, которую выбрали и значение которой является значением группы
         
    }) 
})

рони	14.09.2019 13:51

DivMan,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div class="options">
        <input type="hidden" value="18" class="questionId" name="questionId">
          <input type="radio" name="r-1" id="radio-1" value="1" title=""/>
          <label for="radio-1" class="false-answer">Да</label>
          <input type="radio" name="r-1" id="radio-2" value="2" title=""/>
          <label for="radio-2" class="true-answer">Нет</label>
        </div>

<div class="options">
            <input type="hidden" value="17" class="questionId" name="questionId">
          <input type="radio" name="r-2" id="radio-3" value="1" title=""/>
          <label for="radio-3" class="false-answer">Да</label>
          <input type="radio" name="r-2" id="radio-4" value="2" title=""/>
          <label for="radio-4" class="true-answer">Нет</label>
          <input type="radio" name="r-2" id="radio-5" value="3" title=""/>
          <label for="radio-5" class="false-answer">Движение разрешено только по обочине.</label>
        </div>

<div class="options">
        <input type="hidden" value="16" class="questionId" name="questionId">
          <input type="radio" name="r-3" id="radio-6" value="1" title=""/>
          <label for="radio-6" class="false-answer">Да</label>
          <input type="radio" name="r-3" id="radio-7" value="2" title=""/>
          <label for="radio-7" class="true-answer">Нет</label>
        </div>
  <script>
    var ans = document.querySelectorAll('.options');
    ans.forEach(function (element, i) {
        var idQuestion = element.querySelector(".questionId").value;
        element.addEventListener('change', function (e) {
        var answer = e.target.value;
        console.log(idQuestion, answer)
         })
    })
  </script>
</body>
</html>

рони	14.09.2019 13:56

Цитата:

Сообщение от laimas

'change'

код выше исправил :thanks:

laimas

14.09.2019 14:09

рони,
а зачем так element.querySelector(".questionId").value;, если достаточно e.target.value;?

DivMan

14.09.2019 15:00

Спасибо

DivMan

14.09.2019 15:02

Цитата:

Сообщение от laimas (Сообщение 512743)

рони,
а зачем так element.querySelector(".questionId").value;, если достаточно e.target.value;?

Это для скрытого поля

laimas

14.09.2019 15:28

Цитата:

Сообщение от DivMan

Это для скрытого поля

А зачем еще и скрытые поля?

DivMan

14.09.2019 15:47

Цитата:

Сообщение от laimas (Сообщение 512749)

А зачем еще и скрытые поля?

Что бы для AJAX передать id поста

laimas

14.09.2019 15:51

Цитата:

Сообщение от DivMan

Что бы для AJAX передать id поста

У вас что вне формы это все?

DivMan

14.09.2019 19:42

Цитата:

Сообщение от laimas (Сообщение 512751)

У вас что вне формы это все?

<div class="box-question">
      <div class="box-title-question">
        <p>Вопрос <strong><span>16</span>/<span>18</span></strong></p>
        <input type="checkbox" title="" id="check-info-3"/>
        <label for="check-info-3" class="icon-info">
          <img src="img/icons/icon-17.png" alt="icon" title=""/>
        </label>
        <div class="box-info">
          <span class="address">Красная пл., Москва, Росія </span>
          <span class="data">10.07.19</span>
          <span class="name">Дмитрий</span>
          <span class="view">266</span>
        </div>
      </div>
      <div class="question-img">
        <img src="img/photo/img-3.jpg" alt="" title=""/>
      </div>
      <div class="question">
        <div class="text-question">
          <p>Должны ли вы уступить дорогу, попутным автомобилям, двигаясь слева от вас уступить дорогу, попутным
            автомобилям, двигаясь слева от вас??</p>
          <span class="true"></span>
        </div>
        <div class="options">
        <input type="hidden" value="16" class="questionId" name="questionId">
          <input type="radio" name="r-3" id="radio-6" value="1" title=""/>
          <label for="radio-6" class="false-answer">Да</label>
          <input type="radio" name="r-3" id="radio-7" value="2" title=""/>
          <label for="radio-7" class="true-answer">Нет</label>
        </div>
        <div class="additionally">
          <a href="#">Показать ответ</a>
          <div>
            <button type="button">Добавить в закладки</button>
            <a href="#">1 комментарий</a>
          </div>
        </div>
      </div>
    </div>

laimas

14.09.2019 20:48

Если бы в вашем сценарии событие изменения в группе кнопок порождало запрос к серверу тогда еще можно было бы понять к чему это. Но этого не видно и если запрос, это не связанное событие с изменениями в группах, то почему не отослать форму, которой у вас почему-то нет?

Если весь этот сыр бор ради того чтобы связать каждую группу кнопок с ID, то лучше поступать не так, и связывать группы с ID нужно по ключу. То есть, именовать поля например так (лишнее убрано и для упрощения связь меток с полями через вложение):

<div class="options">
    <label class="false-answer"><input type="radio" name="question[18]" value="1"/> Да</label>
    <label class="false-answer"><input type="radio" name="question[18]" value="2"/> Нет</label>
</div>
 
<div class="options">
    <label class="false-answer"><input type="radio" name="question[17]" value="1"/> Да</label>
    <label class="false-answer"><input type="radio" name="question[17]" value="2"/> Нет</label>
    <label class="false-answer"><input type="radio" name="question[17]" value="3"/> Движение разрешено только по обочине.</label>
</div>
 
<div class="options">
    <label class="false-answer"><input type="radio" name="question[16]" value="1"/> Да</label>
    <label class="false-answer"><input type="radio" name="question[16]" value="2"/> Нет</label>
</div>

Никаких обработчиков выбора в группах конечно же при этом не нужно, а отправив форму сервер получит массив, в случае РНР это будет $_POST/$_GET, к примеру при таком выборе в группах:

Array
(
    [question] => Array
        (
            [18] => 1
            [17] => 3
            [16] => 2
        )

)

То есть ключ question содержит ключи выбранных групп (ID) и выбранное значение в группе.

DivMan

14.09.2019 21:51

var ans = document.querySelectorAll('.options');
    
    var otvet = document.querySelectorAll(".otvet");

    ans.forEach(function (element, i) {

        ans[i].addEventListener('click', function (e) {

            var inputs = e.target.closest('.options');
            var idQuestion = inputs.getElementsByClassName("questionId")[0].value;
            var answer = '';
           
           if(e.target.hasAttribute('value')) {
             answer = e.target.value;
           }

            else {
                return; // что бы не попадало пустое значение
            }
           
           //console.log(answer);
           
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                type: 'get',
                url: '/check-answer/' + idQuestion,
                dataType: 'json',
                data: {answer: answer},
                success: function (result) {

                    if (result == 1) {
                        if(otvet[i].classList.contains('false')) {
                            otvet[i].classList.remove('false');
                        }
                        otvet[i].classList.add('true');
                        
                    } else if (result == 2) {
                        if(otvet[i].classList.contains('true')) {
                            otvet[i].classList.remove('true');
                            }
                             otvet[i].classList.add('false');
                    }
                    console.log(result);

                },

                error: function () {
                    otvet[i].innerHTML = 'Ошибка сайта';

                }

            });
            

        })

    })

laimas

14.09.2019 22:16

Понятно, по изменению.
А e.target.hasAttribute('value') для чего, огрехи html?

DivMan

15.09.2019 20:33

Цитата:

Сообщение от laimas (Сообщение 512758)

Понятно, по изменению.
А e.target.hasAttribute('value') для чего, огрехи html?

Для того, что бы value не искался у label

laimas

15.09.2019 20:56

Цитата:

Сообщение от DivMan

Для того, что бы value не искался у label

Label устанавливает связь между меткой и элементом формы, и она позволяет изменять значения элементов формы при нажатии курсором мыши на метку. То есть, щелкая хоть по метке, хоть по кнопке, в любом случае произойдет событие в самой кнопке. В индивидуальном обработчике кнопки/флажка вполне будет работать и click, а вот при делегировании это событие не подходит для кнопок и флажков, хотя можно и проверять источник, но корректней все таки не атрибут value, поля могут и не содержать этот атрибут, но при этом это не будет проблемой. При делегировании для кнопок и флажков нужно обрабатывать событие change, а источником его всегда будет только поле, а не метка и т.п..

Часовой пояс GMT +3, время: 05:15.