1. PingCode智库首页
  2. 百科

js表单怎么获取值

Edit2 • • 百科

js表单怎么获取值

在JavaScript中，获取表单值可以通过以下几种方法：使用document.getElementById()、使用document.querySelector()、使用document.forms[]。 其中，最常用的方式是使用document.getElementById()来获取表单元素的值。下面详细讲解这种方式。

使用document.getElementById()方法可以通过表单元素的ID来获取值。假设我们有一个简单的HTML表单包含一个输入框和一个提交按钮：

<form id="myForm">


  <label for="username">Username:</label>


  <input type="text" id="username" name="username">


  <input type="button" value="Submit" onclick="getFormValue()">


</form>


<script>


function getFormValue() {


  var username = document.getElementById("username").value;


  alert("Username: " + username);


}


</script>

在上面的例子中，getElementById("username")获取到的是ID为username的输入框，然后通过.value属性获取其值。

一、使用document.getElementById()获取表单值

1. 基本用法

使用document.getElementById()是最常见的方式，通过指定元素的ID，可以轻松获取其值。以下是一个具体例子：

<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Get Form Value</title>


</head>


<body>


  <form id="loginForm">


    <label for="email">Email:</label>


    <input type="email" id="email" name="email"><br><br>


    <label for="password">Password:</label>


    <input type="password" id="password" name="password"><br><br>


    <input type="button" value="Login" onclick="getFormValues()">


  </form>


  <script>


  function getFormValues() {


    var email = document.getElementById("email").value;


    var password = document.getElementById("password").value;


    console.log("Email: " + email);


    console.log("Password: " + password);


  }


  </script>


</body>


</html>

在这个例子中，通过点击登录按钮，会调用getFormValues()函数，函数中通过document.getElementById()分别获取到邮箱和密码的值并打印到控制台。

2. 获取多个表单值

如果表单中有多个输入框，可以依次获取它们的值：

<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Get Multiple Form Values</title>


</head>


<body>


  <form id="registerForm">


    <label for="firstName">First Name:</label>


    <input type="text" id="firstName" name="firstName"><br><br>


    <label for="lastName">Last Name:</label>


    <input type="text" id="lastName" name="lastName"><br><br>


    <label for="email">Email:</label>


    <input type="email" id="email" name="email"><br><br>


    <label for="password">Password:</label>


    <input type="password" id="password" name="password"><br><br>


    <input type="button" value="Register" onclick="getAllFormValues()">


  </form>


  <script>


  function getAllFormValues() {


    var firstName = document.getElementById("firstName").value;


    var lastName = document.getElementById("lastName").value;


    var email = document.getElementById("email").value;


    var password = document.getElementById("password").value;


    console.log("First Name: " + firstName);


    console.log("Last Name: " + lastName);


    console.log("Email: " + email);


    console.log("Password: " + password);


  }


  </script>


</body>


</html>

这种方式适用于表单较为简单，元素数量不多的情况。对于复杂的表单，可以使用其他方法来简化代码。

二、使用document.querySelector()获取表单值

1. 基本用法

document.querySelector()和document.querySelectorAll()方法允许我们使用CSS选择器来获取元素。以下是一个使用document.querySelector()获取表单值的例子：

<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Get Form Value with querySelector</title>


</head>


<body>


  <form id="contactForm">


    <label for="name">Name:</label>


    <input type="text" id="name" name="name"><br><br>


    <label for="message">Message:</label>


    <textarea id="message" name="message"></textarea><br><br>


    <input type="button" value="Send" onclick="getFormValuesQuerySelector()">


  </form>


  <script>


  function getFormValuesQuerySelector() {


    var name = document.querySelector("#name").value;


    var message = document.querySelector("#message").value;


    console.log("Name: " + name);


    console.log("Message: " + message);


  }


  </script>


</body>


</html>

在这个例子中，使用document.querySelector()方法通过CSS选择器获取元素的值。

2. 获取多个表单值

<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Get Multiple Form Values with querySelector</title>


</head>


<body>


  <form id="surveyForm">


    <label for="age">Age:</label>


    <input type="number" id="age" name="age"><br><br>


    <label for="gender">Gender:</label>


    <select id="gender" name="gender">


      <option value="male">Male</option>


      <option value="female">Female</option>


    </select><br><br>


    <label for="feedback">Feedback:</label>


    <textarea id="feedback" name="feedback"></textarea><br><br>


    <input type="button" value="Submit" onclick="getSurveyValues()">


  </form>


  <script>


  function getSurveyValues() {


    var age = document.querySelector("#age").value;


    var gender = document.querySelector("#gender").value;


    var feedback = document.querySelector("#feedback").value;


    console.log("Age: " + age);


    console.log("Gender: " + gender);


    console.log("Feedback: " + feedback);


  }


  </script>


</body>


</html>

使用document.querySelector()方法可以通过CSS选择器灵活地选择表单元素，并获取其值。

三、使用document.forms[]获取表单值

1. 基本用法

document.forms[]可以通过表单的名称或索引来获取表单元素，然后通过elements[]属性获取具体的表单控件。以下是一个使用document.forms[]获取表单值的例子：

<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Get Form Value with document.forms</title>


</head>


<body>


  <form name="profileForm">


    <label for="username">Username:</label>


    <input type="text" id="username" name="username"><br><br>


    <label for="bio">Bio:</label>


    <textarea id="bio" name="bio"></textarea><br><br>


    <input type="button" value="Save" onclick="getProfileValues()">


  </form>


  <script>


  function getProfileValues() {


    var username = document.forms["profileForm"].elements["username"].value;


    var bio = document.forms["profileForm"].elements["bio"].value;


    console.log("Username: " + username);


    console.log("Bio: " + bio);


  }


  </script>


</body>


</html>

在这个例子中，通过document.forms["profileForm"]获取到表单，然后通过elements["username"]和elements["bio"]获取具体的表单控件值。

2. 获取多个表单值

<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Get Multiple Form Values with document.forms</title>


</head>


<body>


  <form name="checkoutForm">


    <label for="address">Address:</label>


    <input type="text" id="address" name="address"><br><br>


    <label for="city">City:</label>


    <input type="text" id="city" name="city"><br><br>


    <label for="postalCode">Postal Code:</label>


    <input type="text" id="postalCode" name="postalCode"><br><br>


    <input type="button" value="Checkout" onclick="getCheckoutValues()">


  </form>


  <script>


  function getCheckoutValues() {


    var address = document.forms["checkoutForm"].elements["address"].value;


    var city = document.forms["checkoutForm"].elements["city"].value;


    var postalCode = document.forms["checkoutForm"].elements["postalCode"].value;


    console.log("Address: " + address);


    console.log("City: " + city);


    console.log("Postal Code: " + postalCode);


  }


  </script>


</body>


</html>

这种方式在处理复杂的表单时尤为方便，可以通过表单名称和控件名称快速获取对应的值。

四、结合事件监听获取表单值

1. 使用事件监听

通过为表单元素添加事件监听器，可以在用户输入或提交表单时动态获取表单值。以下是一个使用事件监听获取表单值的例子：

<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Get Form Value with Event Listener</title>


</head>


<body>


  <form id="feedbackForm">


    <label for="name">Name:</label>


    <input type="text" id="name" name="name"><br><br>


    <label for="feedback">Feedback:</label>


    <textarea id="feedback" name="feedback"></textarea><br><br>


    <input type="button" value="Submit" id="submitBtn">


  </form>


  <script>


  document.getElementById("submitBtn").addEventListener("click", function() {


    var name = document.getElementById("name").value;


    var feedback = document.getElementById("feedback").value;


    console.log("Name: " + name);


    console.log("Feedback: " + feedback);


  });


  </script>


</body>


</html>

在这个例子中，通过addEventListener方法为提交按钮添加点击事件监听器，当用户点击提交按钮时，获取表单值并打印到控制台。

2. 使用表单提交事件

除了为按钮添加事件监听器外，还可以为整个表单添加提交事件监听器：

<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Get Form Value on Submit</title>


</head>


<body>


  <form id="contactForm">


    <label for="email">Email:</label>


    <input type="email" id="email" name="email"><br><br>


    <label for="message">Message:</label>


    <textarea id="message" name="message"></textarea><br><br>


    <input type="submit" value="Send">


  </form>


  <script>


  document.getElementById("contactForm").addEventListener("submit", function(event) {


    event.preventDefault(); // 阻止表单默认提交行为


    var email = document.getElementById("email").value;


    var message = document.getElementById("message").value;


    console.log("Email: " + email);


    console.log("Message: " + message);


  });


  </script>


