CODEWITHSUNDEEP
javascriptphphtmlarraysarraylist
Sarbjyot Singh Chahal
Sarbjyot Singh Chahal

Reputation: 541

Get form values through JavaScript

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[]?

Upvotes: 1

Views: 7167

Answers (3)

Ravi Hirani
Ravi Hirani

Reputation: 6539

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

Upvotes: 2

Berserk
Berserk

Reputation: 883

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.

Upvotes: 1

Mahmoud Zakal
Mahmoud Zakal

Reputation: 128

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

Upvotes: 1

Related Questions