html页面内的输出表单

Output form within html page

本文关键字：输出 表单 html      更新时间：2023-09-26

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

这个函数似乎不工作。

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>

  1. getElementsByName -复数，当访问第一个时，使用[0]likedocument.getElementsByName("cities")[0].value
  2. 在d[i].checked
    3. 中缺少一个点
  3. 将onSubmit="validateform(myForm);"移动到表单标签，并执行onSubmit="return validateForm(this);"并添加返回false;
  4. 事件处理程序中validateForm拼写错误(小写f)
  5. y失踪
  6. 未定义

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
}
<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>

相关文章：