JavaScript操作与提交表单-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_63680062/article/details/122898337

本文介绍了JavaScript如何操作HTML表单，包括获取表单及元素、使用不同方式提交表单，以及利用Ajax异步提交。重点讲解了获取input元素、下拉框的选择，并强调了表单提交时的校验与控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS 表单

1. 获取表单

1. document.表单name属性值
2. document.getElementById(表单id)
3. document.forms[表单name属性值]
4. document.forms[索引]	//从0开始
5. document.forms        //取所有表单

例如：

<body>
    <form id="myform" name="myform"></form>
</body>

<script>
    var a = document.myform;
    var b = document.getElementById(myform)
    var c = document.forms["myform"]
    var d = document.forms[0]
    var e = document.forms
</script>

2. 获取表单元素

2.1 获取input元素

1. document.getElementById("id属性值")
2. 表单对象.表单元素的name属性值
3. document.getElementsByName("name属性值")
4. document.getElementsByTagName("标签名/元素名")

<form>
    姓名: <input type="text" id="q" name="uname" value="zhangsan" /><br />
    密码: <input type="password" id="npwd" name="npwd" value="54321" /><br />
    性别: <input type="text" id="usex" name="usex" value="男"/><br />
    说明: <textarea name="intro"></textarea><br />
    <button type="button" onclick="getTxt()">获取表单元素</button>
</form>

<script>
    function getTxt()
    {
        var uname = document.getElementById("q").value;
        console.log(uname);

        var pwd = document.getElementById("npwd").value;
        console.log(pwd);

        var sec = document.getElementsByName("usex")[0].value;
        console.log(sec);
		// getElementsByName() 方法返回的是元素的数组，而不是一个元素
        
        var inr = document.getElementsByTagName("textarea")[0].value;
        console.log(inr);
        // getElementsByTagName() 方法可返回带有指定标签名的对象的集合
    }
</script>

2.2 获取下拉框

<select id="uform" name="uform">
			<option value="">请选择城市</option>
			<option value="Henan">河南</option>
			<option value="Hebei">河北</option>
			<option value="Hubei">湖北</option>
			<option >湖南</option>
</select>

1）获取下拉框对象

var uform = document.getElementById("uform");

2）获取下拉框的下拉选项列表

var optis = uform.options;

3）获取下拉框被选中项的索引

var index = uform.selectedIndex;

4）获取下拉框中被选中项的值

var val1 = uform.value;

//或者是通过选中项的下标获取下拉框被选中项的值

var val2 = uform.options[index].value;

5）获取下拉框中被选中项的文本

var txt = uform.options[index].text;

注意：获取下拉框中项的value属性值时，若没有value属性，取得是option双标签中间的内容，若有value属性，则取value属性的值。

3. 提交表单

3.1 使用普通按钮提交 type=“button”

给按钮绑定click点击事件，绑定函数
在函数中，进行表单校验
若校验通过，则手动提交表单

<form id="ww" name="ww1" action="#" method="get">
			姓名：<input name="uname" id="uname"  /> &nbsp;
			<span id="msg" style="font-size: 12px;color: #FF5500;"></span><br />
			<button type="button" onclick="sunForm()">提交</button>
		</form>
		
		
		<script>
			function sunForm()
			{
				var uname = document.getElementById("uname").value;
				if (isEmpty(uname))
				{
					document.getElementById("msg").innerHTML = "* 姓名不能为空！";
					return;
				}
			}
			
			function isEmpty(str)
			{
				if (str == null || str.trim() =="")
				{
					return true;
				}
				return false;
			}
		</script>

3.2 使用提交按钮 type=“submit”

给按钮绑定click点击事件，绑定函数
函数需要有返回值，返回true或false。return true 表单提交，return false 表单不提交
在函数中，进行表单校验
若校验通过，返回true；不通过返回false

<form id="ee" name="ee1" action="#" method="get">
			姓名：<input name="uname1" id="uname1"  /> &nbsp;
			<span id="msg1" style="font-size: 12px;color: #FF5500;"></span><br />
			<button type="submit" onclick="return sunForm1()">提交</button>
		</form>

<script>
        function sunForm1()
    	{
            var uname = document.getElementById("uname1").value;
            if (isEmpty(uname))
            {
                document.getElementById("msg1").innerHTML = "* 姓名不能为空！";
                return false;
            }
            return true;

        }
    	function isEmpty(str)
    	{
            if (str == null || str.trim() =="")
            {
                return true;
            }
            return false;
        }
</script>

3.3 表单form元素绑定submit事件

给表单form元素绑定submit提交事件，绑定函数
函数需要有返回值，返回true或false。return true 表单提交，return false 表单不提交
在函数中，进行表单校验
若校验通过，返回true；不通过返回false

<form id="ff" name="ff1" action="#" method="get" onsubmit="return sunForm2()">
			姓名：<input name="uname2" id="uname2"  /> &nbsp;
			<span id="msg2" style="font-size: 12px;color: #FF5500;"></span><br />
			<button type="submit" >提交</button>
		</form>

<script>
    	function sunForm2()
    	{
            var uname = document.getElementById("uname2").value;
            if (isEmpty(uname))
            {
                document.getElementById("msg2").innerHTML = "* 姓名不能为空！";
                return false;
            }
            return true;
        }
    
    	function isEmpty(str)
        {
            if (str == null || str.trim() =="")
            {
                return true;
            }
            return false;
        }
</script>

4. Ajax

得到 XMLHttpRequests 对象

var xhr = new XMLHttpRequest();
打开请求

xhr.open(method, uri, async);

method:请求方式，通常是GET|POST

uri: 请求地址

async：是否异步。ture表示异步，false表示同步
发送请求

xhr.send(params);

params:请求时需要传递的参数

如果是GET请求，设置null；

如果是POST请求，无参数设置为null，有参数设置则设置参数

接受响应

xhr.status 响应状态（200=响应成功，404=资源未找到，500=服务器异常）

xhr.responseText 得到响应结果

<script>
			var xhr = new XMLHttpRequest();
			
			xhr.open("get","jx/date.json",true);
			
			xhr.send(null);
			
			if (xhr.status == 200)
			{
				console.log(xhr.responseText);
			}
			else
			{
				console.log(xhr.status);
			}
		</script>