Web前端——表单提交和Js添加选项

最新推荐文章于 2024-03-18 22:46:45 发布

转载最新推荐文章于 2024-03-18 22:46:45 发布 · 573 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chaoyang123/p/11549745.html

文章标签：

#前端 #javascript #json #ViewUI

本文介绍表单提交的基本方法，包括使用提交按钮及通过JS手动提交表单的方式，并展示了如何利用JS动态添加表单选项。

表单

表单提交

表单提交之后会将表单的数据以get或post方式，传送到action要打开的页面

方式1：使用提交按钮

复制<form action="" method="get" onsubmit="return check()">
    用户名：<input type="text"><br>
    密码： <input type="password"><br>
    <input type="submit" value="登录"/>
</from>

方式2：使用js手动提交表单，this.form.submit() this可省略

复制<form action="" method="post" onsubmit="return check()">
    用户名：<input type="text"><br>
    密码： <input type="password"><br>
    <button type="button" onclick="this.form.submit">登录</button>
</from>

οnsubmit="true" 为false，表单不可提交（点击提交按钮无效，不会跳转页面）

οnsubmit="return check()";//在名为check的js方法中进行表单元素的验证（必填，用户名是否合法，密码等），返回true或false

表单添加选项

复制<form action="">
    <select name="city">
        <option value="1011">南宁</option>
        <option value ="1012">广州</option>
    </select>
</form>

南宁广州

使用js动态添加选项：

复制<form action="">
            <select id="province">
                <option value="">--请选择--</option>
            </select>
        </form>
        <script type="text/javascript">
        //json数据，可以直接定义使用
            var data = [{
                id: 100,
                name: '广东'
            }, {
                id: 101,
                name: '广西'
            }, {
                id: 102,
                name: '云南'
            }];
            var provinceEle = document.getElementById("province");
            for (let i = 0; i < data.length; i++) {
                //new Option() 参数为选项的内容，参数2为选项的value
                provinceEle.add(new Option(data[i].name, data[i].id));
            }
</script>

转载于:https://www.cnblogs.com/chaoyang123/p/11549745.html