...

View Full Version : Dynamic Form Elements with Javascript?



Namron
12-15-2006, 02:23 PM
Hi,

I've been working on a PHP page which uses some DOM elements to dynamically create form elements, formated through rows of a table. For example, I have three text boxes, one each in column 1, column 2, and column 3. When a user presses "another addition", the code generates another row with interated variables to distinguish the form elements.

That works well. Now, for one of the text box elements in each row, I would like to have a javascript pop-up calendar associated to populate the box easily with a date.

Is this possible to generate dynamically with DOM/javascript/php?

Thanks,
Namron

SCook
12-15-2006, 04:09 PM
Yes, this can be done, but can you give more details on what you need help with?

Namron
12-15-2006, 04:17 PM
Ok,

To get a little more in depth. Basically, I want the ability to add several form elements, lets say three text boxes, eg: text1, text2, text3. There is a javascript button entitled something like "add a new row", which upon execution, will append another row onto the table (or div if you will), holding another set up text boxes. Something like this structure:

textbox1row1, textbox2row1, textbox3row1
textbox1row2, textbox2row2, textbox3row2, etc.

I have this accomplished and can dynamically build this sort of structure to any length (and remove any elements).

Now to make this feature easier to use, one of these fields is a date. I want to include a javascript "pop-up" calendar to populate the textbox field with the chosen date (i'm sure you've all seen those, and I have one to use). When building this dynamic structure, a block such as this <script>DateInput('date', true, 'YYYY-MM-DD')</script> needs to take the place of one of my text boxes, effetively calling a function that replaces it with a nice neat calendar for interaction. How can I dynamically include a <script></script> block, when this code is generated itself by javascript and DOM elements?

Thanks,
Namron

SCook
12-15-2006, 04:39 PM
Well, if I understand you correctly, you want to replace the text field with this object. So, what you should do is set up a function that alters the innerHTML of the object in which the text field resides, when that textfield is focused.

So, you might do onFocus = "createCalendar9'this');"
where this is the textfield. Then your function would be something like:



function createCalendar(elem) {
document.getElementById(elem).innterHTML =
"
<script language = 'JavaScript'>
...yourcode....
</script>
";
}


I hope that helps some

Namron
12-15-2006, 04:55 PM
Hmmm,

I know what you are saying.

I'm not sure if that will work in this case.

Here is a code chunk,


var mainDivName = 'eventDates';

function addEvent()
{
var ni = document.getElementById(mainDivName);

var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;



var divIdName = "eventDate"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<table><tr><td width=80><script>DateInput('date', true, 'YYYY-MM-DD')</script></td><td width=80><input type=\"text\" name=\"stime\" size=\"7\"></td><td width=80><input type=\"text\" name=\"etime\" size=\"7\"></td><td></td></tr><tr><td colspan=4><input type=\"text\" name=\"ddesc\" size=\"45\"></td></tr></table>Element Number "+num+" has been added! <a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove the div &quot;"+divIdName+"&quot;</a>";


ni.appendChild(newdiv);

}

Basically I am adding event dates (a date, and two times) where an event could have more then one date. After messing around with several options, i've tried to put this in an innerHTML as above. This has very limited success (very limited) as the <script> tags execute upon the event code being activated.

Here is the full php page to try,


<html><head>
<title>Add/Remove child: Javascript</title>

<script type="text/javascript" src="calendarDateInput.js"></script>
<script type="text/javascript">
<!--

var mainDivName = 'eventDates';

function addEvent()
{
var ni = document.getElementById(mainDivName);

var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;



var divIdName = "eventDate"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<table><tr><td width=80><script>DateInput('date', true, 'YYYY-MM-DD')</script></td><td width=80><input type=\"text\" name=\"stime\" size=\"7\"></td><td width=80><input type=\"text\" name=\"etime\" size=\"7\"></td><td></td></tr><tr><td colspan=4><input type=\"text\" name=\"ddesc\" size=\"45\"></td></tr></table>Element Number "+num+" has been added! <a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove the div &quot;"+divIdName+"&quot;</a>";


ni.appendChild(newdiv);

}

function removeEvent(divNum)
{
var d = document.getElementById(mainDivName);
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

//-->
</script>

</head>

<body>
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addEvent();">Add Some Elements</a></p>


<div id="eventDates"> </div>

</body>
</html>

Remove the script tags from the innerHTML to see it working similar to what I want, minus the javascript calendar addition.

Thanks,
Namron

hoodirash
01-24-2007, 03:13 PM
Hello I am new in Javascripting and web database. i use the previous code for adding dynamic combobox and texts. my question is that how can i insert their selection values into my database( i Use PHP and MySQL). please help me on this since i am new hired and i don't want to fail on my first assignment.
Regards to everyone.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum