php或JS 表单监听 自动提交
有这么一个需求:1.一个HTML页面的表单有6个输入框2.当6个输入框都输入信息之后,而且信息判定正确,表单自动提交返回OK这怎么效果怎么实现?...
有这么一个需求:
1.一个HTML 页面的表单有6个输入框
2.当6个输入框都输入信息之后,而且信息判定正确,表单自动提交返回OK
这怎么效果怎么实现? 展开
1.一个HTML 页面的表单有6个输入框
2.当6个输入框都输入信息之后,而且信息判定正确,表单自动提交返回OK
这怎么效果怎么实现? 展开
3个回答
展开全部
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我有个笨办法，就是当光标每次离开输入框的时候都判断每个输入框是否有值，如果都有，就提交。
function check(){
var from = document.getElementById("from");
var a1 = document.getElementById('a1').value;
var a2 = document.getElementById('a2').value;
var a3 = document.getElementById('a3').value;
var a4 = document.getElementById('a4').value;
var a5 = document.getElementById('a5').value;
var a6 = document.getElementById('a6').value;
if(a1=='' ||a2=='' || a3=='' || a4=='' || a5=='' || a6==''){
return false;
}else{
from.submit();
}
}
<form id="from" name="from" action="" method="post">
<input id="a1" type="text" onBlur="check();">
<input id="a2" type="text" onBlur="check();">
<input id="a3" type="text" onBlur="check();">
<input id="a4" type="text" onBlur="check();">
<input id="a5" type="text" onBlur="check();">
<input id="a6" type="text" onBlur="check();">
</from>
function check(){
var from = document.getElementById("from");
var a1 = document.getElementById('a1').value;
var a2 = document.getElementById('a2').value;
var a3 = document.getElementById('a3').value;
var a4 = document.getElementById('a4').value;
var a5 = document.getElementById('a5').value;
var a6 = document.getElementById('a6').value;
if(a1=='' ||a2=='' || a3=='' || a4=='' || a5=='' || a6==''){
return false;
}else{
from.submit();
}
}
<form id="from" name="from" action="" method="post">
<input id="a1" type="text" onBlur="check();">
<input id="a2" type="text" onBlur="check();">
<input id="a3" type="text" onBlur="check();">
<input id="a4" type="text" onBlur="check();">
<input id="a5" type="text" onBlur="check();">
<input id="a6" type="text" onBlur="check();">
</from>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
