Опция радио на просмотр, что обновляет и изменяет вид? - PullRequest
Новая
       9

Опция радио на просмотр, что обновляет и изменяет вид?

0 голосов
/ 13 сентября 2018

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

У меня есть форма, которая собирает несколько элементов, и страница выводаэто создает таблицу на основе этих нескольких элементов.Например, одним из параметров формы является «На какую ногу влияет?»И вы должны выбрать либо «Левый, Правый, Оба».

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

Если кто-то может указать мне правильное направление - либо JavaScript, либо какой-либо метод, который требует- отправив значения формы из представления - я был бы очень признателен.

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Вы можете добавить прослушиватель событий для 'click' для каждого радиовхода, и функция обратного вызова может изменять вид так, как вы хотите.

Вот пример: 

const form = document.querySelector('.choice-form');
const display = document.querySelector('.display');

form.querySelectorAll('input[type="radio"]').forEach(input => {
    input.addEventListener('click', () => {
        display.innerHTML = "";
        if (input.id === '1') {
            display.innerHTML = "<span>You selected: <span class='red'>One</span></span>";
        } else if (input.id === '2') {
            display.innerHTML = "<span>You selected: <span class='blue'>Two</span></span>";
        }
    });
});
.red {
  color: red;
}

.blue {
  color: blue;
}
<div>
  <form class='choice-form'>
    <label for='choice'>Make a choice</label>
    <input type='radio' id='1' name='choice'/>
    <label for='1'>One</label>
    <input type='radio' id='2' name='choice'/>
    <label for='2'>Two</label>
  </form>

  <div class='display'>
  </div>
</div>
0 голосов
/ 13 сентября 2018

Я полагаю, что вы описываете именно то, для чего предназначена идея кодирования в стиле «одностраничного приложения» с Javascript - модификация страницы с помощью логики без необходимости выполнения запроса к серверу. Т.е., вы хотите подать «заявку». Хотя и простой.

Я рекомендую обратить внимание на «обработчики событий», в частности обработчик click .

Итак, если у вас был html, который выглядел следующим образом: (украденный с MDN radio page) 

<form id="radio_form">
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email">
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
</form>

Тогда вы можете получить код, который будет выглядеть как 

var radio = document.getElementById('radio_form');
radio.onclick = changeTable;

function changeTable(e){
  // Do logic here to change table
}

Идея состоит в том, что ваша страница «ждет», пока форма не будет «нажата» (вы также можете взглянуть на onChange), и при щелчке по ней вызывается функция, которая выполняет дальнейшую логику.

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

См. здесь для использования javascript для вставки строки в таблицу (что вы, возможно, захотите сделать в вашей функции changeTable).

РЕДАКТИРОВАТЬ: Одна «ошибка», на которую стоит обратить внимание, это если ваш скрипт работает, когда страница действительно загружена. Это может быть проблемой, если ваша страница загружается асинхронно (сомнительно). На всякий случай посмотрите также на некоторую реализацию document.ready: Чистый JavaScript-эквивалент jQuery's $ .ready () - как вызвать функцию, когда страница / DOM готова для нее

...