1

This is my HJTML code. I don't know how to get values stored in filtertime[] using JavaScript and make them show on my screen.

   <form action="index.php" method="post" >

    <div class="col-lg-6"><div class="f-txt-l"><input id="test" type="checkbox" name="filtertime[]" class="morning" value="Morning"></div> <div class="f-txt-r">Morning</div></div>
     <div class="col-lg-6"><div class="f-txt-l"><input  id="test" type="checkbox" name="filtertime[]" class="morning" value="Afternoon"></div> <div class="f-txt-r">Afternoon</div></div>
     <div class="col-lg-6"><div class="f-txt-l"><input  id="test" type="checkbox" name="filtertime[]" class="morning" value="Evening"></div> <div class="f-txt-r">Evening</div></div>
     <div class="col-lg-6"><div class="f-txt-l"><input  id="test" type="checkbox" name="filtertime[]" class="morning" value="Night"></div> <div class="f-txt-r">Night</div></div>

     <div class="col-lg-12"><input type="submit" name="button" class="apply-filter" value="Apply Filter"></div>


        </form>


   <script>
   var new =  document.getElementsById("test").innerhtml
   </script>

How can I get input values in JavaScript through value is stored in array as filtertime[]?

5
  • 1
    show us what you've tried so far. btw, all your inputs have the same id. Id's should be unique Commented Feb 11, 2016 at 8:22
  • i have tried that doesnt works so i want to know how to store it Commented Feb 11, 2016 at 8:24
  • i am storing data in array so why want different id Commented Feb 11, 2016 at 8:25
  • show us the code that you have tried so far . Commented Feb 11, 2016 at 8:26
  • ok wait let me put it on Commented Feb 11, 2016 at 8:28

3 Answers 3

2

Add id in your form tag.

<form action="index.php" id="form_name" method="post" >

Use below code to get all form element by JS :-

document.forms["form_name"].getElementsByTagName("input");

Note:- Above Code will work only if you don't have selects or textareas in your form.

If you have assigned id in DOM element like below,

<input type="text" name="name" id="uniqueID" value="value" />

Then you can access it via below code:-

Javascript:-

var nameValue = document.getElementById("uniqueID").value;

If you have Radio button in your form, then use below code:-

<input type="radio" name="radio_name" value="1" > 1
<input type="radio" name="radio_name" value="0" > 0<br>

Javascript:-

var radios = document.getElementsByName('radio_name');

for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        // do whatever you want with the checked radio
        alert(radios[i].value);

        // only one radio can be logically checked, don't check the rest
        break;
    }
}

Hope it will help you :)

Sign up to request clarification or add additional context in comments.

Comments

1

this is the easiest way to get array of your form items

 var arrValues = [];
 for (var x =0; x < document.getElementsByClassName("morning").length ; x++)
 {
   arrValues.push(document.getElementsByClassName("morning")[x].checked);
 }

Comments

1

To do that, the easiest way is to select all input with the "morning" class and after, foreach look if is checked :

    var item = document.getElementsByClassName("morning"); // get all checkbox
    var checkboxesChecked = []; // result array with ckecked ckeckbox

    for (var i=0; i<item.length; i++) {
         // if is checked add the value into the array
         if (item[i].checked) {
            checkboxesChecked.push(item[i].value);
         }
    }


    console.log(checkboxesChecked);

In the "checkboxesChecked" array you have all the values of the checked box.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.