CODEWITHSUNDEEP
javascriptformsdomradio-buttongetelementbyid
Jaykumar
Jaykumar

Reputation: 413

DOM javascript Form Gender Radio button "on" value output

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.

Upvotes: 0

Views: 1569

Answers (2)

Rumesh
Rumesh

Reputation: 630

you need to have a different treatment when it's a radio, in addition of adding the value for each radio

function myfunction() {

  var x = document.getElementById("myform").elements;
  var para = x[0].value;
  for (var i = 0; i < x.length; i++) {
    if ((x[i].type === 'radio' && x[i].checked) || x[i].type === 'text') {
      para = para.concate(x[i].value);
    }
  }

  document.getElementById("demo").innerHTML = para;
}
<form id="myform">
  name<input type="text" name="fname"> email
  <input type="text" name="email"> number
  <input type="text" name="number"> Gender
  <input type="radio" value="Male" name="gender" checked>Male
  <input type="radio" value="Female" name="gender">Female
  <button type="button" onclick="myfunction()"> Click me</button>
</form>
<p id="demo"></p>

Upvotes: 0

Doan Van Thang
Doan Van Thang

Reputation: 997

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>

Upvotes: 1

Related Questions