Блог

Главная - Вопросы по программированию - Как сделать кнопку формы HTML размещающей на экране выпадающий список форм, в который пользователь может вводить текст

Как сделать кнопку формы HTML размещающей на экране выпадающий список форм, в который пользователь может вводить текст

#javascript #html #css

#javascript #HTML #css

Вопрос:

Есть ли способ сделать так, чтобы у меня была HTML-форма, в которой я мог бы иметь кнопку, внутри которой, когда пользователь веб-сайта нажимает на эту кнопку, для них появляется список <выбрать>, а затем может вводить некоторый текст рядом с ним, который может работать несколько раз? (РЕДАКТИРОВАТЬ Под этим я подразумеваю, что я хотел бы, чтобы весь процесс выбора дня и ввода текста можно было запускать несколько раз, нажав на кнопку)

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

             <br><label for='odays'> Open Days: </label><br>

            <input type='button' onclick='' value='Add Day'><br>

            <select id='odays'name='odays'>
                <option value='monday'> Monday </option>
                <option value='tuesday'> Tuesday </option>
                <option value='wednesday'> Wednesday </option>
                <option value='thursday'> Thursday </option>
                <option value='friday'> Friday </option>
                <option value='saturday'> Saturday </option>
                <option value='sunday'> Sunday </option>  
            </select>

Пока это мой код

РЕДАКТИРОВАТЬ: Чтобы уточнить, вот каков мой предполагаемый конечный результат: Конечный результат Я надеюсь, что я смогу сделать так, чтобы, когда пользователь нажимает кнопку «Добавить день», он создавал еще одну строку ниже, чтобы они могли выбрать день и ввести текстовый ввод. Если это помогает, контекст этого заключается в том, что он предназначен для часов работы предприятий. Также было бы полезно, если бы ответы были максимально простыми, поскольку я новичок в HTML и JS

Комментарии:

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

2. Что подразумевается под «… может вводить некоторый текст рядом с этим, который может работать несколько раз?»

3. Ну, мой план состоит в том, чтобы сделать так, чтобы появилось окно выбора, пользователь мог вводить текст, относящийся к форме, а затем они могут делать это сколько угодно раз (используя кнопку, выбирая день и вводя текст), а затем отправлять форму

4. Вы сохраняете данные из ввода и выбираете где-нибудь, возможно, при нажатии кнопки отправки?

5. Отправка формы загружает страницу по умолчанию. Вероятно, вам следует использовать AJAX или fetch() . Чтобы переключить видимость элемента, используйте правило CSS {display:none;} или {display:block}. Вы также можете рассмотреть возможность использования свойства CSS visibility .

Ответ №1:

Вы можете сделать что-то вроде этого:

 document.querySelector('#newEvent').addEventListener('click', function() { // when "add day" clicked:
  let chosenDay = odays.selectedOptions[0].value; // take the selected option from select box
  document.querySelector('#newNote legend').textContent  = ' ' chosenDay; // Here i use it as title but you can do what you want
  document.querySelector('#newNote input').removeAttribute('disabled');  // since we disabled it initialy
  document.querySelector('#newNote').removeAttribute('style'); // show input ready for note
});  
 <form>
  <fieldset>
    <legend>My Calendar</legend>
    <label for='odays'> Open Days: </label>
    <input type='button' id="newEvent" value='Add Day'><br>
    <select id='odays'name='odays'>
      <option value='monday'> Monday </option>
      <option value='tuesday'> Tuesday </option>
      <option value='wednesday'> Wednesday </option>
      <option value='thursday'> Thursday </option>
      <option value='friday'> Friday </option>
      <option value='saturday'> Saturday </option>
      <option value='sunday'> Sunday </option>  
    </select>
  </fieldset>
  <fieldset id="newNote" style="display: none;">
    <legend>Note For</legend>
    <input type="text" placeholder="add some text" disabled>
    <button type="submit">Submit</button>
  </fieldset>
</form>

Ответ №2:

вы также можете использовать окно приглашения

 let daysPlan = "";

function updateMyday() {
  var selectBox = document.getElementById("odays");
  var div = document.getElementById("daysUp");
  //var selectOption = selectBox.options[selectBox.selectedIndex];
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;

  event = window.prompt("what's up that day ?");

  // to show on the page somewhere 
  var newDay = document.createElement("div");
  newDay.textContent = selectedValue   " : "   event;
  div.appendChild(newDay);
  // end show 

  // store it , a variable, a localstorge, else ?
  daysPlan  = selectedValue   " : "   event   "n"
  console.log(daysPlan) // to use and send once submitting 
}  
 #odays {
  display: none;/* not sure i understood that part*/
}

form {
  float: left;
}

#daysUp {
  white-space: pre;
}  
 <form><label for='odays'> Open Days: </label><br>

  <input type='button' onclick='let e =document.getElementById("odays"); e.style.display="block";' value='Add Day'><br>

  <select id='odays' name='odays' onchange="updateMyday()">
    <option>Choose a day </option>
    <option value='monday   '> Monday </option>
    <option value='tuesday  '> Tuesday </option>
    <option value='wednesday'> Wednesday </option>
    <option value='thursday '> Thursday </option>
    <option value='friday   '> Friday </option>
    <option value='saturday '> Saturday </option>
    <option value='sunday   '> Sunday </option>
  </select>
</form>
<div id="daysUp">
</div>