How to send multiple input values with same class name or id via ajax

Question

I'm trying to send multiple input values via AJAX to my PHP script. It's working fine when I use getElementById . However I have the option to add a child. It iterates the input fields, then I get values only from the first child. I tried to use getElementsByClassName but it gives values as undefined . This is my code:

<div id="name-field" class="name-field row">
  <div class="col-xs-12 col-sm-6 childname">
    <div class="field text-left">
      <label class="text-left">Name of child</label>
      <input id="firstname" class="firstname" name="firstname" type="text" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 dateofbirth">
    <div class="field text-left">
      <label class="text-left">Date of birth</label>
      <input type="text" class="date" id="thedate" />
    </div>
  </div>
</div>

<a href="#" id="addChild" name="addchild" class="btn-success">Add Child</a>

<a href="#" id="stepname" class="btn" onclick="btnSubmit('step1')">Next Step</a>

//Iterate child function
jQuery(function($) {
  $("#addChild").click(function() {
    $(".name-field:first").clone().find("input").val("").end()
      .removeAttr("id")
      .appendTo("#additionalselects")
      .append($('<a class="delete" href="#"><i class="fa fa-times"></i></a>'));
  });
  $("body").on('click', ".delete", function() {
    $(this).closest(".name-field").remove();
  });
});

//Sending values function
function btnSubmit(step) {
  //Set Var with Name
  //Set Var with DoB
  if (step == 'step1') {

    //values using ID
    var Name = document.getElementById("firstname").value;
    var DoB = document.getElementById("thedate").value;

    //Values using classname
    var Name = document.getElementsByClassName("firstname").value;
    var DoB = document.getElementsByClassName("date").value;

    //Create a Variable catVar Having the Var Name and Var DoB Concatinated with a --

    var stepVar = Name + "--" + DoB;

    $(".thevoornaam, .date").each(function() {
      alert();
    });
  } else {

  }
  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) {



    }
  }
  xmlhttp.open("GET", "validations/btnSubmit.php?q=" + step + "&q2=" + stepVar, true);
  xmlhttp.send();
}

I hope you guys understand what I'm trying to achieve with this, if I did't explain it correctly.

Thanks in advance.

Answer 1

using jQuery you can do it in this way.

var firstname = [];
$("#name-field .firstname").each(function(){
 firstname.push($(this).val());
});

In firstname you will all the values.

Update

Here is a working pen.

https://codepen.io/smitraval27/pen/dmvwVB

Answer 2

document.getElementsByClassName("firstname")

returns an array... so the following will give you the elements value with index i. To get all the values you will need to do a ForEach.

document.getElementsByClassName("firstname")[0].value

Since you're using JQuery elsewhere, why not use...

$('.firstname')[0].val();

Answer 3

The most ideal way to do this is :

• add a form wrapper to your fields ( id="ajaxForm" )
• to have a name to all your form fields and use the below code to generate the data to be passed to your AJAX call

$("#ajaxForm").serialize()

The return value of $.serialize() can be directly used as the data for the ajax call

 $("#ajaxForm").on("submit", function () { var ajaxData = $("#ajaxForm").serialize(); $("#ajaxData").text(ajaxData); $.ajax({ url:"", type: "get", data : ajaxData, success: function (resp) {} }); console.log(ajaxData); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="ajaxForm" onsubmit="return false" > <input id="firstname" class="firstname" name="firstname" type="text" /> <input type="text" name="date" class="date" id="date" /> <input type="submit" value="submit"> </form> <div id="ajaxData"></div>