I try to make lines dynamically, the problem is when I add a checkbox with label dynamically using javascript does not work. However the one I created with Html by default works correctly.
In fact I want the image that I added (on.png / off.png) replaces the checkbox. When I do it only with html (checkbox + label) the code works, but now I only want to create the element with Javascript, I can chow the label but it when I click It's not work.
This is all my code :
Main.html
<HTML>
<HEAD>
<TITLE> </TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.id = "id2" ;
cell1.appendChild(element1);
// Create label
var label = document.createElement("label");
label.for = "id2" ;
cell1.appendChild(label);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk" id="id1" /> <label for="id1" > </label> </TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
style.css
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label
{
background: url(images/off.png) no-repeat;
height: 64px;
width: 64px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: url(images/on.png) no-repeat;
height: 64px;
width: 64px;
display:inline-block;
padding: 0 0 0 0px;
}
Help me please.
Change this
label.for = "id2" ;
to this
label.htmlFor = "id2" ;
Because some JavaScript implementations didn't allow keywords/reserved words as object properties, a workaround had to be made for the for property, so they chose htmlFor.
A similar situation was with .class, which is why they use .className.
Your problem is line 17, label.for = "id2" ; that should be label.htmlFor = "id2";
Related
I've recently looked on this site and was able to alter my code to dynamically add row to a table in an html form. My issue is the next step : submitting the input fields' values by clicking the submit button. The issue is that the fields are created when the user clicks the "add" button, but the form doesn't send those values to the database (I'm using php). I have used this reference in order to make this function work, but perhaps I'm still missing an important syntax to send the array info to the field:
<style>
.inputThis {
border: none;}
.textareaThis {
border: 0px; width: 100%; height: 25px;}
.pvaW {
width:46%;
}
</style>
<script language="JavaScript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name="Item4[]";
element1.className="inputThis";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "HowMany4[]";
element2.className="inputThis";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("textarea");
element3.type = "text";
element3.name = "WhereHowUsed4[]";
element3.className="textareaThis";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "Cost4[]";
element4.className="inputThis";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("textarea");
element5.type = "text";
element5.name = "ConCur4[]";
element5.className="textareaThis";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("textarea");
element6.type = "text";
element6.name = "Benefit4[]";
element6.className="textareaThis";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("textarea");
element7.type = "text";
element7.name = "ItemComments4[]";
element7.className="textareaThis";
cell7.appendChild(element7);
}
</script>
</head>
<body>
<form action="post.php" method="post" name="form1">
<table id="tab" cellpadding="0" cellspacing="0" width="100%" class="table-striped">
<tbody>
<tr>
<td><input name="Item4[]" type="text" style="border: 0px;" /></td>
<td><input name="HowMany4[]" type="text" style="border: 0px;"/></td>
<td><textarea name="WhereHowUsed4[]" type="text" style="border: 0px; width: 100%; height: 25px;"></textarea></td>
<td><input name="Cost4[]" type="text" style="border: 0px;"/></td>
<td><textarea name="ConCur4[]" type="text" style="border: 0px; width: 100%; height: 25px;"></textarea></td>
<td><textarea name="Benefit4[]" type="text" style="border: 0px; width: 100%; height: 25px;"></textarea></td>
<td><textarea name="ItemComments4[]" type="text" style="border: 0px; width: 100%; height: 25px;"></textarea></td></tr></tbody></table>
<div class="push-right" style="margin-top: 5px;">
<input type="button" class="btn btn-success" id="add" value="+" name="Add" onclick="addRow('tab')"/>
</div>
<button class="btn btn-success" type="submit"> Submit</button>
</form>
</body>
//php posting syntax from the post.php page
//////////////////
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="My Company">
<meta name="keywords" content="post">
<meta name="expires" content="never" />
<title>My Site</title>
</head>
<body>
Adding into the database....
<?php
$SPProxyServices = "http://--IP--:0000";
error_reporting(E_ALL);
ini_set('display_errors', 1);
//General
$dbfieldName1 = "Item4"; $this1= $_POST['Item4'];
$Post41 = implode("~ ", $this1);
$dbfieldName2 = "Cost4"; $this2= $_POST['Cost4'];
$Post42 = implode("~ ", $this2);
$dbfieldName3 = "HowMany4"; $this3= $_POST['HowMany4'];
$Post43 = implode("~ ", $this3);
$dbfieldName4 = "Benefit4"; $this4= $_POST['Benefit4'];
$Post44 = implode("~ ", $this4);
$dbfieldName5 = "ConCur4"; $this5= $_POST['ConCur4'];
$Post45 = implode("~ ", $this5);
$dbfieldName6 = "WhereHowUsed4"; $this6= $_POST['WhereHowUsed4'];
$Post46 = implode("~ ", $this6);
$client = new SoapClient($SPProxyServices."/");
$params->SPWebURL = "/";
$params->ListName = "/";
$params->BatchStr = "<Batch OnError=\"Continue\" ListVersion=\"1\" >
<Method ID=\"1\" Cmd=\"New\">
<Field Name='$dbfieldName1'>".$Post41."</Field>
<Field Name='$dbfieldName2'>".$Post42."</Field>
<Field Name='$dbfieldName3'>".$Post43."</Field>
<Field Name='$dbfieldName4'>".$Post44."</Field>
<Field Name='$dbfieldName5'>".$Post45."</Field>
<Field Name='$dbfieldName6'>".$Post46."</Field>
</Method></Batch>";
$result = $client->UpdateListItems($params);
$simpleresult = $result; //->ListsGetListItemsResult;
?>
function functionAdd() {
/* **> here I add cells and rows to the table** */
var table = document.getElementById("id");
var row = table.insertRow(1);
var cell = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
cell.innerHTML = "New function";
cell1.innerHTML = "<div class='row'>"+
" <button type='button' id='on'>ON</button>"+
" <button type='button' id='off'>OFF</button>"+
"</div>";
cell1.style.width = '100px';
cell2.innerHTML = " <img src='greenPoint.png' style = 'width: 10px; height:10px;'>"
cell3.innerHTML = " <img src='deleteIcon.png' style = 'width: 20px; height:20px;'>"
/* **> there is the condition for buttons** */
document.getElementById('on').disabled = false;
document.getElementById('off').disabled = false;
//on click changes on/off to green
document.getElementById('on').onclick = function(){
this.disabled = true;
document.getElementById('off').disabled = false;
if (this.disabled == false) {
document.getElementById('off').disabled = true;
}else if (this.disabled == true) {
document.getElementById('off').disabled = false;
}
cell2.innerHTML = " <img src='greenPoint.png' style = 'width: 10px; height:10px;'>"
}
//on click changes on/off to red
document.getElementById('off').onclick = function(){
this.disabled = true;
document.getElementById('on').disabled = false;
cell2.innerHTML = " <img src='redPoint.png' style = 'width: 10px; height:10px;'>"
}
}
table
{
margin: 0 auto;
width:350px;
height:100px;
}
.row
{
text-align: center;
}
.log{
margin: 200px 455px;
background-color: #2980b9;
border-radius: 4px;
}
.input{
padding-top: 20px;
padding-bottom: 20px;
margin-left: 35px;
}
input{
margin-top: 10px;
margin-left: 20px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="vizibilitate">
<input type="button" value="Add" onclick="functionAdd()">
<table id="id" style="border:1px solid black; border-radius: 3px;">
<tr>
<th>denumirea</th>
<th>statut</th>
<th>on/off</th>
<th >delete</th>
</tr>
<tr>
</tr>
</table>
</div>
</body>
</html>
This is how it looks like]:
I can make changes only on first line for on and off but other lines have disabled buttons.
I've got the solution.. it took a while
So there it is
</head>
<body>
<script type="text/javascript">
var contor=0;
function functionAdd() {
var index=contor;
var table = document.getElementById("id");
var row = table.insertRow(1);
var cell = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
cell.innerHTML = " New function";
cell1.innerHTML = "<div class='row'>"+
" <button type='button' id='on"+index+"'>ON</button>"+
" <button type='button' id='off"+index+"'>OFF</button>"+
"</div>";
cell1.style.width = '100px';
cell2.innerHTML = " <img src='greenPoint.png' style = 'width: 10px; height:10px;'>"
cell3.innerHTML = " <img src='deleteIcon.png' style = 'width: 20px; height:20px;'>"
document.getElementById("on"+index).disabled = true;
document.getElementById("off"+index).disabled = false;
//La click se schimba indicatorul on/off la verde
document.getElementById("on"+index).onclick =function(){ generatorOn(index, cell2);};
//La click se schimba indicatorul on/off la rosu
document.getElementById("off"+index).onclick =function(){ generatorOff(index, cell2);};
contor++;
//console.log(contor);
}
function generatorOn(rowNumber, cell2){
cell2.innerHTML = " <img src='greenPoint.png' style = 'width: 10px; height:10px;'>";
document.getElementById("on"+rowNumber).disabled = true;
document.getElementById("off"+rowNumber).disabled = false;
}
function generatorOff(rowNumber, cell2){
cell2.innerHTML = " <img src='redPoint.png' style = 'width: 10px; height:10px;'>";
document.getElementById("on"+rowNumber).disabled = false;
document.getElementById("off"+rowNumber).disabled = true;
}
function generatorOff(rowNumber, cell3){
cell3.innerHTML = " <img src='deleteIcon.png' style = 'width: 20px; height:20px;'>";
}
</script>
<div id="vizibilitate">
<input type="button" value="Add function" onclick="functionAdd()" style="border-radius: 5px; margin-left: 500px; width:350px; height: 30px;">
<table id="id" style="border: 1px solid black; border-radius: 3px;">
<tr>
<th>denumirea</th>
<th>statut</th>
<th>on/off</th>
<th >delete</th>
</tr>
<tr>
</tr>
</table>
</div>
</body>
</html>
hope it was useful for others who had the same problem as me..enjoy!
I have a Javascript value from a.jsp and I want to pass the value of it to b.jsp.
how can it be done?
a.jsp
<script type="text/javascript">
var inspection_method_row_limit=50;
</script>
as example I want to pass to value of inspection_method which can be used in b.jsp.
In a.jsp, you need to forward to another jsp. I am assuming you will do it on a click of some anchor.
In javascript code, Make the final url.
var forward_url = "/jsp/b.jsp?inspection_method_row_limit="+50;
Update the location probably, on a click of an anchor tag...
Forward.
In the target jsp, use the following...
The value of inspection_method_row_limit is <b>
<%= request.getParameter("inspection_method_row_limit") %></b>!
<script type="text/javascript">
var inspection_method_row_limit=0;
var deleted_row_inspection_method="";
function myCreateFunction(tableID) {
var ClickMax = 5;
if (inspection_method_row_limit < ClickMax){
var table = document.getElementById(tableID);
var x = inspection_method_row_limit + 1;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
//compare if no deleted row before then enter if statement and numbering is follow inspection_method_row_limit
if (deleted_row_inspection_method == ""){
var cell2 = row.insertCell(1);
cell2.innerHTML = x;
var cell3 = row.insertCell(2);
var element2 = document.createElement("textarea");
element2.type = "textarea";
var txt = tableID + x;
element2.name = txt;
element2.className = "textarea2";
cell3.appendChild(element2);
}
//if user had deleted row before then the numbering of previously will be reuse
else
{
var stringlength = deleted_row_inspection_method.length;
var foundLocation = deleted_row_inspection_method.search("-");
var subStringname = deleted_row_inspection_method.substring(0,foundLocation);
deleted_row_inspection_method = deleted_row_inspection_method.slice(foundLocation + 1,stringlength);
var cell2 = row.insertCell(1);
cell2.innerHTML = subStringname;
var cell3 = row.insertCell(2);
var element2 = document.createElement("textarea");
element2.type = "textarea";
element2.name = tableID + subStringname;
element2.className = "textarea2";
cell3.appendChild(element2);
}
inspection_method_row_limit ++;
}
function myDeleteFunction(tableID) {
//delete row for inspection method
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
var res = row.cells[1].innerHTML + "-";
deleted_row_inspection_method = deleted_row_inspection_method.concat(res);
table.deleteRow(i);
rowCount--;
i--;
inspection_method_row_limit --;
}
}
}catch(e) {
alert(e);
}
</script>
<form action="index.html?pageid=inspection_session&content=inspection_summary_result" name="form1" id="form1" method="post" onsubmit="return validateForm(document.form1)" >
<tr>
<td width="300" height="100"><font style="font-size:18px">2. Inspection Method <img src="images/information.png" width="20" height="20" align="absmiddle" style="cursor:pointer;" title="Add Row for More Data" alt="Add Row for More Data"></font></td>
<td valign="top">
<button type="button" class="mybtn" onclick="myCreateFunction('inspection_method')"><img align="absmiddle" src="icons/action_add.png"/> Add Row</button>
<button type="button" class="mybtn" onclick="myDeleteFunction('inspection_method')"><img align="absmiddle" src="icons/action_remove.png"/> Delete Row</button>
<table id="inspection_method" border="1">
<tr>
<td width="50"><img src="images/001_06.gif" width="20" height="20" align="absmiddle" style="cursor:pointer;" title="Tick to Delete" alt="Tick to Delete"></td>
<td width="50">No.</td>
<td width="589">Description</td>
</tr>
</table><br>
</td>
</tr>
<table>
<tr>
<td height="45" colspan="4"><input type="submit" name="submit" class="mybtn3" value="Next"/> <input type="reset" class="mybtn3" name="reset" value="Reset"/></td>
</tr>
</table>
</form>
I am trying to implement a dynamic table but when the button is pressed to add a row the row is added but the input text box is not inserted in both cells. Any idea how to solve this problem.
<html>
<body>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="27">
1
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.innerHTML = rowCount + 1;
var secondCell = row.insertCell(1);
var thirdCell = row.insertCell(2);
var element = document.createElement("input");
element.type = "text";
element.name = "txtbox[]";
secondCell.appendChild(element);
}
</script>
You need to add another "input" element and append this into the thirdCell.
Try changing the last bit of your javascript function to this:
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
secondCell.appendChild(element1);
thirdCell.appendChild(element2);
Shown here
Note: Your script tag should go inside the body of the html.
Here is what the final code could look like:
<html>
<body>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="27">
1
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.innerHTML = rowCount + 1;
var secondCell = row.insertCell(1);
var thirdCell = row.insertCell(2);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
secondCell.appendChild(element1);
thirdCell.appendChild(element2);
}
</script>
</body>
</html>
You have not written the code to add a new text element to the third column. Add the below mentioned code after "secondCell.appendChild(element);" section of your code:
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
thirdCell.appendChild(element2);
I have this form code to dynamically add rows. How can I add a date dynamically?
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
This the code for adding row dynamically
This is the code for calendar
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">
<INPUT type="text" name="testinput" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'testform',
// input name
'controlname': 'testinput'
});
</script>
add a new cell for example,
var cell4 = row.insertCell(3);
cell4.innerHTML = new Date();
.
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
<TD> <INPUT type="text" name="testinput" /></TD>
</TR>
can you explain where to insert the date?