Вариант радио на просмотре, который обновляет и меняет вид?

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

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

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

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

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

shakeel osmani 13.09.2018 20:53

@shakeelosmani Привет, Шакил. Я думаю, что мне нужно использовать Ajax. Мне нужно обновить представление, когда я изменяю одну переменную, но затем мне нужно, чтобы логика контроллера снова запускалась с использованием этой измененной переменной. Это похоже на то, для чего я должен использовать Ajax? Большое спасибо.

Ian Ellis 20.09.2018 19:06

Ajax - это именно то, что вам нужно в этой ситуации

shakeel osmani 20.09.2018 20:27
0
3
31
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

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

Итак, если у вас был html, который выглядел так: (украдено со страницы радио MDN)

<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 $ .ready () - как вызвать функцию, когда страница / DOM готова для этого

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

Ian Ellis 13.09.2018 21:01

Эй, я недавно смотрел на это, есть мертвенно простой пример, который также может направить ваш процесс: developer.mozilla.org/en-US/docs/Web/HTML/Element/output

Caleb Jay 19.09.2018 02:46

Также: developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Caleb Jay 19.09.2018 02:54

Вы можете добавить прослушиватель событий для '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>

Другие вопросы по теме