hiii
i have a field called
DRIVE ACCESS
under it user enters
PATH
DATE

what i want is that when user click on +
two new boxes open which allow him to enter the details for second DRIVE


basically i want to enter text boxes dynamically using javascript....

any ideas
thanks....

Recommended Answers

All 5 Replies

I'm really out of concept, but i hope this help:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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="css21" type="text/css" media="screen">
/* <![CDATA[ */
table {
  margin : 0 auto;
  color : #405060;
  letter-spacing : 2px;
  border : 1px solid #aaa;
  empty-cells : show;
  border-collapse : collapse;
  width : 98%; }

td { 
  padding : .500em 1em .500em 1em; 
  border-bottom : 1px solid #aaa; }

td:first-child { 
  background-color : #f7f7f7; 
  text-align : center; 
  width : 25%; 
  border-right : medium groove #aaa; 
  padding : 0; }

tr { line-height : 1.6 }

/* ]]> */
</style>
<script id="javascriptV15" type="text/javascript">
// <![CDATA[
var div;
var transform = function() {
var input = "<label>Drive Label: <input type=\"text\" size=\"30\" value=\"\" onchange=\"div.innerHTML = '[ ' + this.value + ' ]';\" /></label>";
   this.innerHTML = input;
};
var convert = function() {
   div = (( document.getElementById ) ? document.getElementById("inputTest") : document.all.inputTest );

   div.onclick = transform;
};
window.onload = convert;  
// ]]>
</script>
</head>
<body>
<form method="post" id="form1" action="#" onsubmit="return false;">
<div id="inputTest">[ CLICK &amp; ENTER TEXT ]</div>
</form>
</body>
</html>

You can use this simple method to add new text boxes: -

/* container   - HTML element in which textBox needs to be added
    labelString - (optional) Label string for text box
    textValue   - (optional) Text value for text box
*/
function addNewTextBox(container, labelString, textValue) {
    if(!container) {
        return false;
    }
    // Create Label
    var label = document.createElement('label');
    label.value = (lableString ? labelString : 'Label');
    
    // Create Text box
    var textBox = document.createElement('input');
    textBox.type = 'text';
    label.value = (textValue ? textValue: '');

    container.appendChild(label);
    container.appendChild(textBox);

    return textBox;
}

thanks
i'll try these and post back...

You can use this simple method to add new text boxes: -

/* container   - HTML element in which textBox needs to be added
    labelString - (optional) Label string for text box
    textValue   - (optional) Text value for text box
*/
function addNewTextBox(container, labelString, textValue) {
    if(!container) {
        return false;
    }
    // Create Label
    var label = document.createElement('label');
    label.value = (lableString ? labelString : 'Label');
    
    // Create Text box
    var textBox = document.createElement('input');
    textBox.type = 'text';
    label.value = (textValue ? textValue: '');

    container.appendChild(label);
    container.appendChild(textBox);

    return textBox;
}

can you please explain this to me in a greater detail....
the code i have which needs to be repeated is :

<table width="85%" border=0 align="center" cellPadding=2 cellSpacing=1 bgcolor="#ffffff" id=TABLE01>				  
<td height="25" bgColor=#eeeeee class='cellDesc' width="35%"><font color="BLACK"><strong>SHARED DRIVE ACCESS </strong></font></td>

<tr>
					<td height="25" bgColor=#eeeeee class='cellDesc' width="35%">Drive Name<font color='#ff0000'>*</font></td>
					<td bgColor=#eeeeee>
						<%	if len(sessionNum)>0 then %>
								<input name='drive_name' class='cellData' maxlength="30" style="WIDTH: 302px; HEIGHT: 17px" size=45 title="Enter Number" 
								value="<%=rsData.fields("drive_name")%>" tabIndex=1  >
						<%	ELSE %>
								<input name='drive_name' class='cellData' maxlength="30" style="WIDTH: 302px; HEIGHT: 17px" size=45 title="Enter Ticket Number" tabIndex=1>
						<%	END IF %>
					</td>
</tr>						
				

 




<tr>
					<td height="25" bgColor=#eeeeee class='cellDesc' width="35%">Drive Access Add, Ticket Number<font color='#ff0000'>*</font></td>
					<td bgColor=#eeeeee >
					
						<%	if len(sessionNum)>0 then %>
								<input name='ge_sso_id' class='cellData'  maxlength="30" style="WIDTH: 302px; HEIGHT: 17px" size=45 title="Enter Drive " 
								value="<%=rsData.fields("drive_add_ticket_no")%>" >
						<%	ELSE %>
								<input name='drive_add_ticket_no' class='cellData'  maxlength="30" style="WIDTH: 302px; HEIGHT: 17px" size=45 title="Enter Drive" value=""  >
						<%	END IF %>
					</td>
</tr>		


<!-- Date Of Request -->

				<tr bgColor=#eeeeee>
					<td width="35%" class='cellDesc'>Date Of Drive Add Request <font color='#ff0000'>*</font></td>
					<td>
						<%	if len(sessionNum)>0 then %>
							<input name='drive_add_date' class='cellData' readonly title="Date Of Request" 
							value= <%=doj%> >
							<A onmouseover="window.status ='Date Picker';return true;" onmouseout="window.status='';return true;" href="javascript:show_calendar('access.drive_add_date','mm-dd-yyyy');" > 
								<IMG src="images/calendar.png" align=middle border=0 tabIndex=9>
							</A> 
						<%	ELSE %>
							<input name='drive_add_date' class='cellData' readonly title="Date Of Request" >
							<A onmouseover="window.status ='Date Picker';return true;" onmouseout="window.status='';return true;" href="javascript:show_calendar('access.drive_add_date','mm-dd-yyyy');" > 
								<IMG src="images/calendar.png" align=middle border=0 tabIndex=9>
							</A> 
						<%	END IF %>	
					</td>

				</tr>



</table>

i need this to be repeated as required and then
also Save these values in the database
i can't think how am i gonna send multiple enteries into the database..

You are doing all the manipulation at server side, where javascript can not help you.

Sorry :(

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.