Get input and select value in javascript function for the below HTML code

Question

I am having the following HTML code:

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

Now, I want to get all the above input, select parameters in a javascript function.

I tried document.getElementById("internship").value and document.getElementById("internship[]").value but I am not able to get the parameters. I even tried to get individual parameter using document.getElementById("internship[source]").value and document.getElementById("internship[source][]").value but still out of luck.

Can anyone help me on how to proceed with this?

id attributes doesn't behave the same as name attributes, each id should be unique. — Jacques Marais
– Jacques Marais, Commented Jul 18, 2017 at 12:01
IDs should be unique. Also I think that no special characters are allowed in IDs — danielspaniol
– danielspaniol, Commented Jul 18, 2017 at 12:02

Dij · Accepted Answer · 2017-07-18 12:09:13Z

your elements are getting same id's and names because you are using same string value to define this. Using same id to for multiple elements is not good, rather you should use class for this. Then you can get these elements using document.getElementsByClassName() which will return a nodeList and you will have to iterate over it.

I have made a sample of some of elements from your code by using class rather than id, so you can use it.

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

Dave94 · Accepted Answer · 2017-07-18 12:11:06Z

I changed the

internship[source][]

to

internship[source][1] and internship[source][2] and internship[source][3]

It works.

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

Berkay Yaylacı · Accepted Answer · 2017-07-18 12:12:32Z

0

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

Or you can push all values into array

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

Working example

Hope helps,

answered Jul 18, 2017 at 12:12

Berkay Yaylacı

4,5132 gold badges22 silver badges39 bronze badges

Collectives™ on Stack Overflow

Get input and select value in javascript function for the below HTML code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related