如何获取表单输入的数据并显示到页面_定义一个表单页面和一个表单数据获取页面，在表单数据获取页面显示用户所输入的表单数据。提交两个页面的源-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37858942/article/details/97811950

本文介绍了一种使用jQuery简化HTML表单数据处理的方法，包括读取表单字段值、处理单选按钮选择及更新页面元素。通过示例代码展示了如何在用户点击按钮时收集表单信息，并实时显示在网页上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入jquery -->
    <script type="text/javascript" src="./js/jquery.js"></script>
    <!-- <script type="text/javascript">
      function showMsg(){
          //根据id取得对应的值
          var a=document.getElementById("username").value;
          var b=document.getElementById("password").value;
          var c=document.getElementsByName("sex");
          //getElementsByName与getElementById的不同：
           //首先名字就不同 一个绑定的是ID 一个绑定的是Name
           //js中规定了id不能重复 但是name可以有多个
           //所以name的绑定器中多了个s 为getElementsByName
           //而多的这个s 使得返回的是一个数组
           //所以要对这个数组的值进行处理
          var sexValue;
          for(var i=0;i<c.length;i++){
              if(c[i].checked == true){//这个checked指的是是否被选中
                  sexValue=c[i].value;
                  break;
              }
          }
          document.getElementById("getusername").innerHTML=a;//innerHTML可以改变dom值 在遇到输入不正确时显示提示语非常有用
          document.getElementById("getpassword").innerHTML=b;
          document.getElementById("getsex").innerHTML=sexValue
      }
    </script> -->
</head>
<body>
    username:<input type="text" id="username"><br>
    password:<input type="password" id="password"><br>
    sex:<input type="radio" value="男" name="sex">男<input type="radio" value="女" name="sex">女<br>
    <input type="button" value="提交" id="btn">
    <table border="1">
        <tr>
            <td id="getusername"></td>
            <td id=getpassword></td>
        </tr>
        <tr>
            <td id="getsex" colspan="2"></td>
        </tr>
    </table>
</body>
<script>
   $(document).ready(function(){
        $("#btn").click(function(){
            var a =$("#username").val();
            var b=$("#password").val();
            // $("#getpassowrd").val('');
            // $("#getusername").empty();
            if(b==''){
                $("#getpassword").append(b);
            }
            else{
                $("#getpassword").empty()
                $("#getpassword").append(b);
            }
            if(a==''){
                $("#getusername").append(a);
            }
            else{
                $("#getusername").empty()
                $("#getusername").append(a);
            }
            var sexValue=$(":radio:checked").val();
            if(sexValue==''){
                $("#getsex").append(sexValue)
            }
            else{
                $("#getsex").empty();
                $("#getsex").append(sexValue)
            }
           
        })
    })
</script>
</html>

注释部分为js 在使用时需要添加如下内容：

 <input type="button" value="提交" id="btn" onclick="showMsg()">