web前端8-CFANZ编程社区

JS提交表单

看下述代码即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id = 'myform1' name="myform" action="" method="post"></form>
<form id = 'myform2' name="myform2" action="" method="post"></form>
<script type="text/javascript">
/*
* 获取表单
* 1.docement.表单名称
* 2.document.getElementById(表单 id)；
* 3.document.forms[表单名称]
* 4.document.forms[索引]//从零开使
*/
console.log(document.getElementById('myform1'));
console.log(document.myform2);
console.log('--------');
console.log(document.forms);
console.log(document.forms[0]);
console.log(document.forms['myform2']);
</script>
</body>
</html>

获取表单元素

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
      获取表单元素
      1.获取input元素
         1.docement.getElementById("ID属性值");
         2.表单对象.表单元素的name属性值；
         3.docement.getElementByName("name属性值");
         4.docement.getElementByTagName("标签名/元素名");
-->

<form action="" method="get" id="myform" name="myform">
    编号：<input type = "hidden" name="userId" value="1" /> <br>
    姓名 <input type = "text" value="zhangsan" name="userName" id="userName" /><br>
    密码: <input type = "password" name="userPwd" maxlength="6" id="upwd"/><br>
    性别：男 <input type = "radio" name="userSex" value="man" checked="checked"/>
    女 <input type = "radio" name="userSex" value="woman"/><br>
    爱好: 唱歌<input type = "checkbox" name="userHobby" value="sing"/>
    跳舞<input type = "checkbox" name="userHobby" value="dance" checked/>
    说唱<input type = "checkbox" name="userHobby" value="rap" disabled="disabled"/><br>
    生日： <input type = "date" name="userDate" /><br>
    头像: <input type = "file" name="userHead" /><br>
    简介：<textarea name="remark" rows="10" placeholder="请写你的简介"></textarea><br>
    <!--隐藏域-->
    <input type="hidden" id="uno" name="uno" value="隐藏域">
    <button type="button" onclick="getTxt();">获取元素内容</button>
</form>
<script type="text/javascript">
function getTxt(){
    var uname = document.getElementById("userName").value;
    console.log(uname);

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

    var uno = document.getElementsByName("uno")[0].value;
    console.log(uno);

    var remark = document.getElementsByTagName("textarea")[0].value
    console.log(remark);
}
</script>
</body>
</html>

运行结果如下：

获取下拉框内容

代码如下

结果：

提交表单

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
</head>
<body>
<!--
      提交表单
      1. 使用普通按钮button
           1.给按钮绑定click点击事件，绑定函数
           2.在函数中，进行校验（非空校验，合法校验等）
           3.如果校验通过，则手动提交表单，表单对象.submit();
      2.使用提交按钮 type="submit"
           1.给按钮绑定click点击事件，绑定函数
           2.函数需要有返回值需要返回true或者false。false则表单不会提交
           3.检验（非空校验，合法校验等）
           4.如果校验通过返回true，
-->
<form id="myform" name="myform" action="https://www.baidu.com" method="get">
    姓名：<input name="uname" id="uname">&nbsp;
    <span id="msg" style="font-size: 12px;color: #ff347f"></span><br>
    <button type="button" onclick="submitForm1()">提交</button>
</form>
<hr>
<form id="myform2" name="myform2" action="https://www.baidu.com" method="get">
    姓名：<input name="uname2" id="uname2">&nbsp;
    <span id="msg2" style="font-size: 12px;color: #ff347f"></span><br>
    <button type="submit" onclick="return submitForm2()">提交</button>
</form>

<script type="text/javascript">
    function submitForm1(){
        var uname = document.getElementById("uname").value;
        if (isEmpty(uname)){
            document.getElementById("msg").innerHTML="姓名不能为空！";
            //阻止表单提交
            return;
        }
        //手动提交表单
        document.getElementById("myform").submit();
    }

    function submitForm2(){
        var uname2 = document.getElementById("uname2").value;
        if (isEmpty(uname2)){
            document.getElementById("msg2").innerHTML="姓名不能为空！";
            //阻止表单提交
            return false;
        }
        return true;

    }

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

</body>
</html>

结果：