Obtain All Values from Input Fields Having Same Class and Send to a Script via an AJAX Call

Question

I have a form with the following input fields:

<input type="text" class="date" name="date[]" onkeyup="showHint()" />
<input type="text" class="date" name="date[]" onkeyup="showHint()" />
<input type="text" class="date" name="date[]" onkeyup="showHint()" />

Then I have the following JS function:

function showHint()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
  //GET JSON from Validation.php and extract the nodes
  var response = xmlhttp.responseText;
  var parseJson = JSON.parse(response);
  var resultCode = parseJson.code;
  var resultMessage = parseJson.message;

    var DoB = [];

           $(".date").each(function(){
               DoB.push($(this).val());
            });

    var newDob = DoB.slice(0,-1);

    }
  }
xmlhttp.open("GET","/validation.php?q="+newDob,true);
xmlhttp.send();
} 

But I'm getting the following error:

myfile.js:352 Uncaught ReferenceError: newDob is not defined
    at showHint (myfile.js:352)
    at HTMLInputElement.onkeyup (VM3224 :618)
showHint    @   myfile.js:352
onkeyup @   VM3224 :618

What I'm trying to do is to obtain all the fields of class 'date' and send them - delimited to an external script.

Answer 1

try to use jQuery built in serializer

 console.log($('form').serialize()) // in your submit function 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="text" class="date" name="date[]" onkeyup="showHint()" /> <input type="text" class="date" name="date[]" onkeyup="showHint()" /> <input type="text" class="date" name="date[]" onkeyup="showHint()" /> </form> 

regarding you method you have scoping issue check the following code

function showHint()
{

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//GET JSON from Validation.php and extract the nodes
var response = xmlhttp.responseText;
var parseJson = JSON.parse(response);
var resultCode = parseJson.code;
var resultMessage = parseJson.message;



 }
}
var DoB = [];

       $(".date").each(function(){
           DoB.push($(this).val());
        });

 var newDob = DoB.slice(0,-1);
 xmlhttp.open("GET","/validation.php?q="+newDob,true);
 xmlhttp.send();
} 

you can't define a variable inside onreadystatechange event because it will not be available in the moment you call open method