I am creating a form which adds a table row on a button click so far its working fine but I want to have a delete button beside every row generated by the button click, but not on the first row. I've searched many blogs but came up with nothing can anyone guide me in doing it? I am just a beginner.
Here is my script:
<?php
session_start();
?>
<!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">
<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'name' + i;
el.id = 'name' + i;
el.size = 20;
el.maxlength = 20;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'address' + i;
el2.id = 'address' + i;
el2.size = 20;
el2.maxlength = 20;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'contactNum' + i;
el3.id = 'contactNum' + i;
el3.size = 20;
el3.maxlength = 20;
thirdCell.appendChild(el3);
frm.h.value=i;
i++;
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title></head>
<body>
<form action="submit.php" method="post" name="frm" id="frm">
<table width="40%" border="2" cellpadding="0" cellspacing="0" id="table1">
<tr>
<td><strong>Name</strong></td>
<td><strong>Address</strong> </td>
<td><strong>Contact Num</strong> </td>
</tr>
<tr>
<td><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td><input name="address" type="text" id="address" size="20" maxlength="20" /></td>
<td><input name="contactNum" type="text" id="contactNum" size="20" maxlength="12" /></td>
</tr>
</table>
<input type="button" value="Add" onclick="addRow();" />
<input name="Submit" type="submit" value="Submit" />
<label>
<input name="h" type="hidden" id="h" value="0" />
</label>
</form>
</body>
</html>
I think you are looking for add row jquery plugin.
You can use the deleteRow() method with the rowIndex property. Try using an onClick(this) call for the button in the row.
Better try to search for data tables.. They can be used directly. You need not code in more also.. You also have many other features embedded in it.
Related
I have disabled my submit button to avoid submission when textbox are not filled. I have multiple dynamic textbox where the function works correctly. But upon adding another row of textboxes, the submit button is already enabled. How can I still disable the textboxes when the user decides to add another row? I need the submit button to be enabled whenever all the textboxes are filled, after and before adding another row.
<html>
<head>
<script>
function addRow(){
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" id="purpose" size="20" onkeyup="success()"/>';
row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" id="wafernum" size="20" onkeyup="success()"/>';
row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" id="cell" size="20" onkeyup="success()"/>';
row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" id="qty" size="20" onkeyup="success()"/>';
row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" id="remarks" size="20" onkeyup="success()"/>';
row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function success() {
if(document.getElementById("uname").value==="" || document.getElementById("age").value==="" || document.getElementById("purpose").value==="" || document.getElementById("wafernum").value==="" || document.getElementById("cell").value==="" || document.getElementById("qty").value==="" || document.getElementById("remarks").value==="") {
document.getElementById('submit_form').disabled = true;
} else {
document.getElementById('submit_form').disabled = false;
document.getElementById('submit_form').style.backgroundColor="yellow";
}
}
</script>
<style>
</style></head>
<body>
Name: <input type="text" id="uname" />
Age: <input type="text" id="age" />
<input type= "button" id= "add" value="Add" onclick= "Javascript:addRow();" >
<table id= "bod">
<tr>
<th>PURPOSE</th>
<th>WAFERNUM</th>
<th>CELL</th>
<th>QTY</th>
<th>REMARKS</th>
</tr>
</table>
<input type = "submit" name = "submit" id= "submit_form" value = "Submit" onclick="SaveData()" disabled>
</body>
</html>
Alright i fixed your error , you had some issues where you were enbaling the button and disabling , its always better to itrate and check through the loop rather than going and checking if every element is empty , check the bellow answer and the fiddle . let me know if it works . The edited script part is below , replace it with yours it should work .
<script>
function addRow() {
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" class = "uname" id="purpose" size="20" onkeyup="success()"/>';
row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" class = "wafernum" id="wafernum" size="20" onkeyup="success()"/>';
row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" class = "cell" id="cell" size="20" onkeyup="success()"/>';
row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" class = "qty" id="qty" size="20" onkeyup="success()"/>';
row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" class = "remarks" id="remarks" size="20" onkeyup="success()"/>';
row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function success() {
// get all the elements present in form
var unameArray = document.getElementsByClassName("uname");
var ageArray = document.getElementsByClassName("age");
var cellArray = document.getElementsByClassName("cell");
var qtyArray = document.getElementsByClassName("qty");
var wafernumArray = document.getElementsByClassName("wafernum");
var purposeArray = document.getElementsByClassName("purpose");
var remarksArray = document.getElementsByClassName("remarks");
// Check for number of tr
var rowCount = document.getElementById("bod").rows.length;
var bt = document.getElementById('submit_form');
var ele = document.getElementsByTagName('input');
for(var i=0;i<ele.length;i++) {
if (ele[i].type == 'text' && ele[i].value == '') {
bt.disabled = true; // Disable the button.
return false;
}
else {
bt.disabled = false; // Enable the button.
}
}
}
</script>
Modify your conditions a little bit. Now it is working as desired
<html>
<head>
<script>
function addRow() {
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="purpose_dy[]" class = "uname" id="purpose" size="20" onkeyup="success()"/>';
row.insertCell(1).innerHTML = '<input type="text" name="wafernum_dy[]" class = "wafernum" id="wafernum" size="20" onkeyup="success()"/>';
row.insertCell(2).innerHTML = '<input type="text" name="cell_dy[]" class = "cell" id="cell" size="20" onkeyup="success()"/>';
row.insertCell(3).innerHTML = '<input type="text" name="qty_dy[]" class = "qty" id="qty" size="20" onkeyup="success()"/>';
row.insertCell(4).innerHTML = '<input type="text" name="remarks_dy[]" class = "remarks" id="remarks" size="20" onkeyup="success()"/>';
row.insertCell(5).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}
function success() {
// get all the elements present in form
var unameArray = document.getElementsByClassName("uname");
var ageArray = document.getElementsByClassName("age");
var cellArray = document.getElementsByClassName("cell");
var qtyArray = document.getElementsByClassName("qty");
var wafernumArray = document.getElementsByClassName("wafernum");
var purposeArray = document.getElementsByClassName("purpose");
var remarksArray = document.getElementsByClassName("remarks");
// Check for number of tr
var rowCount = document.getElementById("bod").rows.length;
for(var i=0;i<rowCount;i++) {
var uname = unameArray[i];
var age = ageArray[i];
var cell = cellArray[i];
var qty = qtyArray[i];
var wafernum = wafernumArray[i];
var purpose = purposeArray[i];
var remarks = remarksArray[i];
if (uname === "" || age === "" || cell === "" || qty === "" || wafernum === "" || purpose === "" || remarks === "") {
document.getElementById('submit_form').disabled = true;
document.getElementById('submit_form').style.backgroundColor = "initial";
break;
} else {
document.getElementById('submit_form').disabled = false;
document.getElementById('submit_form').style.backgroundColor = "yellow";
}
}
}
</script>
<style>
</style>
</head>
<body>
Name: <input type="text" id="uname" /> Age: <input type="text" id="age" />
<input type="button" id="add" value="Add" onclick="Javascript:addRow();">
<table id="bod">
<tr>
<th>PURPOSE</th>
<th>WAFERNUM</th>
<th>CELL</th>
<th>QTY</th>
<th>REMARKS</th>
</tr>
</table>
<input type="submit" name="submit" id="submit_form" value="Submit" onclick="SaveData()" disabled>
</body>
</html>
Converting oclick() with addEventListener(), i have tried multiple times, But no Success. Can anyone help please. i have read in the book, that onlick() is not w3 standard, Any help will highly be aprreciated
Before with onclick() working Perfectly:
html code
<!DOCTYPE html>
<html>
<head>
<title>Splitting number</title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<form id="myForm" action="" name="myForm">
<table border="1">
<tr>
<td>Enter a phone number<br> [in the form (555) 555-5555]</td>
<td><input name="input" type="text" size="40"></td>
</tr>
<tr>
<td><input type="button" value="Split" onclick="parseNumber()"></td>
</tr>
<tr>
<td>Area code:</td>
<td><input name="areaCode" type="text" size="5"></td>
</tr>
<tr>
<td>Number:</td>
<td><input name="number" type="text" size="8"></td>
</tr>
</table>
</form>
</body>
</html>
javascript code:
function parseNumber() {
var myForm = document.getElementById( "myForm" );
myForm.areaCode.value = "";
myForm.number.value = "";
var completeNumber = myForm.input.value.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
myForm.areaCode.value = areaCode;
myForm.number.value = tokens2[0] + "-" + tokens2[1];
}
after, Not working:
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Splitting number</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
Enter a phone number: in the form (555) 555-5555]
<input name="input" type="text" size="40" id="number" ><br>
<input type="button" value="Split" id="myBtn"><br><br>
Area code: <input name="areaCode" type="text" size="5" id="areaCode"><br>
Number: <input name="number" type="text" size="8" id="anotherNumber">
</body>
</html>
javascript code
var completeNumber = document.getElementById("number");
x = document.getElementById( "myBtn" );
function parseNumber() {
x.addEventListener("click", parseNumber);
completeNumber.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
document.getElementById("areaCode").innerHTML = areaCode.toString();
document.getElementById("anotherNumber").innerHTML = tokens2[0].toString() + "-" + tokens2[1].toString();
}
You need to add the event listener outside the function.
The listener is listening (clues in the name) for a mouse 'click' event on that element. When the event happens i.e you click on the element, it calls the function that it is assigned, in your case: parseNumber.
So since you are adding the event listener inside the function, it never gets added (as the function never gets called).
It should all work if you move the lines:
var x = document.getElementById( "myBtn" );
x.addEventListener("click", parseNumber);
outside the function. :)
I thnik no one actually read the question, if you already had a working example then changing onclick to eventListener is no problem:
var parseNum = document.getElementById('parse-number');
function parseNumber() {
var myForm = document.getElementById( "myForm" );
myForm.areaCode.value = "";
myForm.number.value = "";
var completeNumber = myForm.input.value.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
myForm.areaCode.value = areaCode;
myForm.number.value = tokens2[0] + "-" + tokens2[1];
}
parseNum.addEventListener("click", parseNumber);
<form id="myForm" action="" name="myForm">
<table border="1">
<tr>
<td>Enter a phone number<br> [in the form (555) 555-5555]</td>
<td><input name="input" type="text" size="40"></td>
</tr>
<tr>
<td><input type="button" value="Split" id="parse-number"></td>
</tr>
<tr>
<td>Area code:</td>
<td><input name="areaCode" type="text" size="5"></td>
</tr>
<tr>
<td>Number:</td>
<td><input name="number" type="text" size="8"></td>
</tr>
</table>
</form>
Change your code to this where eventListener is added outside the bounded function. Otherwise it will repeatedly bind an eventListener to the button.
Also place your script.js on the bottom of the HTML page. Because when the script executed the DOM element is not found since the DOM is not rendered at the script execution time.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Splitting number</title>
</head>
<body>
Enter a phone number: in the form (555) 555-5555]
<input name="input" type="text" size="40" id="number" ><br>
<input type="button" value="Split" id="myBtn"><br><br>
Area code: <input name="areaCode" type="text" size="5" id="areaCode"><br>
Number: <input name="number" type="text" size="8" id="anotherNumber">
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JavaScript
var completeNumber = document.getElementById("number");
var x = document.getElementById( "myBtn" );
function parseNumber() {
completeNumber.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
document.getElementById("areaCode").innerHTML = areaCode.toString();
document.getElementById("anotherNumber").innerHTML = tokens2[0].toString() + "-" + tokens2[1].toString();
}
x.addEventListener("click", parseNumber);
I have table with 4 td and user can add row by clicking button and inside each td I have textbox and one of them I have button which open popup window. When user click on this button the popup window will appear with checkboxes after user checked checkboxes the value of them will appear in textbox of parent page that is in same td of button clicked. My problem is when I added new row the value of checked checkboxes only appear in first textbox not in new row, for that I want to assign dynamic id for each added row and post value of checked checkboxes to it. I'm only using Javascript, PHP and html.
This is my parent.php code:
<html>
<head>
<script>
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var rrowCount = tbody.rows.length;
var row = document.createElement("TR");
var td1 = document.createElement("TD");
var strHtml1 = "<INPUT TYPE=\"text\" SIZE=\"255\" MAXLENGTH=\"255\" class=\"textborder\">";
td1.innerHTML=strHtml1 ;
var td2 = document.createElement("TD");
var strHtml2 = "<INPUT TYPE='text' name='ch' id='ch' class=\"textbordersmall\">" +"<INPUT TYPE='text' SIZE=\"30\" MAXLENGTH=\"255\" id='clo' name='clo' class=\"textbordersmall\">";
td2.innerHTML=strHtml2;
var td3 = document.createElement("TD");
var strHtml3 ="<textarea value='' overflow-Y='auto' width='20' height='10' name='txtName' readonly='readonly'></textarea>"+"<input type='submit' value='PLO'/>";
td3.innerHTML=strHtml3 ;
var td4= document.createElement("TD");
var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textbordersmall\">";
td4.innerHTML=strHtml4 ;
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
// append row to table
tbody.appendChild(row);
}}
function deleterow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount==1){return false;}
if (rowCount==2&&num==1){num++;}
else{
num--;
table.deleteRow(rowCount -1);
}}
</script>
</head>
<body>
<form action="pop.php" method="POST" name="login" onsubmit="process(); return false;">
<TABLE ID="tbl" width="570" border="1" cellspacing="0" cellpadding="0" align="center" class="st">
<TH WIDTH="400">Content</TH><TH WIDTH="57">CLO</TH><TH WIDTH="57">PLO</TH> <TH WIDTH="56">Week</TH>
<p align="center">
<INPUT TYPE="Button" onClick="addRow('tbl')" VALUE="Add Row">
<INPUT TYPE="Button" onClick="deleterow('tbl')" VALUE="delete Row"> </p>
</TABLE></form>
</body>
</html>
And this my pop.php code:
<html>
<body>
<input type="checkbox" name="c[]" id="ddlNames" value="E1">E1
<br />
<input type="checkbox" name="c[]" id="ddlNames" value="E2">E2
<br />
<input type="checkbox" name="c[]" id="ddlNames" value="E3">E3
<br />
<p align="center"><input type="submit" value="Select" onclick="SetName()" /></p> </form>
<script type="text/javascript">
function SetName() {
var frm = document.forms[0];
var txt = "";
var i;
for (i = 0; i < frm.length; i++) {
if (frm[i].checked) {
txt = txt + frm[i].value + " ";
}
}
for (s=0; s<200; s++){
var txtName = window.opener.document.getElementById('txtName');
txtName.value = txt;
}
window.close();
}
</script>
<body>
</html>
I am required to write the code using three files, Javascript, HTML, and CSS. I am not sure what is the problem in my code, please help me find the error. The user is to write the range in two textareas and when a button is clicked convert all values starting from the first given number up to the second given number. This is what I have written so far:
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/converter.css"/>
<title>Celsius to Fahrenheit Converter</title>
<script language="JavaScript" src="../js/c2f.js" type="text/javascript">
</script>
</head>
<body>
<h2>Miles to Kilometers Converter</h2>
<form action="">
<p>
<textarea rows="1" name="Input1" id="Input1" cols="10"></textarea>
<textarea rows="1" name="Input2" id="Input2" cols="10"></textarea>
<input type="button" value="Convert" name="B3" onclick="conversionTable()">
<input type="reset" value="Clear" name="B2">
</p>
</form>
<div id="conversion">
</div>
</body>
</html>
JavaScript code:
function conversionTable(tagId, from, to)
{
var first = document.getElementById("Input1");
var second = document.getElementById("Input2");
from =first;
to = second;
var conv = document.getElementById(tagId);
var tab = document.createElement("table");
var bod = document.createElement("tbody");
var thed = document.createElement("thead");
tab.appendChild(thed);
tab.appendChild(bod);
var tr = document.createElement("tr");
thed.appendChild(tr);
var th = document.createElement("th");
tr.appendChild(th);
th.appendChild(document.createTextNode("Miles"));
th = document.createElement("th");
tr.appendChild(th);
th.appendChild(document.createTextNode("Kilometers"));
conv.appendChild(tab);
for(var i=from; i<=to; i++){
tr = document.createElement("tr");
if (i%2==0)
tr.setAttribute("class", "even");
else
tr.setAttribute("class", "odd");
bod.appendChild(tr);
td = document.createElement("td");
tr.appendChild(td);
td.appendChild(document.createTextNode(i));
td = document.createElement("td");
tr.appendChild(td);
td.appendChild(document.createTextNode(c2f(i)));
}
function c2f(c) {return Math.round((c * 1.6093)*10)/10}
}
CSS code:
h2{text-align:center; color:blue; background: #EFEFEF}
body{margin: 4em; width: 400px}
table{margin: 2em; padding: 1em;}
th{background: #EFEFFF}
tr.even {background: #B8B8B8}
tr.odd {background: #E0FFFF}
So again, I am trying to pass the two variables (first and second) into my conversionTable() function.
DEMO HERE
Changes to your html:
<input type="button" value="Convert" name="B3" onclick="conversionTable('conversion')" />
Changes to your js:
from = parseInt(first.value);
to = parseInt(second.value);
and thats it. It should work to what you're looking for.
An exmaple of using plain javascript to build the conversion table:
<form action="">
<p>
<textarea rows="1" name="Input1" cols="10"></textarea>
<textarea rows="1" name="Input2" cols="10"></textarea>
<input type="button" value="Convert" name="B3" onclick="buildConversionTable(this);">
<input type="reset" value="Clear" name="B2">
</p>
</form>
<div id="conversion"></div>
<script>
// Convert miles to kilometres, round to 2 places
function m2k(c) {
return (c * 1.6093).toFixed(2); // returns a string
}
// Return a new element with provided tag name and properties
function newElement(tagName,props) {
var el = document.createElement(tagName);
if (props) {
for (var prop in props) {
if (props.hasOwnProperty(prop)) {
el[prop] = props[prop];
}
}
}
return el;
}
// Return a new text node with text as content
function newText(text) {
return document.createTextNode(text);
}
// Create the conversion table
function buildConversionTable(button) {
var form = button.form;
var from = form.Input1.value;
var to = form.Input2.value;
// Use a temporary element to build the tabel from HTML
var d = document.createElement('div');
d.innerHTML = '<table><thead><tr><th>Miles<th>Kilometres</thead></table>';
var table = d.getElementsByTagName('table')[0];
// Tables always have at least one tbody, no need for tags in the HTML
var tbody = table.tBodies[0]
// Use the convenience of appendChild returning the appended element
for (var i=from, row, cell; i<=to; i++) {
row = tbody.appendChild(newElement('tr',{className: i%2? 'odd':'even'}));
cell = row.appendChild(newElement('td'));
cell.appendChild(newText(i));
cell = row.appendChild(newElement('td'));
cell.appendChild(newText(m2k(i)));
}
// Add the table to the document
document.getElementById('conversion').appendChild(table);
}
</script>
Oh, forgot about the DOM table methods. The for loop adding the rows can be:
for (var i=from, row, cell; i<=to; i++) {
row = tbody.insertRow(-1);
row.insertCell(-1);
row.insertCell(-1);
row.className = i%2? 'odd':'even';
row.cells[0].innerHTML = i;
row.cells[1].innerHTML = m2k(i);
}
I would recommend using jQuery to solve this problem. To include jquery in your project change your html to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/converter.css"/>
<title>Celsius to Fahrenheit Converter</title>
<script language="JavaScript" src="../js/c2f.js" type="text/javascript">
</script>
<!-- Here is your jquery code includer -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<h2>Miles to Kilometers Converter</h2>
<form action="">
<p>
<textarea rows="1" name="Input1" id="Input1" cols="10"></textarea>
<textarea rows="1" name="Input2" id="Input2" cols="10"></textarea>
<input type="button" value="Convert" id="convert" name="B3" />
<input type="reset" value="Clear" name="B2" />
</p>
</form>
<div id="conversion"></div>
</body>
</html>
Using jQuery you can add the click handler to the convert button and in there calculate the from and to and call the conversionTable function. I have revised the conversionTable function to do what you want in much less code using jQuery.
$("#convert").click(function () {
var from = parseInt($("#Input1").val());
var to = parseInt($("#Input2").val());
conversionTable($("#conversion"), from, to);
});
function conversionTable(tag, from, to) {
//Generate the table with the thead of miles and kilometers
var table = $("<table><thead>" +
"<tr><th>Miles</th><th>Kilometers</th></tr>" +
"</thead><tbody></tbody></table>");
//set the tags innerHtml to the table
tag.html(table);
for (var i = from; i <= to; i++) {
var miles = i;
var kilometers = c2f(i);
//Create a tr with the found miles and kilometers
var tr = $("<tr><td>" + miles + "</td><td>" + kilometers + "</td></tr>");
//Add the tr to the tables tbody
table.find("tbody").append(tr);
}
//Find all of the even and odd tr's and give them the appropriate class
table.find("tr:even").addClass("even");
table.find("tr:odd").addClass("odd");
function c2f(c) {
return Math.round((c * 1.6093) * 10) / 10;
}
}
Your css would stay the same as previously posted. You can find a working jsFiddle at http://jsfiddle.net/FsV3j/.
Hi i have created some text boxes dynamically using javascript according to the no of inputs.
I want to save that textbox values to mysql database. am very new to javascript. Thanks in advance.
Here is my code:
<script>
function add_col()
{
var num_box = document.getElementById("num_text").value;
if(num_box)
{
for(var i=0; i<num_box; i++)
{
var tableName1 = document.getElementById("uTable");
var newTR1 = document.getElementById("tr1");
var newName1 = document.createElement("TD");
newName1.innerHTML = "<input type='text' name='site' id='site' value='cell value'>";
var newTR2 = document.getElementById("tr2");
var newPhone1 = document.createElement("TD");
newPhone1.innerHTML = "<input type='text' name='cell' id='cell' value='site value'>";
newTR1.appendChild(newName1);
newTR2.appendChild(newPhone1);
tableName1.appendChild(newTR1);
tableName1.appendChild(newTR2);
document.form1.reset()
}
}
}
</script>
<form name="form1" id="form1" method="post">
<p>
<input type="text" name="num_text" id="num_text"/>
<input type="button" name="Submit" value="INPUT" onclick="add_col();" />
</p>
<p> </p>
<table id="uTable"width="183" border="0">
<tr id="tr1">
<td>Name</td>
</tr>
<tr id="tr2">
<td>Phone</td>
</tr>
</table>
<input type="submit" name="Submit2" value="Insert" />
</form>
You could use an array for your input fields. Such that you could have something like name='cell[]' and name='site[]' then pass the array to the server. Also you may want to look into jquery to help you out with the javascript. Just makes it cleaner and easy to use javascript.
also i would probably forgo using a table. check out definition lists. This link will help:
http://www.maxdesign.com.au/articles/definition/ It would be easier to add or remove elements.
What you need to do is to use [] on input names - so that the whole array is passed to your server side:
newName1.innerHTML = "<input type='text' name='site[]' id='site' value='cell value'>";
newPhone1.innerHTML = "<input type='text' name='cell[]' id='cell' value='site value'>";
You'll also need to specify the submit target in your html:
<form name="form1" id="form1" method="post" target="myscript.php">
Then in your server-side program, you can access the array of submitted values. You didn't specify what server-side technology you're using; assuming, it's PHP and you're submitting the form, you would do something like this:
$sites = $_POST['site'];
$cells = $_POST['cell'];
if(count($sites) != count($cells))
{
// error - number of values don't match
}
elseif(count($sites) == 0)
{
// no data to insert
}
else
{
$cnt = count($sites);
for($i=0; $i<$cnt; $i++)
{
//insert into the table pairs ($sites[$i] - $cells[$i])
}
}
<!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 id="Head1" runat="server">
<script type="text/javascript">
function addElement() {
var ni = document.getElementById('myDiv');
// var numi = document.getElementById('theValue');
// var num = document.getElementById('theValue').value;
var a = '';
for(var i = 1; i <= 3; i++)
{
a += '<input type="text" name="TextBox'+i+'" value="TextBox'+i+'" >';
}
ni.innerHTML = a;
ni.appendChild(ni);
}
</script>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="myDiv">
</div>
<input type="button" id="btnOfficial" value="Add Another TextBox" onclick="addElement();" />
<input type="hidden" value="1" id="theValue" />
</form>
</body>
</html>