首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >获取以下HTML代码的javascript函数中的输入并选择值

获取以下HTML代码的javascript函数中的输入并选择值
EN

Stack Overflow用户
提问于 2017-07-18 11:57:04
回答 3查看 92关注 0票数 0

我有以下HTML代码:

代码语言:javascript
复制
<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").valuedocument.getElementById("internship[]").value,但是我无法获得参数。我甚至尝试使用document.getElementById("internship[source]").valuedocument.getElementById("internship[source][]").value获取单个参数,但仍然运气不佳。

有人能帮我处理这件事吗?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-07-18 12:09:13

您的元素获得相同的id和名称,因为您使用相同的字符串值来定义这个值。对多个元素使用相同的id是不好的,而应该使用类。然后,您可以使用document.getElementsByClassName()获得这些元素,这将返回一个nodeList,您将不得不对它进行迭代。

我已经通过使用类而不是id从代码中提取了一些元素的示例,这样您就可以使用它了。

代码语言:javascript
复制
var inputs = document.getElementsByClassName('internship[source][]');
for(var i=0; i<inputs.length; i++)
   console.log(inputs[i].value);
代码语言:javascript
复制
 <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

票数 1
EN

Stack Overflow用户

发布于 2017-07-18 12:11:06

我换了

实习来源

实习来源1]和实习来源和实习来源

它起作用了。

代码语言:javascript
复制
<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/

票数 0
EN

Stack Overflow用户

发布于 2017-07-18 12:12:32

尝尝这个,

代码语言:javascript
复制
$(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
    });
});

或者,您可以将所有值推入数组中。

代码语言:javascript
复制
$(document).ready(function(){
var elements = $('*[id^="internship"]').map(function() {
    return $(this).attr("value");
  }).get().join();
  alert(elements);
});

工作示例

希望能帮上忙

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45166121

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档