在JS中通过提交按钮获取输入框的值

千册

已于 2023-05-31 12:36:55 修改

阅读量415

点赞数 1

分类专栏： web 文章标签： javascript html css

于 2023-05-31 12:29:58 首次发布

本文链接： https://blog.csdn.net/yueni_zhao/article/details/130966426

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

测试一：获取输入内容

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function mylogin(){
            //alert("Please enter")
            var input_node = document.getElementById("user_name")
            var show_node = document.getElementById("show")
            console.log(input_node.value)
            show_node.innerHTML += input_node.value
            show_node.innerHTML += "<br>"
        }
    </script>
    <div id="show" style="width: 100px; height:100px;background-color: aqua;">

    </div>
    <form>
        用户名:<input type="text" id="user_name" value="lkmao"/><br />
        <input type="button" value="提交" onclick="mylogin()"/><br />
    </form>

    <button onclick="mylogin()">按钮1</button>
</body>
</html>

测试结果：这里两个按钮可以达到相同的效果。

测试二：将输入的用户名显示到页面欢迎部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var last_user="";
        function mylogin(){
            //alert("Please enter")
            var input_node = document.getElementById("user_name")
            var show_node = document.getElementById("show")
            console.log(input_node.value)
            if(input_node.value.length == 0){
                alert("Please enter user name")
                return
            }
            show_node.innerHTML += input_node.value
            show_node.innerHTML += "<br>"

            var welcome_msg = document.getElementById("welcome_msg").innerText
            console.log(welcome_msg)
            if(last_user.length == 0){
                var new_welcome_msg = welcome_msg.replace(/xxx/g,input_node.value)
                document.getElementById("welcome_msg").innerHTML = new_welcome_msg;
                last_user = input_node.value
            }else{
                var new_welcome_msg = welcome_msg.replace(last_user,input_node.value)
                document.getElementById("welcome_msg").innerHTML = new_welcome_msg;
                last_user = input_node.value
            }
            
        }
    </script>
    <div id="show" style="width: 100px; height:100px;background-color: aqua;">

    </div>

    <div id = "welcome_msg">
        用户 xxx 登录了
    </div>
    <form>
        用户名:<input type="text" id="user_name" value="lkmao"/><br />
        <input type="button" value="提交" onclick="mylogin()"/><br />
    </form>

    <button onclick="mylogin()">按钮1</button>
</body>
</html>