Question

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.

Answer 1

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