如何通过Ajax发送具有相同类名或ID的多个输入值

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>