Javascript - Accessing all the values (textbox, checkboxes) in a HTML div

Question

<?php foreach ($moduleIds as $index => $value) { $var = 0; ?>
    <div class="container" style="margin-top:50px" id="<?= $value ?>">
        <?php foreach ($modulesActions as $item) {
            if($value == $item['moduleId']){ 
                if($var == 0){ ?>
                    <div> <input class="textbox" type="text" name="moduleCode" id="moduleCode" value="<?= $item['moduleCode'] ?>"> </div>
               <?php $var = 1; }?>
                <input style="margin-right: 15px" type="checkbox" name="actionCOdes[]" value="<?= $item['actionCode'] ?>"><label> <?= $item['actionName'] ?> </label><br>
         <?php } ?>      
        <?php } ?>
    </div>
<?php } ?>

The code snippet above generates some div according to the number of element in the $moduleIds array and for each element in the $moduleIds array there will be one input text named moduleCode and under each moduleCode textbox there will be some checkbox named actionIds[] generated based on the $modulesActions array. Now if there are three elements in the $moduleIds array there will be three divs (which has id= value in the $moduleIds array) each one containing an input text (moduleCode) and some checkbox.

Now what I want is to access each divs with javascript. If three divs are generated then all the module codes(3) will be string separated by some spacial character and all the checkboxes values for a particular div will be in a separated array. something like this

moduleCOde = moduleCOde +"|"+ moduleCOde for each div;
actionCodes for 1st div = actionCodes Array

In short I want all the moduleCodes in a string(separated by "|") and all the actionCodes for the selected actionNames in separate arrays for each moduleCodes.

Can it be done in javascript.

Answer 1

Give the div tag inside php foreach loop a unique class name (ex: 'module').

jQuery approach: use $('.module') to select all divs, then you can use .each(index, element) to construct strings.

javascript approach: use document.getElementsByClassName('module') to get an array of div DOM objects, then iterate through them with a for loop and construct strings.

Answer 2

I think I may understand what you want. to start I'd like to keep it simple.
I'll take it as far as you want.

Start with a simple array.

 [0] => 0
 [1] => 1
 [2] => 2
 [3] => 3
 [4] => 4
 [5] => 5
 [6] => 6

then use it to create some divs, each div with a checkbox and text input.

  echo <<<EOT
<div id="d$key" class="row">
<input type="text" id="t$key" name="txt$key" value="Text #$key" />
<input type="checkbox" id="c$key" name="chk$key" value="$key" onclick="ck($key)"/>Checkbox #$key
</div><br/>
EOT;
}

The above code produces the HTML below:

<div id="d0" class="row">
<input type="text" id="t0" name="txt0" value="Text #0" />
<input type="checkbox" id="c0" name="chk0" value="0" onclick="ck(0)"/>Checkbox #0
</div><br/><div id="d1" class="row">
<input type="text" id="t1" name="txt1" value="Text #1" />
<input type="checkbox" id="c1" name="chk1" value="1" onclick="ck(1)"/>Checkbox #1
</div><br/><div id="d2" class="row">
<input type="text" id="t2" name="txt2" value="Text #2" />
<input type="checkbox" id="c2" name="chk2" value="2" onclick="ck(2)"/>Checkbox #2
</div><br/><div id="d3" class="row">
<input type="text" id="t3" name="txt3" value="Text #3" />
<input type="checkbox" id="c3" name="chk3" value="3" onclick="ck(3)"/>Checkbox #3
</div><br/><div id="d4" class="row">
<input type="text" id="t4" name="txt4" value="Text #4" />
<input type="checkbox" id="c4" name="chk4" value="4" onclick="ck(4)"/>Checkbox #4
</div><br/><div id="d5" class="row">
<input type="text" id="t5" name="txt5" value="Text #5" />
<input type="checkbox" id="c5" name="chk5" value="5" onclick="ck(5)"/>Checkbox #5
</div><br/><div id="d6" class="row">
<input type="text" id="t6" name="txt6" value="Text #6" />
<input type="checkbox" id="c6" name="chk6" value="6" onclick="ck(6)"/>Checkbox #6
</div>

Which looks like:

each check box has an onclick event the calls the function ck() and passes the number associated with the check box, div, and text.

Each row with text and check box all have related id.

Check box id="c#"
Text id = "t#"
div id="d#"

Where # is the row number.

To show it can do something I have the function ck() changing the background color of the text and div in it own row.

function ck(id){ 
  var div = document.getElementById('d' + id);
  var checked = document.getElementById('c' + id).checked;
  div.style.backgroundColor = color[checked];
  var txt = document.getElementById('t' + id);
  txt.style.backgroundColor = color[checked];
}

the background color is based on whether the check box is check or un-checked.

I create a global array because I avoid using if else do to its inefficiencies.

var color = new Array;
color[true] = '#ff0';
color[false] = '#f00';

The first thing the ck(0 function does is get the checkbox checked property.

var checked = document.getElementById('c' + id).checked;

Then retrieve the text and div elements

  var div = document.getElementById('d' + id);
  var txt = document.getElementById('t' + id);

Then set their colors based on the check box using the var checked above.

  div.style.backgroundColor = color[checked];
  txt.style.backgroundColor = color[checked];

This is how it looks when the check boxes are checked and unchecked:

The complete source:

or here is a link to a working version: Demo of the code

This code is test and debugged.

• No HTML errors (W3C HTML Validator)
• No CSS Errors (W3C CSS Valadator)
• 100% Mobile Friendly (W3C mobileOK)
• Yahoo YSlow! 100%
• Google PageSpeed 99% (bug in their checker deducts 1%)
• Google PageSpeed Insights Mobile 100%
• Google PageSpeed Insights Destop 100%

---

<?php  ob_start("ob_gzhandler");
header('Content-Type: text/html; charset=utf-8');
header('Connection: Keep-Alive');
header('Keep-Alive: timeout=5, max=100');
header('Cache-Control: max-age=84600');
header('Vary: Accept-Encoding');
echo <<<EOT
<!DOCTYPE html>
<html lang="en"><head><title>Testbed</title><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
.row{display:inline;}
</style></head><body><div id="page">
<form action="#" method="post"><div>
EOT;
ob_flush();
for($i=0;$i<7;$i++){$divs[] = $i;}

foreach($divs as $key => $val){
  echo <<<EOT
<div id="d$key" class="row">
<input type="text" id="t$key" name="txt$key" value="Text #$key" />
<input type="checkbox" id="c$key" name="chk$key" value="$key" onclick="ck($key)"/>Checkbox #$key
</div><br/>
EOT;
}
ob_flush();
echo <<<EOT
</div></form></div>
<script type="text/javascript">
//<![CDATA[
var divs = document.getElementsByTagName("div");
var color = new Array;
color[true] = '#ff0';
color[false] = '#f00';
function ck(id){ 
  var div = document.getElementById('d' + id);
  var txt = document.getElementById('t' + id);
  var checked = document.getElementById('c' + id).checked;
  div.style.backgroundColor = color[checked];
  txt.style.backgroundColor = color[checked];
}
//]]>
</script></body></html>
EOT;
ob_end_flush();
?>

Answer 3

Add form tag with someID and use jQuery to get all values.

var formData = $("#someID").serialize();

Hope this will help!

Answer 4

Yes It can be easily done. Follow the below code.

var str ="";

$("input[type='text'], input[type='checkbox']").each(function(){
 str +=  $(this).val() + "|";
});

Here is the working fiddle

Also fore removing last "|" pipe you can add following code

str = str.replace(/\|\s*$/, "");