如何使用javascript从字段集中获取值？

Question

<form action="welcome.php" method="post" onsubmit="return validate();">
<fieldset>
<legend> <b>Personal Info</b> </legend>
<pre>
<b>First Name</b> <input type="text" id="fname" size="30">
<b>Last Name</b> <input type="text" id="lname" size="30">
<b>Phone Number</b> <input type="number" id="fn" size="30">
    <fieldset>
    <legend> <b>Gender</b> </legend>
    <input type="radio" id="male" name="gender" value="Male">Male
    <input type="radio" id="female" name="gender" value="Female">Female
    </fieldset>
</pre>
</fieldset>
<input type="button" value="submit">
</form>

JavaScript 函数是 validate()。如果名字或姓氏或性别为空，用户将看到一条消息并且表单不会提交。通过使用 JavaScript 函数将是什么解决方案？

原文由 saddam hossain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意：使用 id 获取组件值，而不是依赖于 fieldset。

这里的html代码……

 <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

此处进行验证…返回 false 将避免向后端发送请求。如果您不使用表单名称，则使用 document.getElementById(<id name>).value 获取值

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

原文由 Hariharan 发布，翻译遵循 CC BY-SA 4.0 许可协议