javascript - 如何使用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函数将是什么解决方案。

Answer 1

注意：Use id to get the component value而不是取决于字段集。

这里的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>

这里进行验证... return 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;
  }
}

Answer 2

通过使用jquery，您可以获得所有输入值

例子：

var fname= $('#fname').val();
var lname= $('#lname').val();

将必需的属性添加到输入字段进行验证

<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" required size="30">
<b>Last Name</b> <input type="text" id="lname" required size="30">
<b>Phone Number</b> <input type="number" id="fn" required 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>

Answer 3

你为什么担心字段集every element is having an id，所以你可以directly go for getting element with id.

document.getElementById("id-here")