php或JS 表单监听 自动提交

JavaScript026

php或JS 表单监听 自动提交,第1张

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<input class="input" name="input1" value="">

<input class="input" name="input2" value="">

<input class="input" name="input3" value="">

<input class="input" name="input4" value="">

<input class="input" name="input5" value="">

<input class="input" name="input6" value="">

</body>

<script>

    (function(){

        var inputs = document.getElementsByClassName('input'),

                i = 0,

                n

        //给每个input绑定一个change事件,每个change事件再绑定一个submit方法

        while (n = inputs[i]){

            n.addEventListener('change', submit, false)

            i++

        }

        //检查是否已经都输入了结构,都返回了后执行Ajax异步提交表单到'

        function submit(){

            var checkVal = checkValue()

            if(!checkVal) return false

            var xhr = new XMLHttpRequest(),

                    formData = new FormData()    //H5form表单API

            for(var i = 0 i < checkVal.length i++){

                formData.append('input' + i, checkVal[i])

            }

            xhr.onload = function(){

                //相应结果

                var response = xhr.responseText

            }

            xhr.open('POST', 'http://localhost')

            xhr.send(formData)

        }

        //判断搜索输入框是否都输入了值,没有就返回false,有就返回结果数组

        function checkValue(){

            var valArr = []

            for(var i = 0 i < inputs.length i++){

                var val = inputs[i].value

                if(typeof val === 'string' && val != ''){

                    valArr.push(val)

                }else{

                    return false

                }

            }

            return valArr

        }

    }())

</script>

</html>

目前只能通过js的方法进行对Html的表单进行监听。

像js有很多事件,当表单执行了什么操作的时候就可以触发执行了。

希望我的回答对楼主有帮助,不懂可以继续追问。