CODEWITHSUNDEEP
javascripthtmlgetelementbyid
user1260310
user1260310

Reputation: 2227

javascript: use getElementByID to populate multiple divs

is there a way to write the same thing clientside using javascript to multiple divs or multiple spots on a page?

I have a php script outputting rows from a database. To edit the contents, I would like to insert a checkbox before each row as with the iphone edit contacts and to do it quickly, I'm trying to use javascript to populate a div with a checkbox before each row using getElemenByID.

One problem is you cannot have more than one div of the same name on a page so I can't write once and have it populate multiple divs of the same name. If I give divs different names than I have to write multiple times which is not appealing especially as the number of rows may vary.

As a related question would checkboxes inserted using javascript even work?

Here is non working code:

js

function edit() }
var box = '<input type="checkbox name=num[]>';
var target = "checkbox";
document.getElementById(target).innerHTML = box;
return;
}//end function

html (generated by PHP from dbase)

<form action="edit.php" method="post">
<a href="javascript:void" onclick="edit()";>edit</a>
<div id="checkbox"></div>Row1 contents<br>
<div id="checkbox"></div>Row2 contents<br>
<form type = "submit" value="Edit">
</form>

Does anyone know a way to do this ie make boxes appear that can then be selected for submission?

Many thanks for any suggestions.

Upvotes: 0

Views: 4896

Answers (5)

kmatheny
kmatheny

Reputation: 4212

Should be generated using PHP instead, but...

HTML

I'm guessing that you want to use a span element (not a div) for your checkbox placeholder, otherwise you'd have a checkbox on one line, and then "Row1 contents" below the checkbox, versus having the checkbox next to the text.

[X]
Row 1 Contents

versus (span)

[X] Row 1 Contents

 

<form action="edit.php" method="post" name="frmRows" id="frmRows">
    <a href="javascript:void(0)" onclick="edit()">edit</a>
    <span class="checkbox"></span>Row1 contents<br>
    <span class="checkbox"></span>Row2 contents<br>
    <input type = "submit" value="Edit">
</form>

JavaScript

It's not recommended to use .innerHTML in JavaScript unless absolutely necessary (not supported in all browsers, and there are better ways to accomplish the same task.)

function edit() {
    var newCb;
    var i;
    var checkboxList = document.getElementsByClassName( 'checkbox' );

    for ( i = 0; i < checkboxList.length; i++ ) {

        newCb = document.createElement( 'input' ); // Create a new input element

        newCb.setAttribute( 'type', 'checkbox' ); // Set attributes for new element
        newCb.setAttribute( 'value', 'SomeValueHere' );
        newCb.setAttribute( 'name', 'checkboxName' );
        newCb.setAttribute( 'id', 'checkbox-' + i );

        checkboxList[i].appendChild( newCB ); // Add checkbox to span.checkbox
    }
}

Upvotes: 1

Seth Greenstein
Seth Greenstein

Reputation: 153

If you use jquery:

function edit() {
// box = '<input type="checkbox name=num[]>'; 
var target = "checkbox"; 
$(".cb").html(box);
return; 
}//end function 

<form action="edit.php" method="post"> 
<a href="#" onclick="edit();"> edit</a> 
<div class="cb" id="checkbox">aa</div>Row1 contents<br> 
<div class="cb" id="checkbox">bb</div>Row2 contents<br> 
</form>

Upvotes: 0

italo.nascimento
italo.nascimento

Reputation: 142

Even if you could do it with a single line (using jQuery, for exemplo), you would actually be running a loop through all the divs (that's the only way to change something in various elements: change it in each one).

So you can do this with pure JavaScript using a loop to run the modifications in all the divs, getting them by id (the faster way):

for(var i = 0; i < numberOfDivs; i++){
  document.getElementById("myElement" + i).innerHTML = box; //concatenating i to a base id
}

You could also use another slower techniques to get elements by tag name or class, or even use a lib such as jQuery.

Upvotes: 1

rennat
rennat

Reputation: 2559

The HTML

The first thing to do is to update the generated HTML. In HTML element id attributes should be unique just like field names inside a form. To classify multiple elements as similar you should use the class attribute.

Here is an example of how you could structure the HTML.

<form action="edit.php" method="post">
<a href="javascript:void" onclick="edit">edit</a>
<div id="row1Identifier" class="editCheckbox"></div>Row1 contents</br>
<div id="row2Identifier" class="editCheckbox"><?div>Row2 contents</br>
<input type="submit" value="Submit">
</form>

The javascript

Using document.getElementsByClassName will return a list of elements with the matching class.

​function edit () {
    // set up the variables used in this function
    var checkboxDivs = document.getElementsByClassName('editCheckbox'),
        i,
        loopDiv;
    // make the change to each div
    for (i = 0; i < checkboxDivs.length; i += 1) {
        loopDiv = checkboxDivs[i];
        loopDiv.innerHTML = '<input type="checkbox" name="' + loopDiv.id + '">';
    }
}​

Upvotes: 1

Bart
Bart

Reputation: 636

The ID attribute must be unique on each page. You could use the class attribute like this:

<div class="checkbox"></div>Row1 contents<br>
<div class="checkbox"></div>Row2 contents<br>

and then you can use

var check = getElementsByClassName('checkbox');
for (var i=0; i< check.length; i++) {
    check[i].innerHTML = box;
}

But... this will not work in IE < 9. If you are using a framework like jQuery they already implemented a workaround for this but with pure JS you have to implement this yourself.

jQuery example

HTML

<div class="checkbox"></div>Row1 contents<br>
<div class="checkbox"></div>Row2 contents<br>

JS

var box = '<input type="checkbox" name="num[]" />';
$(".checkbox").html(box);

Upvotes: 1

Related Questions