JS获取表单元素的值
?
<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><title>测试</title></head><body><form id="form1" name="form1">文本框 ：<input type="text" id="txt" value="txt" /><br />单选按钮：<input type="radio" value="男" name="sex" />男 <input type="radio" value="女" name="sex" checked="checked"/>女<br />复选框：<input type="checkbox" value="1" name="check[]"/>1<input type="checkbox" value="2" checked="checked" name="check[]" />2<input type="checkbox" value="3" checked="checked" name="check[]" />3<br /> 下拉框：<select id="sel" style="width: 100px"><option value="yi">1</option><option value="er" selected="selected">2</option><option value="san">3</option></select><br /><input type="button" value="获取" onclick="getVal()"/></form> <script type="text/javascript"> function getVal(){ var str=""; //获取单选按钮的值 var radios = document.form1.sex; var n = radios.length; for (var i = 0; i < n; i++) { if (radios[i].checked) { str = " 单选 "+radios[i].value; } } //获取复选框中选中的值的组合 1,2,3,4 var checkboxs = document.getElementsByName('check[]'); var n = checkboxs.length; for (var i = 0; i < n; i++) { if (checkboxs[i].checked) { str += " 复选框 "+checkboxs[i].value; } } //获取下拉列表的选中项的值 //方法一： str += " 列表 一："+document.getElementById("sel").value; //方法二： var sel = document.getElementById("sel"); str += " 列表 二："+sel.options[sel.selectedIndex].value; alert(str); }</script></body></html>
分享到：
相关推荐
本文实例讲述了JavaScript获取表单内所有元素值的方法。分享给大家供大家参考。具体如下： 下面的JS代码可以遍历指定表单中的所有元素，并输出元素的值 <!DOCTYPE html> <html> <body> <form id=...
下面将从几个方面展开讨论：ExtJs表单的基本概念、获取表单元素值的方法、实际应用中的技巧以及一些进阶用法。 ### 一、ExtJs表单的基本概念 ExtJs是一款基于JavaScript的开源前端框架，用于构建交互式的Web应用...
在本篇内容中，我们将详细探讨如何使用jQuery来获取form...此外，还了解到了原生JavaScript在操作表单元素值时的方法。这些知识在开发Web应用时非常重要，能够帮助开发者更加高效地处理用户输入数据，提升用户体验。
除了通过id来获取表单元素外，JavaScript还提供其他方式来选取表单，例如通过name属性或者直接通过表单元素的索引位置。例如，如果表单的name属性为"frm1"，也可以使用`document.getElementsByName("frm1")[0]`来...
本文将详细解析如何使用jQuery获取表单元素的各种值，包括文本框（TEXT）、文本区域（AREA TEXT）、复选框（CHECKBOX）、单选按钮（RADIO）、下拉列表（SELECT）以及表格（TABLE）中的数据。 ### 文本框（TEXT） ...
本文将介绍如何使用JavaScript简单地获取表单中单选按钮的值，并涉及到表单元素的遍历与查找技巧。 首先，单选按钮在HTML中的定义通常是使用`<input>`标签，并将`type`属性设置为`radio`。单选按钮通常会具有相同的...
特别是在涉及到表单数据处理时，如何获取特定表单元素的值是一个常见的需求。本文将通过一个简单实例，讲解如何在JavaScript中获取JSP表单中单选按钮（radio）类型的值。 首先，我们需要了解单选按钮（radio）在...
**注意：** `.val()` 方法是用来获取或设置表单元素的值的，而 `.attr("value")` 是用来获取`value`属性的值。通常情况下，两者的效果是相同的，但在某些场景下，`.val()` 更加直观和常用。 ##### 2. 获取文本域（`...
本篇文章主要介绍如何在 JSP 页面中通过 JavaScript 来获取表单元素的值，并对其进行验证，确保用户输入的信息符合特定的要求。 #### 1. 基础知识 在正式开始之前，我们需要了解几个基础概念： - **HTML 表单**：...
总结来说，本文通过分享具体的代码示例和操作步骤，讲述了如何利用jQuery和JavaScript来动态获取表单元素的name属性值，并强调了在处理动态表单时该方法的有效性。文章的分享内容对于需要在前端处理表单数据的开发者...
这篇文档简单介绍了在Vue.js中如何获取表单元素的值，并通过Element-ui组件展示输入框，使用axios库发送数据到服务器，以及应用了ES6的一些语法特性来简化代码。对于前端开发者而言，掌握这些知识点对于构建交互式的...
本文将详细介绍如何在JavaScript中获取不同类型的HTML表单元素的值，包括下拉选择框（`<select>`）、单选按钮（`<input type="radio">`）、复选框（`<input type="checkbox">`）以及文本输入框（`...
标题“jmpopups获取input元素值”涉及到的是一个JavaScript库或者功能，可能是一个自定义的弹窗插件，用于从用户界面中获取`input`元素的值。在Web开发中，`input`元素通常用于创建表单，允许用户输入数据。获取这些...
在本文中，我们将深入探讨如何使用JavaScript获取HTML页面中的单选框的值，并对其进行封装以提高代码的可重用性和可维护性。 #### 单选框概述 单选框通过`<input type="radio">`标签创建。每个单选框必须具有相同...
本项目聚焦于使用JavaScript进行注册表单验证，涵盖了多种常见的表单元素，如文本框、单选按钮、复选框、下拉列表以及多行文本域。以下是对这些知识点的详细说明： 1. **文本框** (input type="text")：用于用户...
在此示例中，我们首先通过`serializeJson()`方法获取表单数据，然后使用`$.ajax()`函数发起异步请求。其中： - **`type`**：请求类型，这里使用`POST`； - **`url`**：服务器端处理程序的URL； - **`data`**：发送的...
总结一下，获取表单元素值的方法在JavaScript和Java中各有不同。JavaScript主要用于前端交互，提供实时验证和用户体验优化，而Java则在服务器端处理表单数据，进行业务逻辑处理。理解这两种语言如何协同工作，对于...
在使用谷歌浏览器（Chrome）处理网页交互时，有时会遇到一个问题：通过JavaScript的`innerHTML`属性无法正确获取动态添加到页面中的表单元素的值。这个问题与不同浏览器之间的兼容性有关，尤其是与Internet Explorer...
实验名称为“JavaScript函数式编程”的实验中，主要聚焦于JavaScript在处理表单及表单元素方面的操作。实验目标是让学生熟悉JavaScript的基本语法，包括数据类型、运算符、表达式等，以及掌握JavaScript的内置对象、...