原生表单操作实例

最新推荐文章于 2024-06-10 14:51:04 发布

卑微不讨喜

最新推荐文章于 2024-06-10 14:51:04 发布

阅读量367

点赞数

本文链接：https://blog.csdn.net/BIGBIGBIGCAT/article/details/104846006

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单实例</title>
</head>

<body>
    <form id="userForm">
        <label>Text：</label>
        <input name="inputVal" type="text" placeholder="请输入" size="10" maxlength="8" value="默认值" />
        <label>Radio：</label>
        <input type="radio" name="radioVal" value="1" />1
        <input type="radio" name="radioVal" value="2" />2
        <label>Select：</label>
        <select name="selectVal">
            <option value="">请选择</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <label>CheckBox：</label>
        <input type="checkbox" name="checkboxVal1" value="1" />1
        <input type="checkbox" name="checkboxVal2" value="2" />2
        <label>Textarea：</label>
        <textarea name="textareaVal" rows="3" cols="15" placeholder="请输入"></textarea>
        <!-- 通用提交按钮 -->
        <input id="submitBtn" type="submit" value="提交">
        <!-- 
            自定义提交按钮  <button type="submit">提交</button> 
             图像按钮 提交的时候多了&x=11&y=4参数？  <input type="image" height="20px" width="20px" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3768446756,2613721707&fm=26&gp=0.jpg">  
        -->
        <!-- 通用重置按钮 -->
        <input type="reset" value="重置">
        <!-- 自定义重置按钮 <button type="reset">重置</button> -->

    </form>
    <script>
        let firstInput = document.forms[0].elements[0]
        //光标聚焦到页面第一个表单的第一个框,或者直接<input type="text" autofocus /> 
        // firstInput.focus();
        //光标聚焦到页面第一个表单的第一个框，并全选中文本
        firstInput.select();

        let form = document.querySelector('#userForm')
        //阻止表单默认提交
        form.onsubmit = (event) => {
            event.preventDefault()
            //禁用提交按钮，防止重复提交
            form.elements['submitBtn'].disabled = true
            //获取表单数据
            let formdata = serialize(form)
            console.log(formdata);
            //提交表单
            // form.submit(); 
        }
        form.onreset = (event) => {
            if (confirm('确认重置？')) {
                form.reset()
            } else {
                event.preventDefault()
            }
        }
        //获取表单字段并返回对象形式
        function serialize(form) {
            var parts = {},field = null,i,len,j,optLen,option,optValue;
            for (i = 0, len = form.elements.length; i < len; i++) {
                field = form.elements[i];
                switch (field.type) {
                    case "select-one":
                    case "select-multiple":
                        if (field.name.length) {
                            for (j = 0, optLen = field.options.length; j < optLen; j++) {
                                option = field.options[j];
                                if (option.selected) {
                                    optValue = "";
                                    if (option.hasAttribute) {
                                        optValue = (option.hasAttribute("value") ?
                                            option.value : option.text);
                                    } else {
                                        optValue = (option.attributes["value"].specified ?
                                            option.value : option.text);
                                    }
                                    parts[field.name]=optValue
                                    console.log(field.name,optValue)
                                }
                            }
                        }
                        break;
                    case undefined: //字段集
                    case "file": //文件输入
                    case "submit": //提交按钮
                    case "reset": //重置按钮
                    case "button": //自定义按钮
                        break;
                    case "radio": //单选按钮
                    case "checkbox": //复选框
                        if (!field.checked) {
                            break;
                        }
                    /* 执行默认操作 */
                    default:
                        //不包含没有名字的表单字段
                        if (field.name.length) {
                            parts[field.name]=field.value;
                        }
                }
            }
            return parts;
        }
    </script>
</body>

</html>

卑微不讨喜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生表单操作实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单实例</...
复制链接

扫一扫