表单提交事件

最新推荐文章于 2024-03-27 12:34:06 发布

原创最新推荐文章于 2024-03-27 12:34:06 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #c#

JS 专栏收录该内容

91 篇文章

订阅专栏

本文探讨了在JavaScript和C#中如何处理表单提交事件。讲解了前端JavaScript如何监听并阻止默认提交行为，以及后端C#接收并处理表单数据的方法。通过实例展示了交互过程，为开发者提供参考。

</head>

<body>
    <form class="form1" action="http://www.baidu.com">
        <div class="item">
            <label for="">用户名:</label>
            <input type="text" name="username">
        </div>
        <div class="item">
            <label for="">密&nbsp;&nbsp;&nbsp;码:</label>
            <input type="text" name="password">
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
    </form>

    <script>
        var formEle = document.querySelector('.form1')
        var userNameInput = document.querySelector('input[name="username"]')
        var passwordInput = document.querySelector('input[name="password"]')

        //给表单form绑定表单提交事件
        formEle.onsubmit = function (e) {
            e = e || window.event //事件对象
            e.preventDefault()  //阻止表单默认action动作

            var username = userNameInput.value
            var password = passwordInput.value

            if (username == '' || password == '') {
                alert('用户名或密码不能为空')
                
            }else{
                //跳转提交页面
                location.href = `https://www.baidu.com/?username=${username}&password=${password}`
            }

        }


    </script>