Read values from multiple textboxes and send them as a single string using JavaScript

Question

I'm trying to read the value from multiple textboxes and then send those values in a single string to my PHP processing page where it will be added to the database table.

Also the above mentioned textboxes are made using JQuery dynamically the filed is hidden from the user it serves as storage compartment for the ID of the selected error using the drop down.

I know how to get this done in PHP but I'm using javaScript in middle to hand over the data from the form to the PHP.

I've posted almost all the code which is directly connected with the dynamic add/remove area those functions are working but added them just in case.

My issue is I can't get the value of the hidden text boxes named "errorId" and put them in a single string to send to the PHP page.

I want to do something like this IE: &errorId=19, 1, 15, 34 .... etc

I did try lot of suggestions from SO but all of them gave me the variable as undefined. As you can see my last attempt is still in my code document.getElementsByName("errorId")[0].value;. I'm trying to do this part in JavaScript hope some one can teach me how to get this done.

HTML:

<div id="jType-container">
  <div id="error-Add-Container">
    <div id="error-Column-Headings">
      Error Number<span>Error Name</span>
    </div>
    <div class="error-Column">
      <div class="error-container">
        <input class="errorCount" size="1" value="1" style="margin-left: 2%" />
        <select id="errorName" class="errorName">
                                     <option disabled></option>
                                 </select>
        <input class="errorId" size="1" name="errorId" readonly hidden>
        <input type="button" class="addRow" value="Add" disabled />
        <input type="button" class="delRow" value="Delete" />
      </div>
    </div>
  </div>
</div>

Submit Function:

function timeSheetAdd() {
  var jType = document.querySelector("input[name=jType]:checked").value,
    errorId = document.getElementsByName("errorId")[0].value;

  if (window.XMLHttpRequest) {

    xmlhttp = new XMLHttpRequest();

  } else {

    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function() {

    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

      document.getElementById("msgID").innerHTML = xmlhttp.responseText;

    }
  };
  xmlhttp.open("POST", "../Functions/TimeSheetSubmit.php?jType=" + jType + "&errorId=" + errorId, true);
  xmlhttp.send();
}

Function I use to populate the drop down:

//The function to drag the error data from the table qcErrors and populate the drop downs
function getError() {
  //Get the selected ID using this.is in client side HTML then breaks it up using this to get the ID only
  var errorSelect = document.getElementById("errorName");

  if (window.XMLHttpRequest) {

    xmlhttp = new XMLHttpRequest();

  } else {

    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

      if (errorSelect.selectedIndex === 0) {
        errorSelect.innerHTML = xmlhttp.responseText;
      }
    }
  };
  xmlhttp.open("POST", "../functions/getQcErrors.php?error=geterror", true);
  xmlhttp.send();
}

Dynamic button creation and enable / disable functions in jQuery:

  //Disable the Start button after single click
  function startBtnDisable() {
    document.getElementById("getStartTime").disabled = 'true';
  }

//Disable the End button after single click
function endBtnDisable() {
  document.getElementById("getEndTime").disabled = 'true';
}

//Enable job type radio buttons
function enableJtype() {
  var client = document.getElementById("clientSelect").value,
    strTimeBtn = document.getElementById("getStartTime"),
    jType = document.getElementsByClassName("jType");

  if (client !== "") {
    if (client === "Break") {
      for (var j = 0; j < jType.length; j++) {
        jType[j].disabled = true;
      }
      strTimeBtn.disabled = false
    } else {
      //For loop to enable radio buttons
      for (var i = 0; i < jType.length; i++) {
        jType[i].disabled = false;
      }
    }
  } else {
    for (var j = 0; j < jType.length; j++) {
      jType[j].disabled = true;
    }
  }
}

// Show or hide the div which contains the error inputs
// If the QC job type is selected.
$(document).ready(function() {
  $('.jType').click(function() {
    if ($('#qc').is(':checked')) {
      $('#jType-container').show(); //Show the content of the error container div
      getError(); //Populates the error name drop down
    } else {
      $('#jType-container').hide();
    }
    $('#getStartTime').prop('disabled', false); //Enables the get start time button
  });

  $('#getStartTime').mousedown(function() {
    $('#getEndTime').prop('disabled', false); //Enables the get end time button
    $('.addRow').prop('disabled', false);
  });

  $(document).on('change', '.errorName', function() {
    var sid = $(this).find('option:selected').attr('id');
    $('.errorId').filter(':last').val(sid);
  })
});

// Add and remove function for the error text boxes

$(document).ready(function() {
  $(document).on('click', '.addRow', function() {

    var selectedIndex = $('.errorId').filter(':last').val();
    if (selectedIndex !== "") {
      //$('.error-Column .error-container:first').clone().appendTo('.error-Column');//Clones the row

      // --- Disabled due to is clones and resets the value of the drop down box
      var $clone = $('.error-Column .error-container:first').clone().appendTo('.error-Column');

      $clone.find('.errorId').val(''); //Find the errorId text box and makes value = ""
      $clone.find('select.errorName').focus(); //When cloned set the focus to the error selector

      $('.addRow').prop('disabled', true).filter(':last').prop('disabled', false); //Add a row and disables add buttons above
      resetErrorNo(); //Reset the values
      getError(); //Pulls the errors from the DB

    } else {
      alert("Select an error name");
    }
  }).on('click', '.delRow', function() {
    var $btn = $(this);
    if (confirm('Your sure you want to remove this?')) {
      $btn.closest('.error-container').remove(); //Removes the row
      $('.addRow').prop('disabled', true).filter(':last').prop('disabled', false); //Enables the last add button
      resetErrorNo(); //Reset the values
    }
  });
});

//Reset the entire error count number index
function resetErrorNo() {
  $(".errorCount").each(function(index, _this) {
    $(this).val(index + 1);
  });
}

Answer 1

My issue is I can't get the value of the hidden text boxes named "errorId" and put them in a single string to send to the PHP page

errorId = document.getElementsByName("errorId")[0].value;

In the above line, you are taking only the first errorId's value.

if you want to get all the values, use

var value = [];
var e = document.getElementsByName("errorId");
for (a of e)
  value.push(a.value);
value = value.toString();
console.log(value);

<input name="errorId" value="1" />
<input name="errorId" value="2" />
<input name="errorId" value="10" />
<input name="errorId" value="12" />

Answer 2

Edit: you tagged the question with jQuery, but it seems you are using plain javascript. In case you don't use jQuery, refer to @pagetronic's answer.

With this jQuery selector you can get all the elements containing your errorId code (selecting by class):

$('.errorId') 

and then you can loop on them, appending the element value to variable that you can use in the POST, something like this:

var toPost = '';
$('.errorId').each(function() {
    toPost = toPost + ' ' + $(this).val();
});

Answer 3

If I understand:

var error_inputs = document.getElementsByName("errorId");
var errorIds = [];
for(var i=0; i<error_inputs.length; i++) {
    errorIds.push(error_inputs[i].value);
}
var errorId = errorIds.join(', ');