Question

我的表单中有四个输入元素。我的表单中没有提交按钮。我想检查所有值，如果所有值都不为空，那么我想通过使用ajax将所有值发布到php页面。

这是我的表单输入元素。

<form method="post" action="getAllDteails.php" name="dashboard">
            Manager Name<input type="text" id="managername" onchange="getDetails(this.value)" name="managername"/>
            Project Name<input type="text" id="projectname" onchange="getDetails(this.value)" name="projectname"/>
            Task Name<input type="text" id="taskname" onchange="getDetails(this.value)" name="taskname"/>
            Completion Date<input type="date" id="date" onchange="getDetails(this.value)" name="date"/>
            <div id="cool"></div>
</form>

这是我的剧本。

function getDetails()
{
var mname = document.getElementById('managername').value;
var pname = document.getElementById('projectname').value;
var tname = document.getElementById('taskname').value;
var cdate = document.getElementById('date').value;
//alert(mname);
if(mname!==null&&pname!==null&&tname!==null&&cdate!==null)
{
    alert("true");
var jsonobj = {"mname" : mname, "pname" : pname, "tname" : tname, "cdate" : cdate};
var js = JSON.stringify(jsonobj);
alert(js);
var  xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
   alert(js);
         document.getElementById("cool").innerHTML=xmlhttp.responseText;
 }
}
xmlhttp.open("POST","getAllDetails.php?js="+js,true);
xmlhttp.send();
}
}

获取所有值并分配给四个变量。如果四个变量不为null，那么我想在单个对象中分配所有这些变量。但问题是每次它进入状态并显示警报。

第四次也显示警报。但价值观不会转向php页面。我是初学者如果我以错误的方式接近，请指导我。

Answer 1

1.将Html代码更改为新代码

    <form method="post" action="getAllDteails.php" name="dashboard">
       Manager Name<input type="text" id="managername" name="managername" class="v1"/>
        Project Name<input type="text" id="projectname" name="projectname" class="v1"/>
        Task Name<input type="text" id="taskname" name="taskname" class="v1"/>
        Completion Date<input type="date" id="date" name="date" class="v1"/>
        <input id="Button1" type="button" value="button" onclick="return checkData();" />
</form>

2.将脚本代码更改为新的脚本代码（用于检查多重值）

function checkData() {
        var _v = document.getElementsByClassName("v1"); // get all field
        var _empty = false; // default has false;
        var _jsParm = '';
        for (var i = 0; i < _v.length; i++) {
            if (_v[i].value == '') {
                _empty = true; // if value of null or empty; *
                break;
            }
            _jsParm += _v[i].id + ':\'' + _v[i].value + '\',';
        }

        //* if any field is null , show alert 
        if (_empty == true) {
            alert('Error!!!!! \r\n Please enter data in all field.');
            return false;

        }
        alert('OK! all field has data.' + '\r\n' + _jsParm)

        _jsParm = _jsParm.substr(0, _jsParm.length - 1);
        var jsonobj = '{' + _jsParm + '}';
        var js = JSON.stringify(jsonobj);
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                alert(js);
                document.getElementById("cool").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST", "getAllDetails.php?js=" + js, true);
        xmlhttp.send();
    }

3.Save
4.现在享受吧！

Javascript：如何检查多个空值

1 个答案: