Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic Form Elements with Javascript?

    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

  • #2
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, this can be done, but can you give more details on what you need help with?

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    function createCalendar(elem) {
       document.getElementById(elem).innterHTML = 
       "
       <script language = 'JavaScript'>
          ...yourcode....
       </script>
       ";
    }
    I hope that helps some

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm,

    I know what you are saying.

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

    Here is a code chunk,

    Code:
    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,

    Code:
    <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

  • #6
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inserting the dynamically added text values to mySQL database

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •