Get Eingang und wählen Sie Wert in JavaScript-Funktion für den folgenden HTML-Code

Question

ich den folgenden HTML-Code habe:

<div class="elgg-sidebar"> 
    <h3><b>Source: </b></h3> 
    <input type="checkbox" id="internship[source][]" name="internship[source][]" value="S1" checked="">&nbsp;S1 
    <input type="checkbox" id="internship[source][]" name="internship[source][]" value="S2" checked="">&nbsp;S2 
    <input type="checkbox" id="internship[source][]" name="internship[source][]" value="S3" checked="">&nbsp;S3 

    <h3><b>Internship Type: </b></h3> 
    <input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT1" checked="">&nbsp;WT1 
    <input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT2" checked="">&nbsp;WT2 
    <input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT3" checked="">&nbsp;WT3 

    <h3><b>Location: </b></h3> 
    <select style="width:200px;padding: 5px;font-size: 1.1em;color: #666;border: 1px solid #ccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;" name="int_location" id="internship[int_location]"> 
     <option value="%">Any</option> 
     <option value="Work from Home">Work from Home</option> 
     <option value="Loc1">Loc1</option> 
     <option value="Loc2">Loc2</option> 
    </select> 

    <h3><b>Dates: </b></h3> 
    Start Date: 
    <input value="" type="text" name="int_start" id="internship[int_start]" class="elgg-input-date popup_calendar" data-datepicker-opts=""> 
    End Date: 
    <input value="" type="text" name="int_end" id="internship[int_end]" class="elgg-input-date popup_calendar" data-datepicker-opts=""> 

    <h3><b>Keywords: </b></h3> 
    <input value="" type="text" name="keyword" id="internship[keyword]" class="elgg-input-text"> 

    <input type="button" onclick="onClick_Search()" class="elgg-button elgg-button-submit" value="Search">&nbsp;&nbsp; 
    <input type="button" onclick="onClick_Reset()" class="elgg-button elgg-button-delete float-alt" value="Reset"> 
</div> 

Nun, ich möchte das vor allem Eingang erhalten, wählen Sie Parameter in einer JavaScript-Funktion.

Ich versuchte document.getElementById("internship").value und document.getElementById("internship[]").value, aber ich bin nicht in der Lage, die Parameter zu erhalten. Ich habe sogar versucht, einzelne Parameter mit document.getElementById("internship[source]").value und document.getElementById("internship[source][]").value zu bekommen, aber immer noch Pech gehabt.

Kann mir jemand helfen, wie ich damit fortfahren soll?

Answer 1

Ihre Elemente erhalten die gleichen IDs und Namen, da Sie denselben Zeichenfolgenwert verwenden, um dies zu definieren. Die Verwendung derselben ID für mehrere Elemente ist nicht gut, stattdessen sollten Sie die Klasse dafür verwenden. Dann können Sie diese Elemente mit document.getElementsByClassName() erhalten, die eine nodeList zurückgeben, und Sie müssen darüber iterieren.

Ich habe ein Beispiel für einige Elemente aus Ihrem Code gemacht, indem Sie eine Klasse anstelle einer ID verwenden, damit Sie sie verwenden können.

var inputs = document.getElementsByClassName('internship[source][]'); 
 
for(var i=0; i<inputs.length; i++) 
 
    console.log(inputs[i].value);

<input type="checkbox" class="internship[source][]" name="internship[source][]" value="S1" checked="">&nbsp;S1 
 
<input type="checkbox" class="internship[source][]" name="internship[source][]" value="S2" checked="">&nbsp;S2 
 
<input type="checkbox" class="internship[source][]" name="internship[source][]" value="S3" checked="">&nbsp;S3

Answer 2

änderte ich die

Praktikum [Quelle] []

zu

Praktikum [Quelle] [1] und Praktikum [Quelle] [2] und Praktikum [Quelle] [3]

Es funktioniert.

<div class="elgg-sidebar"> 
    <h3><b>Source: </b></h3> 
    <input type="checkbox" id="internship[source][1]" name="internship[source][]" value="S1" checked="">&nbsp;S1 
    <input type="checkbox" id="internship[source][2]" name="internship[source][]" value="S2" checked="">&nbsp;S2 
    <input type="checkbox" id="internship[source][3]" name="internship[source][]" value="S3" checked="">&nbsp;S3 

    <h3><b>Internship Type: </b></h3> 
    <input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT1" checked="">&nbsp;WT1 
    <input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT2" checked="">&nbsp;WT2 
    <input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT3" checked="">&nbsp;WT3 

    <h3><b>Location: </b></h3> 
    <select style="width:200px;padding: 5px;font-size: 1.1em;color: #666;border: 1px solid #ccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;" name="int_location" 
    id="internship[int_location]"> 
    <option value="%">Any</option> 
    <option value="Work from Home">Work from Home</option> 
    <option value="Loc1">Loc1</option> 
    <option value="Loc2">Loc2</option> 
    </select> 

    <h3><b>Dates: </b></h3> Start Date: 
    <input value="" type="text" name="int_start" id="internship[int_start]" class="elgg-input-date popup_calendar" data-datepicker-opts=""> End Date: 
    <input value="" type="text" name="int_end" id="internship[int_end]" class="elgg-input-date popup_calendar" data-datepicker-opts=""> 

    <h3><b>Keywords: </b></h3> 
    <input value="" type="text" name="keyword" id="internship[keyword]" class="elgg-input-text"> 

    <input type="button" onclick="onClick_Search()" class="elgg-button elgg-button-submit" value="Search">&nbsp;&nbsp; 
    <input type="button" onclick="onClick_Reset()" class="elgg-button elgg-button-delete float-alt" value="Reset"> 
</div> 

alert(document.getElementById("internship[source][1]").value); 

JSFiddle: https://jsfiddle.net/xvae47tw/

Answer 3

Try this,

$(document).ready(function(){ 
var elements = $('*[id^="internship"]'); // get all inputs starts with internship 
    $.each(elements, function(index, element) { // loop over it 
    console.log(index + ": " + element.value); // element.value gives the values one by one 
    }); 
}); 

Oder Sie können alle Werte in ein Array schieben

$(document).ready(function(){ 
var elements = $('*[id^="internship"]').map(function() { 
    return $(this).attr("value"); 
    }).get().join(); 
    alert(elements); 
}); 

Arbeits example

Hope hilft,