DOM javascript Form Gender Radio button "on" 值输出

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>

我试过了，但我认为有一个错误。我想显示用户输入的整行但单击它不起作用。在中期，它正在工作，但在不工作之后。我希望输出为 jaykumar jay@123 111111 Male 。以及如何在 demo 中获得 Gender Male/Female。相反，它只给我 "on" 。如何在演示中获得价值 Male 或 Female 。

Answer 1

因为你没有为radio input增加价值。根据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>

Answer 2

当它是收音机时，除了为每个收音机添加值外，还需要进行不同的处理

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>

DOM javascript Form Gender Radio button "on" 值输出

DOM javascript Form Gender Radio button "on" value output

javascript

forms

dom

getelementbyid

radio-button