AJAX

Enter text into newly created dynamic text box

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2009

Posts: 1

Reputation: indu.y is an unknown quantity at this point

Solved Threads: 0

indu.y

Offline

Newbie Poster

Enter text into newly created dynamic text box

Jul 9th, 2009

hi everybody ,this is my first post..

Am creating a dynamic text box along with datepicker image.. when I enter newdate into the text box, it simply goes to previous textbox and updating the textfield. How to enter the date into the newly created text box??? And also once I complete the first row data , that row should be disabled..
Any help would be higly appreciated...
thanks
indu

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Enter text into newly created dynamic text box

Jul 11th, 2009

Try this :

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#cssl21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-Target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="ccsl21" type="text/css" media="screen">
/* <![CDATA[ */
form {
   padding : 1em;
   margin : 0 0 0 1em;
   border : 1px solid #ccc; }
 
input[type="button"], input {
   border : thin solid #ccc;
   display : block;
   background-image : none;
   background-color : #fff;
   color : #696969;
   vertical-align : middle;
   height : 22px; }
 
input[type="text"] {
   letter-spacing : 3px;
   color : #365d95; }
 
label { color : #808080; }
 
table { border : none; border-collapse : collapse; }
td { padding-right : 1em; width auto; }
.borderL { border-left : 1px solid #ccc; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var counter = 1;
var modern = Boolean( document.getElementById );
var ie = Boolean( document.all && !modern );
var disable = function() {
var num = parseInt(this.id.match(/\d+/i)[ 0 ]);
var previous = (( modern ) ? document.getElementById( "txt" + (( num ) - 1 )) : document.all[ "txt" + (( num ) - 1 ) ] );
   previous.value = this.value;
   this.disabled = 1;
   create();
};
var create = function() {
var now = new Date();
var dateObj = [ " January ", " February ", " March ", " April ", " May ", " June ", " July ", " August ", " September ", " October ", " November ", " December " ][now.getMonth()] + (( now.getDate() < 10 ) ? "0" : "" ) + now.getDate() + ", " + now.getFullYear();
var field;
var labels;
var fieldTxt;
var table = (( modern ) ? document.getElementById("table") : (( ie ) ? document.all[ "table" ] : undefined ));
   if ( table ) {
 
   var $row = table.rows;
   var cLen = $row[0].cells.length;
      try { 
         if ( document.createElement ) {
         labels = document.createElement("label")
         var textLabel = document.createTextNode( "TextField #" + (( counter ) + 1 ));
         labels.appendChild( textLabel );
         field = document.createElement("input");
         field.id = "txt" + counter;
         field.name = "txt" + counter;
         field.type = "text";
         field.size = 30;
         field.value = dateObj;
         field.onchange = disable;
         table.insertRow( counter );
            for ( var i = 0; i < cLen; i++ ) {
            $row[counter].insertCell( i );
            $row[counter].cells( i ).appendChild((( i < 1 ) ? labels : (( i < 2 ) ? field : null )));
            } 
         } 
      } catch( e ) {
      field = "unable to create object, please upgrade your browser!";
      alert((( e.description ) ? e.description : (( e.message ) ? e.message : field )));
      return;
      } ++counter;
   }
}; 
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="form1" action="#" method="post" onsubmit="return false;">
<h3 style="margin-top : 0; color : #808080;">JAVASCRIPT LIVE DEMO!</h3>
<table id="table" frame="void" rules="none" summary="JavaScript Demo :: Creating Dynamic field">
<tr><td><label for="txt0">TextField #1</label></td>
<td><input type="text" id="txt0" name="txt0" value="" disabled="disabled" size="30" /></td>
<td><input type="button" id="btn0" name="btn0" value="- Add Field -" onclick="create();" /></td></tr>
</table>
</form>
</div>
</body>
</html>
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#cssl21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-Target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="ccsl21" type="text/css" media="screen">
/* <![CDATA[ */
form {
   padding : 1em;
   margin : 0 0 0 1em;
   border : 1px solid #ccc; }

input[type="button"], input {
   border : thin solid #ccc;
   display : block;
   background-image : none;
   background-color : #fff;
   color : #696969;
   vertical-align : middle;
   height : 22px; }

input[type="text"] {
   letter-spacing : 3px;
   color : #365d95; }

label { color : #808080; }

table { border : none; border-collapse : collapse; }
td { padding-right : 1em; width auto; }
.borderL { border-left : 1px solid #ccc; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var counter = 1;
var modern = Boolean( document.getElementById );
var ie = Boolean( document.all && !modern );
var disable = function() {
var num = parseInt(this.id.match(/\d+/i)[ 0 ]);
var previous = (( modern ) ? document.getElementById( "txt" + (( num ) - 1 )) : document.all[ "txt" + (( num ) - 1 ) ] );
   previous.value = this.value;
   this.disabled = 1;
   create();
};
var create = function() {
var now = new Date();
var dateObj = [ " January ", " February ", " March ", " April ", " May ", " June ", " July ", " August ", " September ", " October ", " November ", " December " ][now.getMonth()] + (( now.getDate() < 10 ) ? "0" : "" ) + now.getDate() + ", " + now.getFullYear();
var field;
var labels;
var fieldTxt;
var table = (( modern ) ? document.getElementById("table") : (( ie ) ? document.all[ "table" ] : undefined ));
   if ( table ) {

   var $row = table.rows;
   var cLen = $row[0].cells.length;
      try { 
         if ( document.createElement ) {
         labels = document.createElement("label")
         var textLabel = document.createTextNode( "TextField #" + (( counter ) + 1 ));
         labels.appendChild( textLabel );
         field = document.createElement("input");
         field.id = "txt" + counter;
         field.name = "txt" + counter;
         field.type = "text";
         field.size = 30;
         field.value = dateObj;
         field.onchange = disable;
         table.insertRow( counter );
            for ( var i = 0; i < cLen; i++ ) {
            $row[counter].insertCell( i );
            $row[counter].cells( i ).appendChild((( i < 1 ) ? labels : (( i < 2 ) ? field : null )));
            } 
         } 
      } catch( e ) {
      field = "unable to create object, please upgrade your browser!";
      alert((( e.description ) ? e.description : (( e.message ) ? e.message : field )));
      return;
      } ++counter;
   }
}; 
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="form1" action="#" method="post" onsubmit="return false;">
<h3 style="margin-top : 0; color : #808080;">JAVASCRIPT LIVE DEMO!</h3>
<table id="table" frame="void" rules="none" summary="JavaScript Demo :: Creating Dynamic field">
<tr><td><label for="txt0">TextField #1</label></td>
<td><input type="text" id="txt0" name="txt0" value="" disabled="disabled" size="30" /></td>
<td><input type="button" id="btn0" name="btn0" value="- Add Field -" onclick="create();" /></td></tr>
</table>
</form>
</div>
</body>
</html>