Trying to output value of radio buttons in table list

so I'm trying to output the value from radio buttons into a table, but no matter what I pick it just says 0, and then goes away very quickly. I want the results to stay up but kind of as a vertical list so it would look something like: 0 1 2 1, etc.

function display()

{

    document.getElementById("displayarea").innerHTML = document.getElementById("dis1").value; 

    document.getElementById("dis1").value = "0";

    document.getElementById("displayarea1").innerHTML = document.getElementById("som1").value; 

    document.getElementById("som1").value = "1";

    document.getElementById("displayarea").innerHTML = document.getElementById("stron1").value; 

    document.getElementById("stron1").value = "2";

  }

So this is just some of the script because it's very long, I'm sure there's an easier way but I'm new to JavaScript. Each radio button is either dis, som, or stron ranging from 1 to 6.

 <table width="400px" align="center" border=0> 

    <tr style="background-color:#8FBC8F;">

        <td align="center"><b>Results</b></td>

    </tr> 

    <tr>

        <td align="center"><div id="displayarea"></div></td>

    </tr>

 </table>

This is where it outputs to, like I said it keeps saying 0 very quickly and disappearing. Like it's reading all the values as 0.

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="dis2" id="dis2" value="0"/>

     <label>Strongly disagree</label>

     <input type="radio" name="som2" id="som2" value="1"/>

     <label>Somewhat agree</label>

     <input type="radio" name="stron2" id="stron2" value="2"/>

     <label>Strongly agree</label>	

 </fieldset>

And here's a sample of one of the button fieldsets. I appreciate any help. My main focus is getting it to stop reading all the button fields as 0 and going away very quickly.

Sorry I left out that the buttons are in a form that runs when the submit button is clicked. <input type="submit" id="submit" value="submit" onClick="display()"/></td>

Another edit: the entire form

<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="submit" id="submit" value="submit" onClick="display()"/></td>

</p>

</form>

edited Nov 20 '18 at 8:26

asked Nov 20 '18 at 7:57

Jackie

615

where is dom with stron1

– brk
Nov 20 '18 at 8:03

what is the value of radiobuttons with id 'dis1', 'som1','stron1'. Please provide the HTML for those.

– Subhasish Bhattacharjee
Nov 20 '18 at 8:11

How is your function display called (executed)? With an onclick or something? Are your radio buttons in a form? "Results disappearing very quickly" sounds to me like a form that gets submitted, so the site gets reloaded / redirectet.

– CodeF0x
Nov 20 '18 at 8:14

Yes is it with an onclick that it runs, and yes they are in a form.

– Jackie
Nov 20 '18 at 8:22

There we got your problem, it's the form. Can you add your form and your onclick to the question, please?

– CodeF0x
Nov 20 '18 at 8:24

add a comment |

function display()

{

    document.getElementById("displayarea").innerHTML = document.getElementById("dis1").value; 

    document.getElementById("dis1").value = "0";

    document.getElementById("displayarea1").innerHTML = document.getElementById("som1").value; 

    document.getElementById("som1").value = "1";

    document.getElementById("displayarea").innerHTML = document.getElementById("stron1").value; 

    document.getElementById("stron1").value = "2";

  }

So this is just some of the script because it's very long, I'm sure there's an easier way but I'm new to JavaScript. Each radio button is either dis, som, or stron ranging from 1 to 6.

 <table width="400px" align="center" border=0> 

    <tr style="background-color:#8FBC8F;">

        <td align="center"><b>Results</b></td>

    </tr> 

    <tr>

        <td align="center"><div id="displayarea"></div></td>

    </tr>

 </table>

This is where it outputs to, like I said it keeps saying 0 very quickly and disappearing. Like it's reading all the values as 0.

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="dis2" id="dis2" value="0"/>

     <label>Strongly disagree</label>

     <input type="radio" name="som2" id="som2" value="1"/>

     <label>Somewhat agree</label>

     <input type="radio" name="stron2" id="stron2" value="2"/>

     <label>Strongly agree</label>	

 </fieldset>

And here's a sample of one of the button fieldsets. I appreciate any help. My main focus is getting it to stop reading all the button fields as 0 and going away very quickly.

Sorry I left out that the buttons are in a form that runs when the submit button is clicked. <input type="submit" id="submit" value="submit" onClick="display()"/></td>

Another edit: the entire form

<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="submit" id="submit" value="submit" onClick="display()"/></td>

</p>

</form>

edited Nov 20 '18 at 8:26

asked Nov 20 '18 at 7:57

Jackie

615

where is dom with stron1

– brk
Nov 20 '18 at 8:03

what is the value of radiobuttons with id 'dis1', 'som1','stron1'. Please provide the HTML for those.

– Subhasish Bhattacharjee
Nov 20 '18 at 8:11

How is your function display called (executed)? With an onclick or something? Are your radio buttons in a form? "Results disappearing very quickly" sounds to me like a form that gets submitted, so the site gets reloaded / redirectet.

– CodeF0x
Nov 20 '18 at 8:14

Yes is it with an onclick that it runs, and yes they are in a form.

– Jackie
Nov 20 '18 at 8:22

There we got your problem, it's the form. Can you add your form and your onclick to the question, please?

– CodeF0x
Nov 20 '18 at 8:24

add a comment |

function display()

{

    document.getElementById("displayarea").innerHTML = document.getElementById("dis1").value; 

    document.getElementById("dis1").value = "0";

    document.getElementById("displayarea1").innerHTML = document.getElementById("som1").value; 

    document.getElementById("som1").value = "1";

    document.getElementById("displayarea").innerHTML = document.getElementById("stron1").value; 

    document.getElementById("stron1").value = "2";

  }

So this is just some of the script because it's very long, I'm sure there's an easier way but I'm new to JavaScript. Each radio button is either dis, som, or stron ranging from 1 to 6.

 <table width="400px" align="center" border=0> 

    <tr style="background-color:#8FBC8F;">

        <td align="center"><b>Results</b></td>

    </tr> 

    <tr>

        <td align="center"><div id="displayarea"></div></td>

    </tr>

 </table>

This is where it outputs to, like I said it keeps saying 0 very quickly and disappearing. Like it's reading all the values as 0.

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="dis2" id="dis2" value="0"/>

     <label>Strongly disagree</label>

     <input type="radio" name="som2" id="som2" value="1"/>

     <label>Somewhat agree</label>

     <input type="radio" name="stron2" id="stron2" value="2"/>

     <label>Strongly agree</label>	

 </fieldset>

