Lesen Sie Werte aus mehreren Textfeldern und senden Sie sie als eine einzige Zeichenfolge mit JavaScript

Question

Ich versuche, den Wert aus mehreren Textfeldern zu lesen und dann diese Werte in einer einzigen Zeichenfolge an meine PHP-Seite zu senden, wo es der Datenbank hinzugefügt wird Tabelle.

Auch die oben genannten Textfelder werden mithilfe von JQuery dynamisch erstellt. Das Feld wird vom Benutzer verborgen, der als Ablage für die ID des ausgewählten Fehlers dient.

Ich weiß, wie man dies in PHP erledigt, aber ich benutze javaScript in der Mitte, um die Daten aus dem Formular an die PHP übergeben.

Ich habe fast den ganzen Code gepostet, der direkt mit dem dynamischen Bereich zum Hinzufügen/Entfernen dieser Funktionen verbunden ist, aber sie nur für den Fall hinzugefügt.

Mein Problem ist, ich kann nicht den Wert der versteckten Textfelder mit dem Namen "errorId" erhalten und sie in einer einzigen Zeichenfolge an die PHP-Seite senden.

Ich möchte so etwas wie dieses IE tun: &errorId=19, 1, 15, 34 .... etc

Ich habe viele Vorschläge versuchen, von SO aber alle von ihnen gab mir die Variable als undefined. Wie Sie sehen können, ist mein letzter Versuch immer noch in meinem Code document.getElementsByName("errorId")[0].value;. Ich versuche, diesen Teil in JavaScript zu tun, hoffe jemand kann mir beibringen, wie man das macht.

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> 

Senden Funktion:

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

Funktion Ich verwende den Tropfen zu füllen unten:

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

Dynamische Schaltfläche Erstellung und Aktivierung/Deaktivierung von Funktionen 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

Wenn ich verstehe:

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

Answer 2

bearbeiten: Sie die Frage mit jQuery markiert, aber es scheint, dass Sie schlicht Javascript verwenden. Falls Sie jQuery nicht verwenden, lesen Sie die Antwort von @ pagetronic.

Mit diesem jQuery-Selektor Sie alle Elemente Ihrer errorId Code enthält bekommen kann (nach Klasse auswählen):

$('.errorId') 

und dann können Sie Schleife auf sie, um das Element Wert auf variable Anhängen, die Sie in verwenden können die POST, so etwas wie dieses:

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

Answer 3

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 der oberen Zeile, die Sie einnehmen, nur der erste errorId Wert.

, wenn Sie alle Werte erhalten möchten, verwenden

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" />