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.

Your date input has date class name but you are looking for thedate. Also, getElementsByClassName return an array of matched elements so you have to iterate through instead of trying to get .value — Vladyslav
– Vladyslav, Commented Mar 21, 2018 at 9:45
i also have thedate ID, i wrote my both code targeting id and class. — Zain
– Zain, Commented Mar 21, 2018 at 9:47

Smit Raval · Accepted Answer · 2018-03-21 11:18:02Z

2

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

edited Mar 21, 2018 at 11:18

answered Mar 21, 2018 at 9:49

Smit Raval

3,5161 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zain Over a year ago

i tried to use like this, but not working. $(document).ready(function(){ $("#stepname").click(function(){ var firstname = []; $(".firstname").each(function(){ firstname.push($(this).val()); }); }); });

Smit Raval Over a year ago

Forgot you are adding div dynamically, please see updated answer. Give $("#name-field .firstname").each

swapmeet_Lou Over a year ago

@SmitRaval So glad I found this. This is really the best way to achieve simply getting just the input values. I was doing something similar, but I was doing $('.className').each(function(i, val){ array.push(val);} The values were in there, but there was a ton of random dom gibberish I didn't need. This simply allowed me to capture only the input vals. Thanks.

nitsram · Accepted Answer · 2018-03-21 10:35:13Z

0

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

answered Mar 21, 2018 at 10:35

nitsram

7165 silver badges5 bronze badges

Comments

Rupesh Jain · Accepted Answer · 2018-03-21 11:40:27Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

Update

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related