Как разрешить консоли типов ввода записывать то, что отмечены флажками - PullRequest
Новая
       24

Как разрешить консоли типов ввода записывать то, что отмечены флажками

0 голосов
/ 19 июня 2020

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

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

Это ссылка на скрипт https://jsfiddle.net/Nancy4321/hjL3t5qd/

function newForm() {
  var prof = document.querySelector('input[type=radio][name=group2]').value
  var edu_level = document.querySelector('input[type=checkbox][name=group1]').value;
  var pro_other = document.getElementById('pro_other').value;

  var data = {
    "prof": prof,
    "edu_level": edu_level,
    "pro_other": pro_other,
  }
  console.log(data);
}
<body>
  <form>
    <div class="card hoverable">
      <div class="card-content" id="prof">
        <p>Where do you want to go?</p>
        <p>
          <label>
            <input value="Gym" type="checkbox" name="group1" />
            <span>Gym</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Temple" type="checkbox" name="group1" />
            <span>Temple</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Mars" type="checkbox" name="group1" />
            <span>Mars</span>
          </label>
        </p>
        <p>
          <label>
            <input value="space" type="checkbox" name="group1" />
            <span>Space</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Home" type="checkbox" name="group1" />
            <span>Home</span>
          </label>
        </p>

        <p>
          <label>
            <input value="Cali" type="checkbox" name="group1" />
            <span>Cali</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Tulsa" type="checkbox" name="group1" />
            <span>Tulsa</span>
          </label>
        </p>
        <p>
          <label>
            <input value="specify" type="checkbox" name="group1" />
            <span>Other:<input id="pro_other" type="text" placeholder="Please Specify Here"></span>
          </label>
        </p>
      </div>
    </div>

    <div class="card hoverable">
      <div class="card-content" id="edu_level">
        <p>Highest Level of Education </p>
        <p>
          <label>
            <input value="Tertiary" class="with-gap" name="group2" type="radio" />
            <span>Tertiary</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Secondary" class="with-gap" name="group2" type="radio" />
            <span>Secondary</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Junior Secondary" class="with-gap" name="group2" type="radio" />
            <span>Junior Secondary</span>
          </label>
        </p>
      </div>
    </div>

    <div>
      <button type="submit" name="action" onclick="newForm()">Submit
      </button>
    </div>
  </form>
</body>

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Имейте go с этим - вам нужно перебирать флажки

Здесь я получаю значения отмеченных элементов

Обратите внимание, я дал форме идентификатор и удалил встроенную кнопку нажмите 

document.getElementById("newform").addEventListener("submit",function(e) {
  e.preventDefault(); // remove when tested

  const prof = [...document.querySelectorAll('input[type=radio][name=group2]:checked')].map(elem => elem.value)
  const edu_level = document.querySelector('input[type=checkbox][name=group1]:checked').value;
  const pro_other = document.getElementById('pro_other').value;

  var data = {
    "prof": prof,
    "edu_level": edu_level,
    "pro_other": pro_other
  }
  console.log(data);
  
})
<body>
  <form id="newform">
    <div class="card hoverable">
      <div class="card-content" id="prof">
        <p>Where do you want to go?</p>
        <p>
          <label>
            <input value="Gym" type="checkbox" name="group1" />
            <span>Gym</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Temple" type="checkbox" name="group1" />
            <span>Temple</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Mars" type="checkbox" name="group1" />
            <span>Mars</span>
          </label>
        </p>
        <p>
          <label>
            <input value="space" type="checkbox" name="group1" />
            <span>Space</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Home" type="checkbox" name="group1" />
            <span>Home</span>
          </label>
        </p>

        <p>
          <label>
            <input value="Cali" type="checkbox" name="group1" />
            <span>Cali</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Tulsa" type="checkbox" name="group1" />
            <span>Tulsa</span>
          </label>
        </p>
        <p>
          <label>
            <input value="specify" type="checkbox" name="group1" />
            <span>Other:<input id="pro_other" type="text" placeholder="Please Specify Here"></span>
          </label>
        </p>
      </div>
    </div>

    <div class="card hoverable">
      <div class="card-content" id="edu_level">
        <p>Highest Level of Education </p>
        <p>
          <label>
            <input value="Tertiary" class="with-gap" name="group2" type="radio" />
            <span>Tertiary</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Secondary" class="with-gap" name="group2" type="radio" />
            <span>Secondary</span>
          </label>
        </p>
        <p>
          <label>
            <input value="Junior Secondary" class="with-gap" name="group2" type="radio" />
            <span>Junior Secondary</span>
          </label>
        </p>
      </div>
    </div>

    <div>
      <button type="submit" name="action">Submit
      </button>
    </div>
  </form>
</body>
0 голосов
/ 19 июня 2020

Ваша проблема: document.querySelector выбирает только первый элемент. Чтобы сделать то, что вы хотите, вам нужно будет использовать document.querySelectorAll , чтобы выбрать все входы, и получить их значение с помощью l oop.

Или используйте document.querySelector('input[type=radio][name=group2]:checked'), чтобы выбрать только проверил вводы на странице. Подробнее про: проверено здесь .

...