</body>


</html>

在这个例子中，通过为表单添加提交事件监听器，并在事件处理函数中使用event.preventDefault()方法阻止表单的默认提交行为，然后获取表单值。

五、使用第三方库获取表单值

在实际开发中，使用第三方库如jQuery可以简化获取表单值的过程。以下是使用jQuery获取表单值的例子：

1. 基本用法

<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Get Form Value with jQuery</title>


  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


</head>


<body>


  <form id="loginForm">


    <label for="username">Username:</label>


    <input type="text" id="username" name="username"><br><br>


    <label for="password">Password:</label>


    <input type="password" id="password" name="password"><br><br>


    <input type="button" value="Login" id="loginBtn">


  </form>


  <script>


  $("#loginBtn").click(function() {


    var username = $("#username").val();


    var password = $("#password").val();


    console.log("Username: " + username);


    console.log("Password: " + password);


  });


  </script>


</body>


</html>

在这个例子中，通过jQuery的$函数获取表单元素，并通过.val()方法获取其值。

2. 获取多个表单值

<!DOCTYPE html>


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Get Multiple Form Values with jQuery</title>


  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


</head>


<body>


  <form id="registerForm">


    <label for="firstName">First Name:</label>


    <input type="text" id="firstName" name="firstName"><br><br>


    <label for="lastName">Last Name:</label>


    <input type="text" id="lastName" name="lastName"><br><br>


    <label for="email">Email:</label>


    <input type="email" id="email" name="email"><br><br>


    <label for="password">Password:</label>


    <input type="password" id="password" name="password"><br><br>


    <input type="button" value="Register" id="registerBtn">


  </form>


  <script>


  $("#registerBtn").click(function() {


    var firstName = $("#firstName").val();


    var lastName = $("#lastName").val();


    var email = $("#email").val();


    var password = $("#password").val();


    console.log("First Name: " + firstName);


    console.log("Last Name: " + lastName);


    console.log("Email: " + email);


    console.log("Password: " + password);


  });


  </script>


</body>


</html>

通过jQuery，可以方便地获取多个表单值，并进行处理。

六、总结

在JavaScript中，获取表单值的方式多种多样，可以根据具体需求选择合适的方法：

  1. 使用document.getElementById()：适用于简单表单，通过ID获取元素值。
  2. 使用document.querySelector()：使用CSS选择器获取元素值，适用于复杂表单。
  3. 使用document.forms[]：通过表单名称或索引获取表单元素，适用于复杂表单。
  4. 结合事件监听获取表单值：通过添加事件监听器动态获取表单值。
  5. 使用第三方库获取表单值：如jQuery，简化获取表单值的过程。

了解并掌握这些方法，可以帮助我们在不同场景下灵活获取表单值，从而实现更复杂的交互功能。在团队项目中，如果需要高效协作和管理，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile，这些工具可以大大提高项目管理和团队协作的效率。

相关问答FAQs：

1. 如何使用JavaScript获取表单的值？

JavaScript可以通过以下方式获取表单的值：

  • 使用document.getElementById()获取表单元素的引用，然后使用value属性获取输入框的值。
  • 使用document.forms获取表单的引用，然后使用表单元素的名称或索引来获取对应的值。
  • 使用querySelector()或querySelectorAll()方法选择表单元素，然后使用value属性获取值。

2. 如何获取单选框或复选框的值？

要获取单选框或复选框的值，可以使用以下方法：

  • 对于单选框，可以通过遍历所有单选框元素，找到被选中的单选框，然后使用value属性获取其值。
  • 对于复选框，可以使用querySelectorAll()选择所有被选中的复选框，然后使用循环遍历获取每个复选框的值。

3. 如何获取下拉列表的选中值？

要获取下拉列表的选中值，可以使用以下方法：

  • 使用document.getElementById()获取下拉列表的引用，然后使用selectedIndex属性获取选中项的索引，再通过options属性获取选中项的值。
  • 使用document.querySelector()选择下拉列表，然后使用selectedOptions属性获取选中项的引用，再通过value属性获取选中项的值。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3940889

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部