Radio option on view that updates and changes view?

Question

I think that my problem isn't very hard -but I'm pretty new to this and having issues finding an easy solution.

I have a form that collects a few items, and an output page that creates a table based on those few items. For example, one of the form options is "Which leg is affected?" And you must choose either "Left, Right, Both".

I would like to create a radio selection option on the view so that the person using this tool won't have to click the back button to update this one field. The table that is built changes based on this one selection, so it would be nice to see those changes without resubmitting the form.

If anyone can point me in the right direction - either JavaScript or some method that involves re-sending the form values from the view - I would be very grateful.

I would think you will use Ajax to send over the updated selection and then repaint the partial page using the data that comes from server because of updated selection — shakeel osmani, Sep 13 '18 at 18:53
@shakeelosmani Hi Shakeel. I think Ajax is what I need to be using. I need to refresh the view when I change one variable, but then I need the controller logic to run again using that changed variable. Does this sound like something I should be using Ajax for? Thanks a lot. — Ian Ellis, Sep 20 '18 at 17:06

Caleb Jay · Accepted Answer · 2018-09-13T18:55:43.400

I believe what you're describing is exactly what the idea of "single page app" style coding with Javascript is for - modifying the page with logic without necessarily needing to make a server request. I.e., you want to make an "application." Albeit a simple one.

What I recommend you look into is "event handlers," specifically the click handler.

So, if you had html that looked like: (stolen from MDN's 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>

You could then have code that looked like

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

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

The idea is your page is "waiting" for the form to be "clicked" (you could also look into onChange), and when it is clicked, a function is invoked that does further logic.

See here to figure out how to get the value of a selected radio.

See here for using javascript to insert a row into a table (what you may want to do in your changeTable function).

EDIT: One "gotcha" to look out for is if your script is running when the page is actually loaded. This can be a problem if your page loads asynchronously (doubtful). Just in case, also look into some kind of document.ready implementation: Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

Thanks for your thoughtful post. Pretty sure with a little effort this will get me what I need. — Ian Ellis, Sep 13 '18 at 19:01
Hey, I recently was looking at this, has a dead simple example which might also guide your process: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output — Caleb Jay, Sep 19 '18 at 00:46
Also: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template — Caleb Jay, Sep 19 '18 at 00:54

score 1 · Answer 2 · answered Sep 13 '18 at 19:00

You can add an event listener for 'click' to each radio input and have the callback function modify the view in whatever way you want.

Here's an example:

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>

Radio option on view that updates and changes view?

2 Answers2