And here's a sample of one of the button fieldsets. I appreciate any help. My main focus is getting it to stop reading all the button fields as 0 and going away very quickly.

Sorry I left out that the buttons are in a form that runs when the submit button is clicked. <input type="submit" id="submit" value="submit" onClick="display()"/></td>

Another edit: the entire form

<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="submit" id="submit" value="submit" onClick="display()"/></td>

</p>

</form>

edited Nov 20 '18 at 8:26

asked Nov 20 '18 at 7:57

Jackie

615

function display()

{

    document.getElementById("displayarea").innerHTML = document.getElementById("dis1").value; 

    document.getElementById("dis1").value = "0";

    document.getElementById("displayarea1").innerHTML = document.getElementById("som1").value; 

    document.getElementById("som1").value = "1";

    document.getElementById("displayarea").innerHTML = document.getElementById("stron1").value; 

    document.getElementById("stron1").value = "2";

  }

So this is just some of the script because it's very long, I'm sure there's an easier way but I'm new to JavaScript. Each radio button is either dis, som, or stron ranging from 1 to 6.

 <table width="400px" align="center" border=0> 

    <tr style="background-color:#8FBC8F;">

        <td align="center"><b>Results</b></td>

    </tr> 

    <tr>

        <td align="center"><div id="displayarea"></div></td>

    </tr>

 </table>

This is where it outputs to, like I said it keeps saying 0 very quickly and disappearing. Like it's reading all the values as 0.

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="dis2" id="dis2" value="0"/>

     <label>Strongly disagree</label>

     <input type="radio" name="som2" id="som2" value="1"/>

     <label>Somewhat agree</label>

     <input type="radio" name="stron2" id="stron2" value="2"/>

     <label>Strongly agree</label>	

 </fieldset>

And here's a sample of one of the button fieldsets. I appreciate any help. My main focus is getting it to stop reading all the button fields as 0 and going away very quickly.

Sorry I left out that the buttons are in a form that runs when the submit button is clicked. <input type="submit" id="submit" value="submit" onClick="display()"/></td>

Another edit: the entire form

<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="submit" id="submit" value="submit" onClick="display()"/></td>

</p>

</form>

function display()

{

    document.getElementById("displayarea").innerHTML = document.getElementById("dis1").value; 

    document.getElementById("dis1").value = "0";

    document.getElementById("displayarea1").innerHTML = document.getElementById("som1").value; 

    document.getElementById("som1").value = "1";

    document.getElementById("displayarea").innerHTML = document.getElementById("stron1").value; 

    document.getElementById("stron1").value = "2";

  }

function display()

{

    document.getElementById("displayarea").innerHTML = document.getElementById("dis1").value; 

    document.getElementById("dis1").value = "0";

    document.getElementById("displayarea1").innerHTML = document.getElementById("som1").value; 

    document.getElementById("som1").value = "1";

    document.getElementById("displayarea").innerHTML = document.getElementById("stron1").value; 

    document.getElementById("stron1").value = "2";

  }

 <table width="400px" align="center" border=0> 

    <tr style="background-color:#8FBC8F;">

        <td align="center"><b>Results</b></td>

    </tr> 

    <tr>

        <td align="center"><div id="displayarea"></div></td>

    </tr>

 </table>

 <table width="400px" align="center" border=0> 

    <tr style="background-color:#8FBC8F;">

        <td align="center"><b>Results</b></td>

    </tr> 

    <tr>

        <td align="center"><div id="displayarea"></div></td>

    </tr>

 </table>

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="dis2" id="dis2" value="0"/>

     <label>Strongly disagree</label>

     <input type="radio" name="som2" id="som2" value="1"/>

     <label>Somewhat agree</label>

     <input type="radio" name="stron2" id="stron2" value="2"/>

     <label>Strongly agree</label>	

 </fieldset>

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="dis2" id="dis2" value="0"/>

     <label>Strongly disagree</label>

     <input type="radio" name="som2" id="som2" value="1"/>

     <label>Somewhat agree</label>

     <input type="radio" name="stron2" id="stron2" value="2"/>

     <label>Strongly agree</label>	

 </fieldset>

javascript html

edited Nov 20 '18 at 8:26

asked Nov 20 '18 at 7:57

Jackie

615

edited Nov 20 '18 at 8:26

asked Nov 20 '18 at 7:57

Jackie

615

edited Nov 20 '18 at 8:26

asked Nov 20 '18 at 7:57

Jackie

615

asked Nov 20 '18 at 7:57

Jackie

615

asked Nov 20 '18 at 7:57

Jackie

615

where is dom with stron1

– brk
Nov 20 '18 at 8:03

what is the value of radiobuttons with id 'dis1', 'som1','stron1'. Please provide the HTML for those.

– Subhasish Bhattacharjee
Nov 20 '18 at 8:11

How is your function display called (executed)? With an onclick or something? Are your radio buttons in a form? "Results disappearing very quickly" sounds to me like a form that gets submitted, so the site gets reloaded / redirectet.

– CodeF0x
Nov 20 '18 at 8:14

Yes is it with an onclick that it runs, and yes they are in a form.

– Jackie
Nov 20 '18 at 8:22

There we got your problem, it's the form. Can you add your form and your onclick to the question, please?

– CodeF0x
Nov 20 '18 at 8:24

add a comment |

where is dom with stron1

– brk
Nov 20 '18 at 8:03

what is the value of radiobuttons with id 'dis1', 'som1','stron1'. Please provide the HTML for those.

– Subhasish Bhattacharjee
Nov 20 '18 at 8:11

How is your function display called (executed)? With an onclick or something? Are your radio buttons in a form? "Results disappearing very quickly" sounds to me like a form that gets submitted, so the site gets reloaded / redirectet.

– CodeF0x
Nov 20 '18 at 8:14

Yes is it with an onclick that it runs, and yes they are in a form.

– Jackie
Nov 20 '18 at 8:22

There we got your problem, it's the form. Can you add your form and your onclick to the question, please?

– CodeF0x
Nov 20 '18 at 8:24

where is dom with stron1

– brk
Nov 20 '18 at 8:03

what is the value of radiobuttons with id 'dis1', 'som1','stron1'. Please provide the HTML for those.

– Subhasish Bhattacharjee
Nov 20 '18 at 8:11

How is your function display called (executed)? With an onclick or something? Are your radio buttons in a form? "Results disappearing very quickly" sounds to me like a form that gets submitted, so the site gets reloaded / redirectet.

– CodeF0x
Nov 20 '18 at 8:14

Yes is it with an onclick that it runs, and yes they are in a form.

– Jackie
Nov 20 '18 at 8:22

There we got your problem, it's the form. Can you add your form and your onclick to the question, please?

– CodeF0x
Nov 20 '18 at 8:24

add a comment |

4 Answers
4

active

oldest

votes

Your main problem was that your form was submitting and therefore the site got reloaded -> all values disappeared.

To fix this, you can either change type="submit" of your button to type="button" or use event.preventDefault() like I did in my example.

You also can shorten your script to something like this:

function display(event) { // Need "event" to access prevenDefault();

  event.preventDefault(); // This line prevents the form from submitting, so your values stay visible after clicking the button

  var radios = [...document.querySelectorAll('input[type=radio]')]; // Get all your radio buttons at once

  var displayarea = document.getElementById('displayarea');



  var values = radios.map(radio => radio.value).join(' '); // Get all values of your radios and concat them in a string

  displayarea.innerText = values;

}

<form id="dep" name="dep">



  <fieldset id="depfield">

    <label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

      <input type="radio" name="dis1" id="dis1" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som1" id="som1" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron1" id="stron1" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

      <input type="radio" name="dis2" id="dis2" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som2" id="som2" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron2" id="stron2" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have suicidal thoughts</label>

    <fieldset class="options3">

      <input type="radio" name="dis3" id="dis3" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som3" id="som3" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron3" id="stron3" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

      <input type="radio" name="dis4" id="dis4" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som4" id="som4" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron4" id="stron4" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

      <input type="radio" name="dis5" id="dis5" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som5" id="som5" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron5" id="stron5" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

      <input type="radio" name="dis6" id="dis6" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som6" id="som6" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron6" id="stron6" value="2" />

      <label>Strongly agree</label>

    </fieldset>

  </fieldset>

  <p>

    <input type="submit" id="submit" value="submit" onClick="display(event)" /></td> <!-- Need "event" to access preventDefault();" -->

  </p>

</form>



<table width="400px" align="center" border=0>

  <tr style="background-color:#8FBC8F;">

    <td align="center"><b>Results</b></td>

  </tr>

  <tr>

    <td align="center">

      <div id="displayarea"></div>

    </td>

  </tr>

</table>

answered Nov 20 '18 at 9:02

CodeF0x

1,85251019

Thank you, but how would I get it to output the values selected and not just the assigned values of each button? it just says 012012 every time. For example if I select strongly disagree for the first three questions, the first three numbers should be 000

– Jackie
Nov 20 '18 at 22:10

I got it, just had to put :checked after 'input[type=radio]

– Jackie
Nov 21 '18 at 1:50

@Jackie Glad to help and nice to hear you solved your problem!

– CodeF0x
Nov 21 '18 at 7:44

add a comment |

For radio buttons, every element should have the same name.Otherwise it won't function properly

Eg:

<fieldset class="options2">



    <input type="radio" name="nameofradiobutton" id="dis2" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="nameofradiobutton" id="som2" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="nameofradiobutton" id="stron2" value="2"/>

    <label>Strongly agree</label>   



</fieldset>

edited Nov 20 '18 at 8:20

Ashish Kamble

632619

answered Nov 20 '18 at 8:04

Vasanthi GV

787

I replaced it same name still it is not working

– brk
Nov 20 '18 at 8:08

add a comment |

You do not need separate id's, simply make the name property same to act them as a group. You can use querySelectorAll() to select all the radios, then use map() to get all the values. Finally join() them:

function display(){

  var el = [...document.querySelectorAll('input[type=radio]')];

  el = el.map(r => r.value).join(' ');

  document.getElementById("displayarea").textContent = el;

}

<table width="400px" align="center" border=0> 

  <tr style="background-color:#8FBC8F;">

  <td align="center"><b>Results</b></td>

  </tr> 

  <tr>

  <td align="center"><div id="displayarea"></div></td>

  </tr>

</table>





<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="button" id="submit" value="submit" onClick="display()"/>

</p>

</form>

If you want to get the values on change of the radio try the following:

document.querySelectorAll('input[name=asleep]').forEach(function(el){

  el.addEventListener('change', display);

});



function display(){

  document.getElementById("displayarea").textContent = this.value; 

}

<table width="400px" align="center" border=0> 

<tr style="background-color:#8FBC8F;">

<td align="center"><b>Results</b></td>

</tr> 

<tr>

<td align="center"><div id="displayarea"></div></td>

</tr>

</table>





<label>I have trouble falling asleep or sleeping too much</label>

<fieldset class="options2">

    <input type="radio" name="asleep" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="asleep" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="asleep" value="2"/>

    <label>Strongly agree</label>   

</fieldset>

edited Nov 20 '18 at 8:39

answered Nov 20 '18 at 8:12

Mamun

26.9k71830

As far as I understood your code, will the text content be not replaced on every click? He wants it to be appended, vertically

– Subhasish Bhattacharjee
Nov 20 '18 at 8:15

@SubhasishBhattacharjee, added that solution as well as part of the answer....thanks.

– Mamun
Nov 20 '18 at 8:19

add a comment |

add an onchange event to the radio buttons

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="r"  value="0" onchange="showVal(this)"/>

     <label>Strongly disagree</label>

     <input type="radio" name="r"  value="1" onchange="showVal(this)"/>

     <label>Somewhat agree</label>

     <input type="radio" name="r"  value="2" onchange="showVal(this)"/>

     <label>Strongly agree</label>	

 </fieldset>

And then write a javascript function to display or do whatever

 function showVal(radio) {

      // possible things you may do, below are examples

       alert(radio.value);

       alert(radio.checked);

    };

answered Nov 20 '18 at 8:38

Subhasish Bhattacharjee

7511

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388519%2ftrying-to-output-value-of-radio-buttons-in-table-list%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

Your main problem was that your form was submitting and therefore the site got reloaded -> all values disappeared.

To fix this, you can either change type="submit" of your button to type="button" or use event.preventDefault() like I did in my example.

You also can shorten your script to something like this:

function display(event) { // Need "event" to access prevenDefault();

  event.preventDefault(); // This line prevents the form from submitting, so your values stay visible after clicking the button

  var radios = [...document.querySelectorAll('input[type=radio]')]; // Get all your radio buttons at once

  var displayarea = document.getElementById('displayarea');



  var values = radios.map(radio => radio.value).join(' '); // Get all values of your radios and concat them in a string

  displayarea.innerText = values;

}

<form id="dep" name="dep">



  <fieldset id="depfield">

    <label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

      <input type="radio" name="dis1" id="dis1" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som1" id="som1" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron1" id="stron1" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

      <input type="radio" name="dis2" id="dis2" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som2" id="som2" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron2" id="stron2" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have suicidal thoughts</label>

    <fieldset class="options3">

      <input type="radio" name="dis3" id="dis3" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som3" id="som3" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron3" id="stron3" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

      <input type="radio" name="dis4" id="dis4" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som4" id="som4" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron4" id="stron4" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

      <input type="radio" name="dis5" id="dis5" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som5" id="som5" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron5" id="stron5" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

      <input type="radio" name="dis6" id="dis6" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som6" id="som6" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron6" id="stron6" value="2" />

      <label>Strongly agree</label>

    </fieldset>

  </fieldset>

  <p>

    <input type="submit" id="submit" value="submit" onClick="display(event)" /></td> <!-- Need "event" to access preventDefault();" -->

  </p>

</form>



<table width="400px" align="center" border=0>

  <tr style="background-color:#8FBC8F;">

    <td align="center"><b>Results</b></td>

  </tr>

  <tr>

    <td align="center">

      <div id="displayarea"></div>

    </td>

  </tr>

</table>

answered Nov 20 '18 at 9:02

CodeF0x

1,85251019

Thank you, but how would I get it to output the values selected and not just the assigned values of each button? it just says 012012 every time. For example if I select strongly disagree for the first three questions, the first three numbers should be 000

– Jackie
Nov 20 '18 at 22:10

I got it, just had to put :checked after 'input[type=radio]

– Jackie
Nov 21 '18 at 1:50

@Jackie Glad to help and nice to hear you solved your problem!

– CodeF0x
Nov 21 '18 at 7:44

add a comment |

Your main problem was that your form was submitting and therefore the site got reloaded -> all values disappeared.

To fix this, you can either change type="submit" of your button to type="button" or use event.preventDefault() like I did in my example.

You also can shorten your script to something like this:

function display(event) { // Need "event" to access prevenDefault();

  event.preventDefault(); // This line prevents the form from submitting, so your values stay visible after clicking the button

  var radios = [...document.querySelectorAll('input[type=radio]')]; // Get all your radio buttons at once

  var displayarea = document.getElementById('displayarea');



  var values = radios.map(radio => radio.value).join(' '); // Get all values of your radios and concat them in a string

  displayarea.innerText = values;

}

<form id="dep" name="dep">



  <fieldset id="depfield">

    <label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

      <input type="radio" name="dis1" id="dis1" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som1" id="som1" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron1" id="stron1" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

      <input type="radio" name="dis2" id="dis2" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som2" id="som2" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron2" id="stron2" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have suicidal thoughts</label>

    <fieldset class="options3">

      <input type="radio" name="dis3" id="dis3" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som3" id="som3" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron3" id="stron3" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

      <input type="radio" name="dis4" id="dis4" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som4" id="som4" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron4" id="stron4" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

      <input type="radio" name="dis5" id="dis5" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som5" id="som5" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron5" id="stron5" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

      <input type="radio" name="dis6" id="dis6" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som6" id="som6" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron6" id="stron6" value="2" />

      <label>Strongly agree</label>

    </fieldset>

  </fieldset>

  <p>

    <input type="submit" id="submit" value="submit" onClick="display(event)" /></td> <!-- Need "event" to access preventDefault();" -->

  </p>

</form>



<table width="400px" align="center" border=0>

  <tr style="background-color:#8FBC8F;">

    <td align="center"><b>Results</b></td>

  </tr>

  <tr>

    <td align="center">

      <div id="displayarea"></div>

    </td>

  </tr>

</table>

answered Nov 20 '18 at 9:02

CodeF0x

1,85251019

Thank you, but how would I get it to output the values selected and not just the assigned values of each button? it just says 012012 every time. For example if I select strongly disagree for the first three questions, the first three numbers should be 000

– Jackie
Nov 20 '18 at 22:10

I got it, just had to put :checked after 'input[type=radio]

– Jackie
Nov 21 '18 at 1:50

@Jackie Glad to help and nice to hear you solved your problem!

– CodeF0x
Nov 21 '18 at 7:44

add a comment |

Your main problem was that your form was submitting and therefore the site got reloaded -> all values disappeared.

To fix this, you can either change type="submit" of your button to type="button" or use event.preventDefault() like I did in my example.

You also can shorten your script to something like this:

function display(event) { // Need "event" to access prevenDefault();

  event.preventDefault(); // This line prevents the form from submitting, so your values stay visible after clicking the button

  var radios = [...document.querySelectorAll('input[type=radio]')]; // Get all your radio buttons at once

  var displayarea = document.getElementById('displayarea');



  var values = radios.map(radio => radio.value).join(' '); // Get all values of your radios and concat them in a string

  displayarea.innerText = values;

}

<form id="dep" name="dep">



  <fieldset id="depfield">

    <label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

      <input type="radio" name="dis1" id="dis1" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som1" id="som1" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron1" id="stron1" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

      <input type="radio" name="dis2" id="dis2" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som2" id="som2" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron2" id="stron2" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have suicidal thoughts</label>

    <fieldset class="options3">

      <input type="radio" name="dis3" id="dis3" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som3" id="som3" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron3" id="stron3" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

      <input type="radio" name="dis4" id="dis4" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som4" id="som4" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron4" id="stron4" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

      <input type="radio" name="dis5" id="dis5" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som5" id="som5" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron5" id="stron5" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

      <input type="radio" name="dis6" id="dis6" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som6" id="som6" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron6" id="stron6" value="2" />

      <label>Strongly agree</label>

    </fieldset>

  </fieldset>

  <p>

    <input type="submit" id="submit" value="submit" onClick="display(event)" /></td> <!-- Need "event" to access preventDefault();" -->

  </p>

</form>



<table width="400px" align="center" border=0>

  <tr style="background-color:#8FBC8F;">

    <td align="center"><b>Results</b></td>

  </tr>

  <tr>

    <td align="center">

      <div id="displayarea"></div>

    </td>

  </tr>

</table>

answered Nov 20 '18 at 9:02

CodeF0x

1,85251019

Your main problem was that your form was submitting and therefore the site got reloaded -> all values disappeared.

To fix this, you can either change type="submit" of your button to type="button" or use event.preventDefault() like I did in my example.

You also can shorten your script to something like this:

function display(event) { // Need "event" to access prevenDefault();

  event.preventDefault(); // This line prevents the form from submitting, so your values stay visible after clicking the button

  var radios = [...document.querySelectorAll('input[type=radio]')]; // Get all your radio buttons at once

  var displayarea = document.getElementById('displayarea');



  var values = radios.map(radio => radio.value).join(' '); // Get all values of your radios and concat them in a string

  displayarea.innerText = values;

}

<form id="dep" name="dep">



  <fieldset id="depfield">

    <label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

      <input type="radio" name="dis1" id="dis1" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som1" id="som1" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron1" id="stron1" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

      <input type="radio" name="dis2" id="dis2" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som2" id="som2" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron2" id="stron2" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have suicidal thoughts</label>

    <fieldset class="options3">

      <input type="radio" name="dis3" id="dis3" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som3" id="som3" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron3" id="stron3" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

      <input type="radio" name="dis4" id="dis4" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som4" id="som4" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron4" id="stron4" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

      <input type="radio" name="dis5" id="dis5" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som5" id="som5" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron5" id="stron5" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

      <input type="radio" name="dis6" id="dis6" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som6" id="som6" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron6" id="stron6" value="2" />

      <label>Strongly agree</label>

    </fieldset>

  </fieldset>

  <p>

    <input type="submit" id="submit" value="submit" onClick="display(event)" /></td> <!-- Need "event" to access preventDefault();" -->

  </p>

</form>



<table width="400px" align="center" border=0>

  <tr style="background-color:#8FBC8F;">

    <td align="center"><b>Results</b></td>

  </tr>

  <tr>

    <td align="center">

      <div id="displayarea"></div>

    </td>

  </tr>

</table>

function display(event) { // Need "event" to access prevenDefault();

  event.preventDefault(); // This line prevents the form from submitting, so your values stay visible after clicking the button

  var radios = [...document.querySelectorAll('input[type=radio]')]; // Get all your radio buttons at once

  var displayarea = document.getElementById('displayarea');



  var values = radios.map(radio => radio.value).join(' '); // Get all values of your radios and concat them in a string

  displayarea.innerText = values;

}

<form id="dep" name="dep">



  <fieldset id="depfield">

    <label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

      <input type="radio" name="dis1" id="dis1" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som1" id="som1" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron1" id="stron1" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

      <input type="radio" name="dis2" id="dis2" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som2" id="som2" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron2" id="stron2" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have suicidal thoughts</label>

    <fieldset class="options3">

      <input type="radio" name="dis3" id="dis3" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som3" id="som3" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron3" id="stron3" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

      <input type="radio" name="dis4" id="dis4" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som4" id="som4" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron4" id="stron4" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

      <input type="radio" name="dis5" id="dis5" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som5" id="som5" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron5" id="stron5" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

      <input type="radio" name="dis6" id="dis6" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som6" id="som6" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron6" id="stron6" value="2" />

      <label>Strongly agree</label>

    </fieldset>

  </fieldset>

  <p>

    <input type="submit" id="submit" value="submit" onClick="display(event)" /></td> <!-- Need "event" to access preventDefault();" -->

  </p>

</form>



<table width="400px" align="center" border=0>

  <tr style="background-color:#8FBC8F;">

    <td align="center"><b>Results</b></td>

  </tr>

  <tr>

    <td align="center">

      <div id="displayarea"></div>

    </td>

  </tr>

</table>

function display(event) { // Need "event" to access prevenDefault();

  event.preventDefault(); // This line prevents the form from submitting, so your values stay visible after clicking the button

  var radios = [...document.querySelectorAll('input[type=radio]')]; // Get all your radio buttons at once

  var displayarea = document.getElementById('displayarea');



  var values = radios.map(radio => radio.value).join(' '); // Get all values of your radios and concat them in a string

  displayarea.innerText = values;

}

<form id="dep" name="dep">



  <fieldset id="depfield">

    <label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

      <input type="radio" name="dis1" id="dis1" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som1" id="som1" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron1" id="stron1" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

      <input type="radio" name="dis2" id="dis2" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som2" id="som2" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron2" id="stron2" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I have suicidal thoughts</label>

    <fieldset class="options3">

      <input type="radio" name="dis3" id="dis3" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som3" id="som3" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron3" id="stron3" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

      <input type="radio" name="dis4" id="dis4" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som4" id="som4" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron4" id="stron4" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

      <input type="radio" name="dis5" id="dis5" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som5" id="som5" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron5" id="stron5" value="2" />

      <label>Strongly agree</label>

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

      <input type="radio" name="dis6" id="dis6" value="0" />

      <label>Strongly disagree</label>

      <input type="radio" name="som6" id="som6" value="1" />

      <label>Somewhat agree</label>

      <input type="radio" name="stron6" id="stron6" value="2" />

      <label>Strongly agree</label>

    </fieldset>

  </fieldset>

  <p>

    <input type="submit" id="submit" value="submit" onClick="display(event)" /></td> <!-- Need "event" to access preventDefault();" -->

  </p>

</form>



<table width="400px" align="center" border=0>

  <tr style="background-color:#8FBC8F;">

    <td align="center"><b>Results</b></td>

  </tr>

  <tr>

    <td align="center">

      <div id="displayarea"></div>

    </td>

  </tr>

</table>

answered Nov 20 '18 at 9:02

CodeF0x

1,85251019

answered Nov 20 '18 at 9:02

CodeF0x

1,85251019

answered Nov 20 '18 at 9:02

CodeF0x

1,85251019

answered Nov 20 '18 at 9:02

CodeF0x

1,85251019

Thank you, but how would I get it to output the values selected and not just the assigned values of each button? it just says 012012 every time. For example if I select strongly disagree for the first three questions, the first three numbers should be 000

– Jackie
Nov 20 '18 at 22:10

I got it, just had to put :checked after 'input[type=radio]

– Jackie
Nov 21 '18 at 1:50

@Jackie Glad to help and nice to hear you solved your problem!

– CodeF0x
Nov 21 '18 at 7:44

add a comment |

Thank you, but how would I get it to output the values selected and not just the assigned values of each button? it just says 012012 every time. For example if I select strongly disagree for the first three questions, the first three numbers should be 000

– Jackie
Nov 20 '18 at 22:10

I got it, just had to put :checked after 'input[type=radio]

– Jackie
Nov 21 '18 at 1:50

@Jackie Glad to help and nice to hear you solved your problem!

– CodeF0x
Nov 21 '18 at 7:44

Thank you, but how would I get it to output the values selected and not just the assigned values of each button? it just says 012012 every time. For example if I select strongly disagree for the first three questions, the first three numbers should be 000

– Jackie
Nov 20 '18 at 22:10

I got it, just had to put :checked after 'input[type=radio]

– Jackie
Nov 21 '18 at 1:50

@Jackie Glad to help and nice to hear you solved your problem!

– CodeF0x
Nov 21 '18 at 7:44

add a comment |

For radio buttons, every element should have the same name.Otherwise it won't function properly

Eg:

<fieldset class="options2">



    <input type="radio" name="nameofradiobutton" id="dis2" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="nameofradiobutton" id="som2" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="nameofradiobutton" id="stron2" value="2"/>

    <label>Strongly agree</label>   



</fieldset>

edited Nov 20 '18 at 8:20

Ashish Kamble

632619

answered Nov 20 '18 at 8:04

Vasanthi GV

787

I replaced it same name still it is not working

– brk
Nov 20 '18 at 8:08

add a comment |

For radio buttons, every element should have the same name.Otherwise it won't function properly

Eg:

<fieldset class="options2">



    <input type="radio" name="nameofradiobutton" id="dis2" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="nameofradiobutton" id="som2" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="nameofradiobutton" id="stron2" value="2"/>

    <label>Strongly agree</label>   



</fieldset>

edited Nov 20 '18 at 8:20

Ashish Kamble

632619

answered Nov 20 '18 at 8:04

Vasanthi GV

787

I replaced it same name still it is not working

– brk
Nov 20 '18 at 8:08

add a comment |

For radio buttons, every element should have the same name.Otherwise it won't function properly

Eg:

<fieldset class="options2">



    <input type="radio" name="nameofradiobutton" id="dis2" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="nameofradiobutton" id="som2" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="nameofradiobutton" id="stron2" value="2"/>

    <label>Strongly agree</label>   



</fieldset>

edited Nov 20 '18 at 8:20

Ashish Kamble

632619

answered Nov 20 '18 at 8:04

Vasanthi GV

787

For radio buttons, every element should have the same name.Otherwise it won't function properly

Eg:

<fieldset class="options2">



    <input type="radio" name="nameofradiobutton" id="dis2" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="nameofradiobutton" id="som2" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="nameofradiobutton" id="stron2" value="2"/>

    <label>Strongly agree</label>   



</fieldset>

edited Nov 20 '18 at 8:20

Ashish Kamble

632619

answered Nov 20 '18 at 8:04

Vasanthi GV

787

edited Nov 20 '18 at 8:20

Ashish Kamble

632619

edited Nov 20 '18 at 8:20

Ashish Kamble

632619

edited Nov 20 '18 at 8:20

Ashish Kamble

632619

answered Nov 20 '18 at 8:04

Vasanthi GV

787

answered Nov 20 '18 at 8:04

Vasanthi GV

787

answered Nov 20 '18 at 8:04

Vasanthi GV

787

I replaced it same name still it is not working

– brk
Nov 20 '18 at 8:08

add a comment |

I replaced it same name still it is not working

– brk
Nov 20 '18 at 8:08

I replaced it same name still it is not working

– brk
Nov 20 '18 at 8:08

add a comment |

function display(){

  var el = [...document.querySelectorAll('input[type=radio]')];

  el = el.map(r => r.value).join(' ');

  document.getElementById("displayarea").textContent = el;

}

<table width="400px" align="center" border=0> 

  <tr style="background-color:#8FBC8F;">

  <td align="center"><b>Results</b></td>

  </tr> 

  <tr>

  <td align="center"><div id="displayarea"></div></td>

  </tr>

</table>





<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="button" id="submit" value="submit" onClick="display()"/>

</p>

</form>

If you want to get the values on change of the radio try the following:

document.querySelectorAll('input[name=asleep]').forEach(function(el){

  el.addEventListener('change', display);

});



function display(){

  document.getElementById("displayarea").textContent = this.value; 

}

<table width="400px" align="center" border=0> 

<tr style="background-color:#8FBC8F;">

<td align="center"><b>Results</b></td>

</tr> 

<tr>

<td align="center"><div id="displayarea"></div></td>

</tr>

</table>





<label>I have trouble falling asleep or sleeping too much</label>

<fieldset class="options2">

    <input type="radio" name="asleep" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="asleep" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="asleep" value="2"/>

    <label>Strongly agree</label>   

</fieldset>

edited Nov 20 '18 at 8:39

answered Nov 20 '18 at 8:12

Mamun

26.9k71830

As far as I understood your code, will the text content be not replaced on every click? He wants it to be appended, vertically

– Subhasish Bhattacharjee
Nov 20 '18 at 8:15

@SubhasishBhattacharjee, added that solution as well as part of the answer....thanks.

– Mamun
Nov 20 '18 at 8:19

add a comment |

function display(){

  var el = [...document.querySelectorAll('input[type=radio]')];

  el = el.map(r => r.value).join(' ');

  document.getElementById("displayarea").textContent = el;

}

<table width="400px" align="center" border=0> 

  <tr style="background-color:#8FBC8F;">

  <td align="center"><b>Results</b></td>

  </tr> 

  <tr>

  <td align="center"><div id="displayarea"></div></td>

  </tr>

</table>





<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="button" id="submit" value="submit" onClick="display()"/>

</p>

</form>

If you want to get the values on change of the radio try the following:

document.querySelectorAll('input[name=asleep]').forEach(function(el){

  el.addEventListener('change', display);

});



function display(){

  document.getElementById("displayarea").textContent = this.value; 

}

<table width="400px" align="center" border=0> 

<tr style="background-color:#8FBC8F;">

<td align="center"><b>Results</b></td>

</tr> 

<tr>

<td align="center"><div id="displayarea"></div></td>

</tr>

</table>





<label>I have trouble falling asleep or sleeping too much</label>

<fieldset class="options2">

    <input type="radio" name="asleep" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="asleep" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="asleep" value="2"/>

    <label>Strongly agree</label>   

</fieldset>

edited Nov 20 '18 at 8:39

answered Nov 20 '18 at 8:12

Mamun

26.9k71830

As far as I understood your code, will the text content be not replaced on every click? He wants it to be appended, vertically

– Subhasish Bhattacharjee
Nov 20 '18 at 8:15

@SubhasishBhattacharjee, added that solution as well as part of the answer....thanks.

– Mamun
Nov 20 '18 at 8:19

add a comment |

function display(){

  var el = [...document.querySelectorAll('input[type=radio]')];

  el = el.map(r => r.value).join(' ');

  document.getElementById("displayarea").textContent = el;

}

<table width="400px" align="center" border=0> 

  <tr style="background-color:#8FBC8F;">

  <td align="center"><b>Results</b></td>

  </tr> 

  <tr>

  <td align="center"><div id="displayarea"></div></td>

  </tr>

</table>





<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="button" id="submit" value="submit" onClick="display()"/>

</p>

</form>

If you want to get the values on change of the radio try the following:

document.querySelectorAll('input[name=asleep]').forEach(function(el){

  el.addEventListener('change', display);

});



function display(){

  document.getElementById("displayarea").textContent = this.value; 

}

<table width="400px" align="center" border=0> 

<tr style="background-color:#8FBC8F;">

<td align="center"><b>Results</b></td>

</tr> 

<tr>

<td align="center"><div id="displayarea"></div></td>

</tr>

</table>





<label>I have trouble falling asleep or sleeping too much</label>

<fieldset class="options2">

    <input type="radio" name="asleep" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="asleep" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="asleep" value="2"/>

    <label>Strongly agree</label>   

</fieldset>

edited Nov 20 '18 at 8:39

answered Nov 20 '18 at 8:12

Mamun

26.9k71830

function display(){

  var el = [...document.querySelectorAll('input[type=radio]')];

  el = el.map(r => r.value).join(' ');

  document.getElementById("displayarea").textContent = el;

}

<table width="400px" align="center" border=0> 

  <tr style="background-color:#8FBC8F;">

  <td align="center"><b>Results</b></td>

  </tr> 

  <tr>

  <td align="center"><div id="displayarea"></div></td>

  </tr>

</table>





<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="button" id="submit" value="submit" onClick="display()"/>

</p>

</form>

If you want to get the values on change of the radio try the following:

document.querySelectorAll('input[name=asleep]').forEach(function(el){

  el.addEventListener('change', display);

});



function display(){

  document.getElementById("displayarea").textContent = this.value; 

}

<table width="400px" align="center" border=0> 

<tr style="background-color:#8FBC8F;">

<td align="center"><b>Results</b></td>

</tr> 

<tr>

<td align="center"><div id="displayarea"></div></td>

</tr>

</table>





<label>I have trouble falling asleep or sleeping too much</label>

<fieldset class="options2">

    <input type="radio" name="asleep" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="asleep" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="asleep" value="2"/>

    <label>Strongly agree</label>   

</fieldset>

function display(){

  var el = [...document.querySelectorAll('input[type=radio]')];

  el = el.map(r => r.value).join(' ');

  document.getElementById("displayarea").textContent = el;

}

<table width="400px" align="center" border=0> 

  <tr style="background-color:#8FBC8F;">

  <td align="center"><b>Results</b></td>

  </tr> 

  <tr>

  <td align="center"><div id="displayarea"></div></td>

  </tr>

</table>





<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="button" id="submit" value="submit" onClick="display()"/>

</p>

</form>

function display(){

  var el = [...document.querySelectorAll('input[type=radio]')];

  el = el.map(r => r.value).join(' ');

  document.getElementById("displayarea").textContent = el;

}

<table width="400px" align="center" border=0> 

  <tr style="background-color:#8FBC8F;">

  <td align="center"><b>Results</b></td>

  </tr> 

  <tr>

  <td align="center"><div id="displayarea"></div></td>

  </tr>

</table>





<form id="dep" name="dep">



<fieldset id="depfield">    

<label>I've lost my enthusiasm for life</label>

    <fieldset class="options1">

        <input type="radio" name="dis1" id="dis1" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som1" id="som1" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron1" id="stron1" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



  <label>I have trouble falling asleep or sleeping too much</label>

    <fieldset class="options2">

        <input type="radio" name="dis2" id="dis2" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som2" id="som2" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron2" id="stron2" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I have suicidal thoughts</label>

    <fieldset class="options3">

        <input type="radio" name="dis3" id="dis3" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som3" id="som3" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron3" id="stron3" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I tend to over-eat or eat too little</label>

    <fieldset class="options4">

        <input type="radio" name="dis4" id="dis4" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som4" id="som4" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron4" id="stron4" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



     <label>I often feel very emotional and upset</label>

    <fieldset class="options5">

        <input type="radio" name="dis5" id="dis5" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som5" id="som5" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron5" id="stron5" value="2"/>

        <label>Strongly agree</label>   

    </fieldset>



    <label>I don't put in as much effort as I used to</label>

    <fieldset class="options6">

        <input type="radio" name="dis6" id="dis6" value="0"/>

        <label>Strongly disagree</label>

        <input type="radio" name="som6" id="som6" value="1"/>

        <label>Somewhat agree</label>

        <input type="radio" name="stron6" id="stron6" value="2"/>

        <label>Strongly agree</label>   

    </fieldset> 

</fieldset>

<p>

<input type="button" id="submit" value="submit" onClick="display()"/>

</p>

</form>

document.querySelectorAll('input[name=asleep]').forEach(function(el){

  el.addEventListener('change', display);

});



function display(){

  document.getElementById("displayarea").textContent = this.value; 

}

<table width="400px" align="center" border=0> 

<tr style="background-color:#8FBC8F;">

<td align="center"><b>Results</b></td>

</tr> 

<tr>

<td align="center"><div id="displayarea"></div></td>

</tr>

</table>





<label>I have trouble falling asleep or sleeping too much</label>

<fieldset class="options2">

    <input type="radio" name="asleep" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="asleep" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="asleep" value="2"/>

    <label>Strongly agree</label>   

</fieldset>

document.querySelectorAll('input[name=asleep]').forEach(function(el){

  el.addEventListener('change', display);

});



function display(){

  document.getElementById("displayarea").textContent = this.value; 

}

<table width="400px" align="center" border=0> 

<tr style="background-color:#8FBC8F;">

<td align="center"><b>Results</b></td>

</tr> 

<tr>

<td align="center"><div id="displayarea"></div></td>

</tr>

</table>





<label>I have trouble falling asleep or sleeping too much</label>

<fieldset class="options2">

    <input type="radio" name="asleep" value="0"/>

    <label>Strongly disagree</label>

    <input type="radio" name="asleep" value="1"/>

    <label>Somewhat agree</label>

    <input type="radio" name="asleep" value="2"/>

    <label>Strongly agree</label>   

</fieldset>

edited Nov 20 '18 at 8:39

answered Nov 20 '18 at 8:12

Mamun

26.9k71830

edited Nov 20 '18 at 8:39

answered Nov 20 '18 at 8:12

Mamun

26.9k71830

answered Nov 20 '18 at 8:12

Mamun

26.9k71830

answered Nov 20 '18 at 8:12

Mamun

26.9k71830

As far as I understood your code, will the text content be not replaced on every click? He wants it to be appended, vertically

– Subhasish Bhattacharjee
Nov 20 '18 at 8:15

@SubhasishBhattacharjee, added that solution as well as part of the answer....thanks.

– Mamun
Nov 20 '18 at 8:19

add a comment |

As far as I understood your code, will the text content be not replaced on every click? He wants it to be appended, vertically

– Subhasish Bhattacharjee
Nov 20 '18 at 8:15

@SubhasishBhattacharjee, added that solution as well as part of the answer....thanks.

– Mamun
Nov 20 '18 at 8:19

As far as I understood your code, will the text content be not replaced on every click? He wants it to be appended, vertically

– Subhasish Bhattacharjee
Nov 20 '18 at 8:15

@SubhasishBhattacharjee, added that solution as well as part of the answer....thanks.

– Mamun
Nov 20 '18 at 8:19

add a comment |

add an onchange event to the radio buttons

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="r"  value="0" onchange="showVal(this)"/>

     <label>Strongly disagree</label>

     <input type="radio" name="r"  value="1" onchange="showVal(this)"/>

     <label>Somewhat agree</label>

     <input type="radio" name="r"  value="2" onchange="showVal(this)"/>

     <label>Strongly agree</label>	

 </fieldset>

And then write a javascript function to display or do whatever

 function showVal(radio) {

      // possible things you may do, below are examples

       alert(radio.value);

       alert(radio.checked);

    };

answered Nov 20 '18 at 8:38

Subhasish Bhattacharjee

7511

add a comment |

add an onchange event to the radio buttons

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="r"  value="0" onchange="showVal(this)"/>

     <label>Strongly disagree</label>

     <input type="radio" name="r"  value="1" onchange="showVal(this)"/>

     <label>Somewhat agree</label>

     <input type="radio" name="r"  value="2" onchange="showVal(this)"/>

     <label>Strongly agree</label>	

 </fieldset>

And then write a javascript function to display or do whatever

 function showVal(radio) {

      // possible things you may do, below are examples

       alert(radio.value);

       alert(radio.checked);

    };

answered Nov 20 '18 at 8:38

Subhasish Bhattacharjee

7511

add a comment |

add an onchange event to the radio buttons

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="r"  value="0" onchange="showVal(this)"/>

     <label>Strongly disagree</label>

     <input type="radio" name="r"  value="1" onchange="showVal(this)"/>

     <label>Somewhat agree</label>

     <input type="radio" name="r"  value="2" onchange="showVal(this)"/>

     <label>Strongly agree</label>	

 </fieldset>

And then write a javascript function to display or do whatever

 function showVal(radio) {

      // possible things you may do, below are examples

       alert(radio.value);

       alert(radio.checked);

    };

answered Nov 20 '18 at 8:38

Subhasish Bhattacharjee

7511

add an onchange event to the radio buttons

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="r"  value="0" onchange="showVal(this)"/>

     <label>Strongly disagree</label>

     <input type="radio" name="r"  value="1" onchange="showVal(this)"/>

     <label>Somewhat agree</label>

     <input type="radio" name="r"  value="2" onchange="showVal(this)"/>

     <label>Strongly agree</label>	

 </fieldset>

And then write a javascript function to display or do whatever

 function showVal(radio) {

      // possible things you may do, below are examples

       alert(radio.value);

       alert(radio.checked);

    };

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="r"  value="0" onchange="showVal(this)"/>

     <label>Strongly disagree</label>

     <input type="radio" name="r"  value="1" onchange="showVal(this)"/>

     <label>Somewhat agree</label>

     <input type="radio" name="r"  value="2" onchange="showVal(this)"/>

     <label>Strongly agree</label>	

 </fieldset>

 <label>I have trouble falling asleep or sleeping too much</label>

 <fieldset class="options2">

     <input type="radio" name="r"  value="0" onchange="showVal(this)"/>

     <label>Strongly disagree</label>

     <input type="radio" name="r"  value="1" onchange="showVal(this)"/>

     <label>Somewhat agree</label>

     <input type="radio" name="r"  value="2" onchange="showVal(this)"/>

     <label>Strongly agree</label>	

 </fieldset>

 function showVal(radio) {

      // possible things you may do, below are examples

       alert(radio.value);

       alert(radio.checked);

    };

 function showVal(radio) {

      // possible things you may do, below are examples

       alert(radio.value);

       alert(radio.checked);

    };

answered Nov 20 '18 at 8:38

Subhasish Bhattacharjee

7511

answered Nov 20 '18 at 8:38

Subhasish Bhattacharjee

7511

answered Nov 20 '18 at 8:38

Subhasish Bhattacharjee

7511

answered Nov 20 '18 at 8:38

Subhasish Bhattacharjee

7511

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky