在html页面中输出表单

Question

我想在html表单下面的同一页面中打印提交的输入元素。应该打印所选的复选框元素。可以避免使用图像元素。

该功能似乎无法正常工作。

function validateForm(myForm) {
  var a = document.getElementById("fname").value;
  document.getElementById("display").innerHTML = y;
  var b = document.getElementByName("passwords").value;
  document.getElementById("display1").innerHTML = y;
  var c = document.getElementByName("gender");
  var i;
  for (i = 0; i < c.length; ++i) {
    if (c[i].checked)
      document.getElementById("display1").innerHTML = c[i].value; //looping through radio buttons

  }
  var d = document.getElementByName("hobbies");
  for (i = 0; i < d.length; ++i) {
    if (d[i] checked)
      ans = ans + d[i].value; //looping through checkboxes and adding to display in display 2 id.

  }
  document.getElementById("display2").innerHTML = ans;
  var e = document.getElementByName("cities").value;
  document.getElementById("display3").innerHTML = e;

}

<form name="myForm">
  <fieldset>
    <legend>Personal Details</legend>
    Name:
    <input type="text" id="fname" <br>Password:
    <input type="password" name="password" id="passwords" />
    <br>Gender:
    <input type="radio" name="gender" />Male
    <input type="radio" name="gender" />Female</input>
    <br>Hobbies:
    <input type="radio" name="hobbies" value="Reading" />Reading
    <input type="radio" name="hobbies" value="Writing" />Writing</input>
    <br>City:
    <select name="cities" />
    <option>Surat</option>
    <option>Ahmedabad</option>
    <option>Rajkot</option>
    <option>Vadodra</option>
    </select>
    <br>Image:
    <input type="file" accept="image/*" value="image" style="margin:0px 10px 10px 100px; margin:absolute;" />
</form>
<br>
<input type="Submit" value="Submit" onSubmit="validateform(myForm);">

</fieldset>

<p id="display"></p>//display the values submitted within the html page
<p id="display1"></p>
<p id="display2"></p>
<p id="display3"></p>

Answer 1

1. getElementsByName - 复数，当访问第一个时，使用[0]之类的 document.getElementsByName("cities")[0].value
2. 在d[i].checked
中遗漏了一个点
3. 将onSubmit="validateform(myForm);"移至表单标记并执行onSubmit="return validateForm(this);"并添加return false;
4. validateForm在事件处理程序中拼写错误（小写f）
5. y missing
6. ans not defined
＆＃13;
＆＃13;
function validateForm(myForm) {
  var a = document.getElementById("fname").value;
  document.getElementById("display").innerHTML = a;
  var b = document.getElementsByName("passwords").value;
  document.getElementById("display1").innerHTML = a;
  var c = document.getElementsByName("gender");
  var i, ans;
  for (i = 0; i < c.length; ++i) {
    if (c[i].checked)
      document.getElementById("display1").innerHTML = c[i].value; //looping through radio buttons

  }
  var d = document.getElementsByName("hobbies");
  for (i = 0; i < d.length; ++i) {
    if (d[i].checked)
      ans = ans + d[i].value; //looping through checkboxes and adding to display in display 2 id.

  }
  document.getElementById("display2").innerHTML = ans;
  var e = document.getElementsByName("cities")[0].value;
  document.getElementById("display3").innerHTML = e;
  return false; // normally when error but here to stay on page

}
＆＃13;
<form name="myForm" onSubmit="return validateForm(this);">
  <fieldset>
    <legend>Personal Details</legend>
    Name:
    <input type="text" id="fname" <br>Password:
    <input type="password" name="password" id="passwords" />
    <br>Gender:
    <input type="radio" name="gender" />Male
    <input type="radio" name="gender" />Female</input>
    <br>Hobbies:
    <input type="radio" name="hobbies" value="Reading" />Reading
    <input type="radio" name="hobbies" value="Writing" />Writing</input>
    <br>City:
    <select name="cities" />
    <option>Surat</option>
    <option>Ahmedabad</option>
    <option>Rajkot</option>
    <option>Vadodra</option>
    </select>
    <br>Image:
    <input type="file" accept="image/*" value="image" style="margin:0px 10px 10px 100px; margin:absolute;" />
</form>
<br>
<input type="Submit" value="Submit">

</fieldset>

<p id="display"></p><!-- display the values submitted within the html page -->
<p id="display1"></p>
<p id="display2"></p>
<p id="display3"></p>
＆＃13;
＆＃13;
＆＃13;