/    Sign up×
Community /Pin to ProfileBookmark

Changing SELECT ID With Loop

I currently have a form that can add new entries on click using javascript. However, I would like to change the id of each subsequent “add-on”: e.g. The first tbody has an id of “participant1”, but the next one will have an id of “participant2”, the eighth “participant8”, and so forth.

Here is the excerpt from my main file:

[code=html]<fieldset class=”row2″>
<legend>List of Participants</legend>
<p>
<input type=”button” value=”Add Participant” onclick=”addRow(‘dataTable’)” />
<input type=”button” value=”Clear Participants” onclick=”deleteRow(‘dataTable’)” />
<p>(All acions apply only to entries with check marked check boxes only.)</p>
</p>
<table id=”dataTable” class=”form” border=”1″>
<tbody>
<tr>
<p>
<td>
<input type=”checkbox” required=”required” name=”chk[]” checked=”checked” />
</td>
<td>
<div>Participant: </div>
<select name=”participant1″ id=”participant1″>
<option>Person A</option>
<option>Person B</option>
<option>Person C</option>
</select>
</td>
</p>
</tr>
</tbody>
</table>
<div class=”clear”></div>
</fieldset>[/code]

And here is the excerpt from my JS File:

[CODE]function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 50) {
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
//newcell.id=”participant”+ rowCount;
var cellBody = table.rows[0].cells[i].innerHTML;
newcell.innerHTML = replaceAll(cellBody, ‘participant1’, ‘participant’ + (rowCount + 1));
console.log(rowCount, newcell.innerHTML)
}
}
else {
alert(“More than 50 Participants? Are you sure?”);
}
}

function replaceAll(str, find, replace) {
var i = str.indexOf(find);
if (i > -1) {
str = str.replace(find, replace);
i = i + replace.length;
var st2 = str.substring(i);
if (st2.indexOf(find) > -1) {
str = str.substring(0, i) + replaceAll(st2, find, replace);
}
}
return str;
}[/CODE]

But this appears to only be taking in one participant?

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@Kevin2May 14.2015 — First, <p> is not, and never has been, a valid child of <tr>. The only valid child tags of <tr> are <th> and <td>. Get rid of it.

Second, you cannot "nest" <p> tags (reference [b]<p>(All acions [sic] apply only to entries with check marked check boxes only.)</p>[/b] under your buttons).

Third, the ID you want gets applied to the <select> under the Participant, not the <tbody>. Open the console (F12) in any browser and watch what happens.

Fourth, a copy/paste of your posted code, with adjustments as per above, into a page template seems to work as you want -- at least my interpretation of what you want:
[code=html]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add table row</title>
<style>
#dataTable, #dataTable td {
border: 1px solid #000;
}
</style>
</head>
<body>
<form action="#">
<fieldset class="row2">
<legend>List of Participants</legend>
<div>
<input type="button" value="Add Participant" onclick="addRow('dataTable')">
<input type="button" value="Clear Participants" onclick="deleteRow('dataTable')">
<p>(All actions apply only to entries with check marked check boxes only.)</p>
</div>
<table id="dataTable" class="form">
<tbody>
<tr>
<td>
<input type="checkbox" required="required" name="chk[]" checked="checked">
</td>
<td>
<div>Participant: </div>
<select name="participant1" id="participant1">
<option>Person A</option>
<option>Person B</option>
<option>Person C</option>
</select>
</td>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
</form>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 50) {
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
//newcell.id="participant"+ rowCount;
var cellBody = table.rows[0].cells[i].innerHTML;
newcell.innerHTML = replaceAll(cellBody, 'participant1', 'participant' + (rowCount + 1));
console.log(rowCount, newcell.innerHTML)
}
}
else {
alert("More than 50 Participants? Are you sure?");
}
}

function replaceAll(str, find, replace) {
var i = str.indexOf(find);
if (i > -1) {
str = str.replace(find, replace);
i = i + replace.length;
var st2 = str.substring(i);
if (st2.indexOf(find) > -1) {
str = str.substring(0, i) + replaceAll(st2, find, replace);
}
}
return str;
}
</script>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@Kevin2May 14.2015 — In the "for what it's worth" category. ?

Change
&lt;input type="button" value="Add Participant" onclick="addRow('dataTable')"&gt;
to
&lt;input type="button" value="Add Participant" onclick="addRow(dataTable)"&gt;

Then change [b]function addRow()[/b] to
function addRow(tableID) {
var rowCount = tableID.rows.length;
if (rowCount &lt; 50) {
var row = tableID.insertRow(rowCount);
var colCount = tableID.rows[0].cells.length;
for (var i = 0; i &lt; colCount; i++) {
var newcell = row.insertCell(i);
//newcell.id="participant"+ rowCount;
var cellBody = tableID.rows[0].cells[i].innerHTML;
newcell.innerHTML = replaceAll(cellBody, 'participant1', 'participant' + (rowCount + 1));
console.log(rowCount, newcell.innerHTML)
}
}
else {
alert("More than 50 Participants? Are you sure?");
}
}


May not fix your problem, but it's a bit less code.
Copy linkTweet thisAlerts:
@subzeroauthorMay 15.2015 — Thanks; this was the answer I was looking for ?
×

Success!

Help @subzero spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...