Javascript : How to check multiple empty values

Question

I have four input elements in my form. I don't have submit button in my form. I want to check all the values and if all the values are not empty then I want to post that all values to php page by using ajax.

This is my form input elements.

<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>

This is my script.

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();
}
}

Just am getting all the values and assigning to four variables. If the four variables are not null then I want to assign all that in single object. But the problem is every time it is coming inside the condition and showing alert.

At fourth time also it is showing the alert. But the values are not going to php page. I'am a beginner Please guide me if I approached in a wrong way.

@www139 I will move to jquery once i got some idea in javascript. — user3764346, Nov 30 '14 at 13:50
@www139 Because it's slower, it's not 'far less code', and you don't learn to drive before you learn to walk. — Madara's Ghost, Nov 30 '14 at 13:52
You can't send JSON as parameters like that. Please see [this article](http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) — PeterVC, Nov 30 '14 at 14:03
This line `if(mname!==null&&pname!==null&&tname!==null&&cdate!==null)` will also give you trouble. Empty fields will be empty strings, not NULL. — PeterVC, Nov 30 '14 at 14:11

Nader.Talebi · Answer 1 · 2014-11-30T14:34:31.233

1.Change Html Code to new code

    <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.Change Script Code to new script code (for checking multipe value)

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.Enjoy Now!

Javascript : How to check multiple empty values

1 Answers1