獲取輸入和選擇值在JavaScript函數的HTML代碼如下

Question

我有下面的HTML代碼：

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

現在，我希望得到上述所有輸入，選擇參數的JavaScript函數。我試過document.getElementById("internship").value和document.getElementById("internship[]").value但我無法獲得參數。我甚至嘗試使用document.getElementById("internship[source]").value和document.getElementById("internship[source][]").value來獲得單個參數，但仍然運氣不佳。

任何人都可以幫助我解決這個問題嗎？

Answer 1

你的元素得到相同的id和名字，因爲你使用相同的字符串值來定義這個。使用相同的ID爲多個元素是不好的，而你應該使用這個類。然後你可以使用document.getElementsByClassName()得到這些元素，這將返回一個nodeList，你將不得不遍歷它。

我已經通過使用類而不是id從你的代碼中的一些元素的樣本，所以你可以使用它。

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

我改變了

實習[源] []

到

實習[源] [1]和實習[源] [2]和 實習[來源] [3]

它的工作原理。

<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

試試這個，

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

或者你可以把所有的值到數組

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

工作example

希望有幫助，