943,694 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > create dynamic fields
Ad:
Permalink
Jul 3rd, 2009
0

create dynamic fields

Expand Post »
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....
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Permalink
Jul 4th, 2009
0

Re: create dynamic fields

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Window-Target" content="_top" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  12. <title>Free Live Help!</title>
  13. <style id="css21" type="text/css" media="screen">
  14. /* <![CDATA[ */
  15. table {
  16.   margin : 0 auto;
  17.   color : #405060;
  18.   letter-spacing : 2px;
  19.   border : 1px solid #aaa;
  20.   empty-cells : show;
  21.   border-collapse : collapse;
  22.   width : 98%; }
  23.  
  24. td { 
  25.   padding : .500em 1em .500em 1em; 
  26.   border-bottom : 1px solid #aaa; }
  27.  
  28. td:first-child { 
  29.   background-color : #f7f7f7; 
  30.   text-align : center; 
  31.   width : 25%; 
  32.   border-right : medium groove #aaa; 
  33.   padding : 0; }
  34.  
  35. tr { line-height : 1.6 }
  36.  
  37. /* ]]> */
  38. </style>
  39. <script id="javascriptV15" type="text/javascript">
  40. // <![CDATA[
  41. var div;
  42. var transform = function() {
  43. var input = "<label>Drive Label: <input type=\"text\" size=\"30\" value=\"\" onchange=\"div.innerHTML = '[ ' + this.value + ' ]';\" /></label>";
  44.    this.innerHTML = input;
  45. };
  46. var convert = function() {
  47.    div = (( document.getElementById ) ? document.getElementById("inputTest") : document.all.inputTest );
  48.  
  49.    div.onclick = transform;
  50. };
  51. window.onload = convert;  
  52. // ]]>
  53. </script>
  54. </head>
  55. <body>
  56. <form method="post" id="form1" action="#" onsubmit="return false;">
  57. <div id="inputTest">[ CLICK &amp; ENTER TEXT ]</div>
  58. </form>
  59. </body>
  60. </html>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jul 4th, 2009
0

Re: create dynamic fields

You can use this simple method to add new text boxes: -
javascript Syntax (Toggle Plain Text)
  1. /* container   - HTML element in which textBox needs to be added
  2.     labelString - (optional) Label string for text box
  3.     textValue   - (optional) Text value for text box
  4. */
  5. function addNewTextBox(container, labelString, textValue) {
  6.     if(!container) {
  7.         return false;
  8.     }
  9.     // Create Label
  10.     var label = document.createElement('label');
  11.     label.value = (lableString ? labelString : 'Label');
  12.  
  13.     // Create Text box
  14.     var textBox = document.createElement('input');
  15.     textBox.type = 'text';
  16.     label.value = (textValue ? textValue: '');
  17.  
  18.     container.appendChild(label);
  19.     container.appendChild(textBox);
  20.  
  21.     return textBox;
  22. }
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Permalink
Jul 5th, 2009
0

Re: create dynamic fields

thanks
i'll try these and post back...
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Permalink
Jul 7th, 2009
0

Re: create dynamic fields

Click to Expand / Collapse  Quote originally posted by Luckychap ...
You can use this simple method to add new text boxes: -
javascript Syntax (Toggle Plain Text)
  1. /* container   - HTML element in which textBox needs to be added
  2.     labelString - (optional) Label string for text box
  3.     textValue   - (optional) Text value for text box
  4. */
  5. function addNewTextBox(container, labelString, textValue) {
  6.     if(!container) {
  7.         return false;
  8.     }
  9.     // Create Label
  10.     var label = document.createElement('label');
  11.     label.value = (lableString ? labelString : 'Label');
  12.  
  13.     // Create Text box
  14.     var textBox = document.createElement('input');
  15.     textBox.type = 'text';
  16.     label.value = (textValue ? textValue: '');
  17.  
  18.     container.appendChild(label);
  19.     container.appendChild(textBox);
  20.  
  21.     return textBox;
  22. }
can you please explain this to me in a greater detail....
the code i have which needs to be repeated is :

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  <table width="85%" border=0 align="center" cellPadding=2 cellSpacing=1 bgcolor="#ffffff" id=TABLE01>				  
  2. <td height="25" bgColor=#eeeeee class='cellDesc' width="35%"><font color="BLACK"><strong>SHARED DRIVE ACCESS </strong></font></td>
  3.  
  4. <tr>
  5. 					<td height="25" bgColor=#eeeeee class='cellDesc' width="35%">Drive Name<font color='#ff0000'>*</font></td>
  6. 					<td bgColor=#eeeeee>
  7. 						<%	if len(sessionNum)>0 then %>
  8. 								<input name='drive_name' class='cellData' maxlength="30" style="WIDTH: 302px; HEIGHT: 17px" size=45 title="Enter Number" 
  9. 								value="<%=rsData.fields("drive_name")%>" tabIndex=1  >
  10. 						<%	ELSE %>
  11. 								<input name='drive_name' class='cellData' maxlength="30" style="WIDTH: 302px; HEIGHT: 17px" size=45 title="Enter Ticket Number" tabIndex=1>
  12. 						<%	END IF %>
  13. 					</td>
  14. </tr>						
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22. <tr>
  23. 					<td height="25" bgColor=#eeeeee class='cellDesc' width="35%">Drive Access Add, Ticket Number<font color='#ff0000'>*</font></td>
  24. 					<td bgColor=#eeeeee >
  25.  
  26. 						<%	if len(sessionNum)>0 then %>
  27. 								<input name='ge_sso_id' class='cellData'  maxlength="30" style="WIDTH: 302px; HEIGHT: 17px" size=45 title="Enter Drive " 
  28. 								value="<%=rsData.fields("drive_add_ticket_no")%>" >
  29. 						<%	ELSE %>
  30. 								<input name='drive_add_ticket_no' class='cellData'  maxlength="30" style="WIDTH: 302px; HEIGHT: 17px" size=45 title="Enter Drive" value=""  >
  31. 						<%	END IF %>
  32. 					</td>
  33. </tr>		
  34.  
  35.  
  36. <!-- Date Of Request -->
  37.  
  38. 				<tr bgColor=#eeeeee>
  39. 					<td width="35%" class='cellDesc'>Date Of Drive Add Request <font color='#ff0000'>*</font></td>
  40. 					<td>
  41. 						<%	if len(sessionNum)>0 then %>
  42. 							<input name='drive_add_date' class='cellData' readonly title="Date Of Request" 
  43. 							value= <%=doj%> >
  44. 							<A onmouseover="window.status ='Date Picker';return true;" onmouseout="window.status='';return true;" href="javascript:show_calendar('access.drive_add_date','mm-dd-yyyy');" > 
  45. 								<IMG src="images/calendar.png" align=middle border=0 tabIndex=9>
  46. 							</A> 
  47. 						<%	ELSE %>
  48. 							<input name='drive_add_date' class='cellData' readonly title="Date Of Request" >
  49. 							<A onmouseover="window.status ='Date Picker';return true;" onmouseout="window.status='';return true;" href="javascript:show_calendar('access.drive_add_date','mm-dd-yyyy');" > 
  50. 								<IMG src="images/calendar.png" align=middle border=0 tabIndex=9>
  51. 							</A> 
  52. 						<%	END IF %>	
  53. 					</td>
  54.  
  55. 				</tr>
  56.  
  57.  
  58.  
  59. </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..
Last edited by aashishn86; Jul 7th, 2009 at 6:44 am.
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Permalink
Jul 9th, 2009
0

Re: create dynamic fields

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

Sorry
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: prOblem wIth DynAmiC aDDition Of Rows !!
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Form button just stopped working





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC