DOM javascript Form Gender Radio button "on" value output

Question

function myfunction() {

  var x = document.getElementById("myform").elements;
  var para = x[0].value;
  for (var i = 0; i < x.length; i++) {
    para = para.concate(x[i].value);
  }

  document.getElementById("demo").innerHTML = para;
}

<form id="myform">
  name<input type="textbox" name="fname"> email
  <input type="textbox" name="email"> number
  <input type="textbox" name="number"> Gender
  <input type="radio" name="gender" checked>Male
  <input type="radio" name="gender">Female
  <button type="button" onclick="myfunction()"> Click me</button>
</form>
<p id="demo"></p>

I tried but i think there is a bug. I want to display whole line that the user enter but clicking it is not working. At mid, it was working but after not working. I want output as jaykumar jay@123 111111 Male . And also how to get Gender Male/Female in demo. Instead it is giving me only "on" .How to get value Male or Female in demo.

Answer 1

Because you didn't add value to radio input. According to Mozilla doc:

If you omit the value attribute in the HTML, the submitted form data assigns the value on to the group.

function myfunction() {

    var x = document.getElementById("myform").elements;
    var para = x[0].value;
    for (var i = 0; i < x.length; i++) {
        para = para.concat(x[i].value);
    }

    document.getElementById("demo").innerHTML = para;
}

<form id="myform">
    name<input type="textbox" name="fname"> email
    <input type="textbox" name="email"> number
    <input type="textbox" name="number"> Gender
    <input type="radio" checked id="male" name="gender" value="Male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="Female">
    <label for="female">Female</label>
    <button type="button" onclick="myfunction()"> Click me</button>
</form>
<p id="demo"></p>