How do I use radio buttons with Javascript to read an input and then print to an HTML
?

Question

The basic point of what I'm trying to do is to create a form with radio buttons, each with their own value, and then have some Javascript print something onto the webpage depending on what was selected.

Example: User selects 1 - "You selected 1" appears under form - user selects 2 - "You selected 2" appears under form

The issue that occurs when I go to test my code is that nothing ever get's printed when I hit the submit button. I can't tell if it's not printing anything because the function isn't being called, or if it's because my syntax involved in calling a specific HTML tag is iffy, or if it's because of something else entirely. I have no desire to learn how to use any javascript libraries just yet (still trying to learn the full extent of what I can do with raw javascript) and so far, tutorial resources have been next to useless except for things like "form.preventDefault()" and "document.querySelector("input[name=radInput]:checked").value".

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,scale=1">
    <script language="javascript, text">
      var salt = 
      document.querySelector("input[name=radInput]:checked").value;
      var form = document.querySelector("form");
      var sand = document.querySelector("pre");
      form.addEventListener("submit", function(event) {
       var data = new FormData(form);
       var output = "";
       for (const entry of data) {
        output = entry[0] + "=" + entry[1] + "\r"};
        sand.innerText = output;
        event.preventDefault();
      }, false);
     </script>
  </head>
  <body>
   <form>
    <div>
     <input type="radio" id="input1" name="radInput" value="1">
     <label for="input1">ONE</label>
     <input type="radio" id="input2" name="radInput" value="2">
     <label for="input2">TWO</label>
     <input type="radio" id="input3" name="radInput" value="3">
     <label for="input3">THREE</label>
    </div>
    <div>
     <button type="submit">Test</button>
    </div>
   </form>
   <div>
    <pre></pre>
   </div>
  </body>
</html>

Geremy · Accepted Answer · 2018-01-23T21:11:50.293

I did a quick check of your script -- I deleted the "var salt" line since sand is never referenced.

From there, I think what is happening is that the script runs before the form renders, so form.addEventListener never runs correctly, because form is not defined.

You can see for yourself -- load the page, open web developer console, go to console, and type

form

Its undefined.

Next, just paste your JS in:

 var form = document.querySelector("form");
  var sand = document.querySelector("pre");
form.addEventListener("submit", function(event) {
console.log("clicked");
       var data = new FormData(form);
       var output = "";
       for (const entry of data) {
        output = entry[0] + "=" + entry[1] + "\r"};
        sand.innerText = output;
        event.preventDefault();
      }, false);

(I added a debug "clicked")

Now, since the HTML is there, the form var has something to bind to. You need to be sure the HTML renders before the JS runs. I think more info for you can be found here: JavaScript that executes after page load

score 1 · Answer 2 · answered Jan 23 '18 at 19:26

Looks like you are trying to get the value of the selected item before it was rendered/selected. Put that in the eventhandler code and it should work.

Don't forget you'll also need to verify that something is checked... If you submit the form with nothing checked it doesn't handle it gracefully.

var form = document.querySelector("form");
var sand = document.querySelector("pre");
var salt = form.addEventListener("submit", function(event) {
  document.querySelector("input[name=radInput]:checked").value;
  var data = new FormData(form);
  var output = "";
  for (const entry of data) {
    output = entry[0] + "=" + entry[1] + "\r"
  };
  sand.innerText = output;
  event.preventDefault();
}, false);

<body>
  <form>
    <div>
      <input type="radio" id="input1" name="radInput" value="1">
      <label for="input1">ONE</label>
      <input type="radio" id="input2" name="radInput" value="2">
      <label for="input2">TWO</label>
      <input type="radio" id="input3" name="radInput" value="3">
      <label for="input3">THREE</label>
    </div>
    <div>
      <button type="submit">Test</button>
    </div>
  </form>
  <div>
    <pre></pre>
  </div>
</body>

score 1 · Answer 3 · answered Jan 23 '18 at 21:24

@Geremy So I did what was advised in the link you provided by sticking all my javascript into a function that would be called by an "onload" attribute in the body and it still refuses to work. When I went into dev tools, it said

Uncaught ReferenceError: fussyChild is not defined
at onload

These are the changes I made:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, scale=1">
    <script language="text/javascript">
      function fussyChild() {
        var form = document.querySelector("form");
        var sand = document.querySelector("pre");
        form.addEventListener("submit", function(event) { 
      document.querySelector("input[name=radInput]:checked").value;
          var data = new FormData(form);
          var output = "";
          for (const entry of data) {
          output = entry[0] + "=" + entry[1] + "\r"};
          sand.innerText = output;
          event.preventDefault();
        }, false);
      }
    </script>
  </head>
  <body onload="fussyChild()">
    <form>
      <div>
        <input type="radio" id="input1" name="radInput" value="1" checked="true">
        <label for="input1">ONE</label>
        <input type="radio" id="input2" name="radInput" value="2">
        <label for="input2">TWO</label>
        <input type="radio" id="input3" name="radInput" value="3">
        <label for="input3">THREE</label>
      </div>
      <div>
        <button type="submit">Test</button>
      </div>
    </form>
    <div>
      <pre></pre>
    </div>
  </body>
</html>

your welcome, happy to help! BTW, not sure why that is the "correct" way, I'd imagine it would be ignored as its out of place, no reference to it here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script but I'm sure someone out there knows why that would kill the script ask in another post if you're interested :) — Geremy, Jan 23 '18 at 23:40

How do I use radio buttons with Javascript to read an input and then print to an HTML ?

3 Answers3

How do I use radio buttons with Javascript to read an input and then print to an HTML
?