Сохранение значения флажка в массиве при нажатии (jQuery) - PullRequest
Новая
       7

Сохранение значения флажка в массиве при нажатии (jQuery)

0 голосов
/ 02 августа 2020

Я пытаюсь сделать генератор анекдотов. Пользователь может выбирать между Программированием, Разным и Темными шутками (или двумя / всеми, но не может выбрать ни одной). Прямо сейчас для моих Javascript и HTML у меня это: 

$("#first-input").val("Programming");
  $("#middle-input").val("Miscellaneous");
  $("#bottom-input").val("Dark");

  let checkboxes = $(".content-top input[type=checkbox]");
  let submitButton = $("button[type=submit]");
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Joke</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
        <form action="/joke" method="POST">
            <div class="section">
                <label><span>*</span> Select a category / categories:</label>
                <div class="content content-top">
                    <input type="checkbox" name="category" id="first-input">
                    <h5>Programming</h5>
                    <br>
                    <input type="checkbox" name="category" id="middle-input">
                    <h5>Miscellaneous</h5>
                    <br>
                    <input type="checkbox" name="category" id="bottom-input">
                    <h5>Dark Jokes</h5>
                </div>
            </div>
            <button type="submit">Generate Joke</button>
        </form>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

HTML У меня сейчас три флажка с одинаковым атрибутом имени, но с разными установленными значениями (значения были установлены в Javascript выше) . Как мне использовать jQuery, чтобы при нажатии кнопки отправки появлялся массив, а элементы в массиве проверялись пользователем? Так, например: если пользователь выбирает флажки «Программирование», «Разное» и «Темный», в массиве будет 3 элемента (три элемента будут «Программирование», «Разное» и «Темное»). Затем, если пользователь снимет флажок «Темный» (теперь отмечены только флажки «Программирование» и «Разное»), массив также удалит элемент «Темный» и теперь будет иметь только 2 элемента.

Я много чего пробовал и искал в Google, и пробовал использовать "input: checked", is (), et c. но я не мог понять, как заставить его работать.

Вопрос: Как мне получить массив, а элементы в массиве являются значениями флажков, отмеченных пользователем (например, «Программирование», «Темный» и т. д. c.) без повторов, и если пользователь, например, первоначально установил все три флажка, а затем перейдет к снятию флажка «Темный», массив также должен удалить «Темный» как один из его предметов.

Я застрял на этом несколько часов и был бы очень признателен за любую помощь, спасибо!

Ответы [ 3 ]

1 голос
/ 02 августа 2020

Сначала измените ваши флажки, чтобы объявить их значения в HTML: 

<input type="checkbox" name="category" id="first-input" value="programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="dark">
<h5>Dark Jokes</h5>

Добавьте следующий атрибут onclick к вашей кнопке отправки: 

<button type="submit" onclick="submit(event)">Generate Joke</button>

Затем добавьте следующий тег скрипта после вашего включения jQuery: 

<script type="text/javascript">
  window.submit = event => {
    event.preventDefault();

    let checkedValues = Array.from($('input:checked')).map(input => input.value);
    // ... looks like, e.g., ["programming", "miscellaneous"]

    // ... do stuff with checkedValues here...
    console.log(checkedValues);
  };
</script>

Я добавил event.preventDefault(), чтобы форма фактически ничего не отправляла на сервер. Похоже, вам это понадобится, если вы хотите сначала сделать что-то в JS.

Все должно выглядеть так: 

<form id="form" action="/joke" method="POST">
      <div class="section">
          <label><span>*</span> Select a category / categories:</label>
          <div class="content content-top">
<input type="checkbox" name="category" id="first-input" value="programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="dark">
<h5>Dark Jokes</h5>
          </div>
      </div>
      <button type="submit" onclick="submit(event)">Generate Joke</button>
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    window.submit = event => {
      event.preventDefault();

      let checkedValues = Array.from($('input:checked')).map(input => input.value);
      // ... looks like, e.g., ["programming", "miscellaneous"]

      // ... do stuff with checkedValues here...
      console.log(checkedValues);
    };
  </script>

Я не думаю, что вам нужно те несколько строк JS в верхней части вашего вопроса.

1 голос
/ 02 августа 2020

Я не делаю jQuery годами, но если вы хотите отправить массив, вам нужно закончить имена элементов [] и установить значение для каждого.

вот оно в javascript

const DomParser = new DOMParser()
  ,   myForm = document.getElementById('my-form')
  ;
function newCategory(val)
  {
  let elm = `<input type="hidden" name="category[]" value="${val}">`
  return DomParser.parseFromString( elm, 'text/html').body.firstChild
  }
myForm.oninput=()=>
  {
  while (el=myForm.querySelector('input[name="category[]"]')) el.remove();
  myForm.querySelectorAll('input[data-category]:checked').forEach(el=>
    {
    myForm.appendChild( newCategory( el.dataset.category ) )
    })
  }
label, button {
  display: block;
  float: left;
  clear: both;
}
button { margin-top: 1em;}
<form id="my-form" action="/joke" method="POST">
  
  <label>
    <input type="checkbox" data-category="Programming">
    Programming
  </label>

  <label>
    <input type="checkbox" data-category="Miscellaneous">
    Miscellaneous
  </label>

  <label>
    <input type="checkbox" data-category="Dark Jokes">
    Dark Jokes
  </label>

  <button type="submit">Generate Joke</button>
</form>
1 голос
/ 02 августа 2020

Добавьте атрибут value к вашим входам, затем заставьте все флажки перебирать их, затем pu sh значения в массив, элементы в массиве будут удаляться каждый раз, когда вы нажимаете кнопку `` Отправить '', что означает, что вы всегда будете получать новые значения проверено пользователем, помещенным в массив результатов 

  results = []
  let submitButton = $("button[type=submit]");
  submitButton.click(function(e) {
   var $checkboxes = $('input[name=category]:checked');
   e.preventDefault()
   results.splice(0,results.length)
   $checkboxes.each(function(){
      results.push($(this).val())
 });
 console.log(results)
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Joke</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
        <form action="/joke" method="POST">
            <div class="section">
                <label><span>*</span> Select a category / categories:</label>
                <div class="content content-top" id="checkb">
                    <input type="checkbox" name="category" id="first-input" value="Programming">
                    <h5>Programming</h5>
                    <br>
                    <input type="checkbox" name="category" id="middle-input" value="Miscellaneous">
                    <h5>Miscellaneous</h5>
                    <br>
                    <input type="checkbox" name="category" id="bottom-input" value="Dark Jokes">
                    <h5>Dark Jokes</h5>
                </div>
            </div>
            <button type="submit">Generate Joke</button>
        </form>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...