CODEWITHSUNDEEP
javascripthtml
Rohit
Rohit

Reputation: 87

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

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?

Upvotes: 0

Views: 104

Answers (3)

Berkay Yaylacı
Berkay Yaylacı

Reputation: 4513

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,

Upvotes: 0

Dave94
Dave94

Reputation: 61

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/

Upvotes: 0

Dij
Dij

Reputation: 9808

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

Upvotes: 1

Related Questions