Как я могу установить для javascript const значение в элементе формы, которое может быть либо выпадающим списком, либо переключателем с флажком?

У меня есть html-форма на сайте django, которая используется как для добавления, так и для обновления. Если форма предназначена для новой записи, я хочу, чтобы поле estimateType было переключателями с тремя вариантами выбора, одним из которых по умолчанию является checked. Если форма предназначена для редактирования существующей записи, я хочу, чтобы виджет формы изменился на выпадающий список выбора с дополнительными вариантами выбора.

В javascript в событии onchange мне нужно знать, каково значение поля estimateType. Я могу заставить его работать для select или radio input, но не для обоих. Например, то, что у меня есть прямо сейчас, это:

const estimateType = document.querySelector(input[name=estimateType]:checked).value;

Это работает для переключателя, но не для выпадающего списка select. Как я могу использовать одно и то же объявление const, но учитывать различные типы ввода в форме?

Вы можете использовать запятую для разделения селекторов, и он будет извлекать то, что найдет: Обратите внимание, что JS идентичен для каждого фрагмента.

const estimateType = document.querySelector("input[name=estimateType]:checked,select[name=estimateType]").value;
console.log(estimateType)
<input type="radio" name="estimateType" value="A">A
<input type="radio" name="estimateType" value="B" checked>B
<input type="radio" name="estimateType" value="C">C
деленья деленья

const estimateType = document.querySelector("input[name=estimateType]:checked,select[name=estimateType]").value;
console.log(estimateType)
<select name="estimateType" >
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D" selected>D</option>
  <option value="E">E</option>
</select>
деленья деленья

В HTML любые элементы <input>, <output>, <button>, или <textarea> являются дочерними элементами формы.
Просто укажите их имя для идентификации в форме...

const myForm = document.querySelector('#my-form');

btnTest.onclick =_=>
  {
  console.clear();
  console.log( myForm.estimateType.value ); // estimateType is name of the form's element
  }
<form id="my-form">
  <input type="radio" name="estimateType" value="A">A
  <input type="radio" name="estimateType" value="B" checked>B
  <input type="radio" name="estimateType" value="C">C
</form>

<button id="btnTest"> get value </button>
деленья деленья

const myForm = document.querySelector('#my-form');

btnTest.onclick = _ => 
  {
  console.clear();
  console.log( myForm.estimateType.value ); // estimateType is name of the form's element
  }
<form id="my-form">
  <select name="estimateType">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D" selected>D</option>
    <option value="E">E</option>
  </select>
</form>

<br><br><br><br><br><br><br>
<button id="btnTest"> get value </button>
деленья деленья

Значение элемента select или списка радиостанций определяется его свойством value. Разницы между ними нет.

Не используйте для этого queryselector. В случае переключателей queryselector просто получит один из элементов, тогда как form.estimateType - это коллекция, которая называется. список радиостанций, и в списке радиостанций есть выбранное значение.

document.addEventListener('click', e => {
  if (e.target.name == 'get_estimate_type') {
    let form = e.target.form;
    console.log(form.estimateType.value);
  }
});
<p>Form with select</p>
<form>
  <select name="estimateType">
    <option value="a">a</option>
    <option value="b" selected>b</option>
    <option value="c">c</option>
  </select>
  <button type="button" name="get_estimate_type">Get estimate type</button>
</form>
<p>Form with radio</p>
<form>
  <label><input type="radio" name="estimateType" value="a" checked>a</label>
  <label><input type="radio" name="estimateType" value="b">b</label>
  <button type="button" name="get_estimate_type">Get estimate type</button>
</form>
деленья деленья

Вернуться на верх