Codeasearch.com - Search your code with us Login | Register | Contact us
  Forums > Javascript > Dynamic row innerHtml issue in JavaScript
thiyaghuck
Posted on May 4, 2009 		Join Date: November 2008
Location: India ( chennai )
Posts: 14
 
Dynamic row innerHtml issue in JavaScript  


Hi,

Please find my code. I am trying to create dynamic table using innerhtml and my code does it perfectly. Problem with the code is when i type some thing in the input box and click "add row",what i have entered in the input box gets disappears. This happens only in Firefox and running fine in IE. Can anyone fix this?

CODE:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
no=1;
function create_row(){
var x = document.getElementById("input_box");
x.innerHTML += "<table><tr><td>BILLS :</td><td><input value=`available` checked=`checked` id=`reimb_bills"+no+"` name=`reimb_bills"+no+"` type=`radio`></td><td>Available</td><td>... value=`unavailable` id=`reimb_bills"+no+"` name=`reimb_bills"+no+"` type=`radio`></td><td>Unavailable</td><t... DATE :</td><td><input id=`reimb_date"+no+"` name=`reimb_date"+no+"` type=`text`></td><td>BILL NO :</td><td><input id=`reimb_billno"+no+"` name=`reimb_billno"+no+"` type=`text`></td><td>DESCRIPTION :</td><td><input id=`reimb_description"+no+"` onKeyPress=`row_active(id);` name=`reimb_description"+no+"` type=`text`></td></tr></table>";
no++;

}

</script>
</head>

<body onLoad="create_row();create_row();">
<table>
<tr>
<td ><a href="#" onclick="create_row();">ADD MORE FORM</a></td>
</tr>
</table>
<table width="100%">
<form name="myForm" method="post" onsubmit="#">
<tr>
<td>
<div id="input_box"></div>
</td>
</tr>
<tr>
<td><input type="hidden" id="row_count" value="1"></td>
</tr>
<tr>
<td><input type="submit" value="SUBMIT"/></td>
</tr>
</form>
</table>
</body>
</html>

Thanks in Advance,
Thiyaghu CK.
benaya
Posted on May 4, 2009 		Join Date: June 2007
Location: India ( Chennai )
Posts: 90
 
RE : Dynamic row innerHtml issue in JavaScript  

Hi Thiyaghu,
I need to tell something about the browser fights between firefox, ie and others browser.
Most browser wont support others features. Its good advice to have IE for adminside because
IE is not opensource its support all the component and its more support for features.

This code for javascript with fine tune for ur code (IE).
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
function create_row(){
no = (document.getElementById("row_count").value=="") ? 1 : parseInt(document.getElementById("row_count").value) + 1;
document.getElementById("row_count").value = parseInt(no);
for(i=1;i<=parseInt(no);i++) {
$strString ="<table><tr><td>BILLS :</td><td>";
$strString +="<input value='available' checked id='reimb_bills"+i+"' name='reimb_bills"+i+"' type='radio'></td>";
$strString +="<td>Available</td><td><input value='unavailable' id='reimb_bills"+i+"' name='reimb_bills"+i+"' type='radio'></td>";
$strString +="<td>Unavailable</td><td>DATE :</td><td><input id='reimb_date"+i+"' name='reimb_date"+i+"' type='text'></td>";
$strString +="<td>BILL NO :</td><td><input id='reimb_billno"+i+"' name='reimb_billno"+i+"' type='text'></td><td>DESCRIPTION :</td>";
$strString +="<td><input id='reimb_description"+i+"' name='reimb_description"+i+"' type='text'></td></tr></table>";
}
document.getElementById("input_box").innerHTML += $strString;
}

</script>
</head>

<body>
<table>
<tr>
<td ><a href="#" onClick="create_row();">ADD MORE FORM</a></td>
</tr>
</table>
<table width="100%">
<form name="myForm" method="post" action="test.php">
<tr>
<td>
<div id="input_box"></div>
</td>
</tr>
<tr>
<td><input type="hidden" id="row_count" name="row_cout">
</td>
</tr>
<tr>
<td><input type="submit" value="SUBMIT"/></td>
</tr>
</form>
</table>
</body>
</html>






This code for serverside (PHP)

<?php
for($i=1;$i<=$_REQUEST["row_cout"];$i++) {
if(trim($_REQUEST["reimb_billno".$i])!="") {
echo $_REQUEST["reimb_billno".$i]."<br />"; }
}
?>
 Hot Discussion
Go Tech launches Android tablet for Rs 3,999...
Sony targets retailers with quick sales pitches and rew...
Share and discover new activities with Google Schemer...
Samsung gets 9 mn preorders for Galaxy S3: Report...
Google revamps search engine to think like a person...
 
 Discussion Topics
IT News
Php
Javascript
Technology Updates
Asp.Net
MySql
Ajax
Html
Fedora
Software Testing
Asp
Java
General
Flash
Ruby on Rails
 
Copyrights © 2007-2012 Codeasearch Codeasearch.com @ facebook | About us | Contact us | iWannaSearch