www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: [RESOLVED] Create Element

  1. #1
    Join Date
    Apr 2006
    Posts
    52

    resolved [RESOLVED] Create Element

    Hi,
    I'm very new to java script.

    I have the following INPUT type
    Code:
    <input type="Text" name="interviewdate" maxlength="15" size="15" value="<%=intdatein%>"><a href="javascript:NewCal('interviewdate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
    It's basically a text input box with a label that when clicked a popup Calendar is displayed which lets the user select a date, which is then returned to the text input box.. This script works fine on the HTML.

    I want to create this input box and call the Calendar script from another javascript function using the following code.

    Code:
    var inp2 = document.createElement('INPUT');
    inp2.setAttribute('name','interviewdate'+Table1RowId);
    inp2.setAttribute('maxlength','15'); 
    inp2.setAttribute('size','15');
    I'm not sure how to code the HTML line above into this script using the createelement function.

    I've looked at pasting the code directly into the createElement function but it doesnt work, I've also tried to mess about with InnerHTML.. ie. inp2.InnerHTML("]<input type="Text" name="interviewdate" maxlength="15" size="15" value="<%=intdatein%>"><a href="javascript:NewCal...blahblah")

    but this doenst work..
    anyone help me please?

    CJ.

  2. #2
    Join Date
    May 2006
    Location
    Udupi,India
    Posts
    46
    Try this

    PHP Code:
    document.innerHTML='<input type="Text" name="interviewdate" maxlength="15" size="15" value="<%=intdatein%>"><a href="javascript:NewCal('interviewdate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>'

  3. #3
    Join Date
    Apr 2006
    Posts
    52
    Hi,
    thanks for this.. but I need to set it to a variable. as I can creating a dynamic table with dymanic INPUT elements.

  4. #4
    Join Date
    May 2006
    Location
    Udupi,India
    Posts
    46
    In ur HTMl add following line
    Code:
    <input type="Text" name="interviewdate" maxlength="15" size="15" value="" onclick="javascript:NewCal('interviewdate','ddmmyyyy');">
    then in ur javascript...

    PHP Code:
    NewCal('interviewdate','ddmmyyyy')
    {
    get the date pressed---

    var 
    in=document.getElementsByTagName('input');
    in.setAttribute('value',"pressed date");

    I am not sure whether this helps u or not.. Any ways let me know if it works..

  5. #5
    Join Date
    May 2006
    Location
    Udupi,India
    Posts
    46
    Please let me know whether i have misunderstood ur problem

  6. #6
    Join Date
    Apr 2006
    Posts
    52
    Here's the code.

    Code:
    <head>
    <script language="javascript" type="text/javascript" src="datetimepicker.js">
    </script>
    
    function addRow_table1()
    {
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0]; 
    
    var row = document.createElement('TR'); 
    
    var cell1 = document.createElement('TD'); 
    var cell2 = document.createElement('TD'); 
    var cell3 = document.createElement('TD'); 
    var cell4 = document.createElement('TD'); 
    var cell5 = document.createElement('TD'); 
    
    var inp1 =  document.createElement("<textarea name='awarding' cols='30' rows='5'></textarea>");
    
    //var inp2 = document.createElement("<input type='Text' name='interviewdate' maxlength='15' size='15' value='<%=intdatein%>'><img src='cal.gif' width='16' height='16' border='0' alt='Pick a date'></img>"); 
    var inp2 = document.createElement('INPUT'); 
    
    var inp3 = document.createElement('INPUT'); 
    var inp4 = document.createElement("<textarea name='recommend' cols='30' rows='5'></textarea>"); 
    var inp5 = document.createElement('INPUT'); 
    
    inp1.setAttribute('name','awarding'+Table1RowId);
    inp2.setAttribute('type','text'); 
    inp2.setAttribute('name','awarddatet'+Table1RowId);
    inp2.setAttribute('maxlength','15'); 
    inp2.setAttribute('size','15'); 
    inp3.setAttribute('type','text'); 
    inp3.setAttribute('name','result'+Table1RowId);
    inp4.setAttribute('name','recommend'+Table1RowId);
    inp5.setAttribute('type','button'); 
    inp5.setAttribute('value','Delete'); 
    inp5.onclick=function(){delRow_table1(this);} 
    
    
    //cell1.innerHTML = gRowId; 
    cell1.appendChild(inp1); 
    cell2.appendChild(inp2); 
    cell3.appendChild(inp3); 
    cell4.appendChild(inp4); 
    cell5.appendChild(inp5); 
    
    row.appendChild(cell1); 
    row.appendChild(cell2); 
    row.appendChild(cell3); 
    row.appendChild(cell4); 
    row.appendChild(cell5); 
    
    tbody.appendChild(row); 
    Table1RowId++; 
    }
    </script>
    </head>
    <body>
    <table width="78%" border="1" id="table1">
      <tbody>
        <tr> 
          <td><div align="center"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Awarding 
              Body (IIP. SQMS, HMI, SQA, CISCO, Microsoft, EFQM)</font></strong></div></td>
          <td><div align="center"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Date</font></strong></div></td>
          <td><div align="center"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Result 
              (if Applicable)</font></strong></div></td>
          <td><div align="center"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Recommendations 
              / Areas for Improvement (If Applicable)</font></strong></div></td>
    		  <td><div align="center"><strong></strong></div></td>
        </tr>
    	</tbody>
      </table>
       	<input type="button" value="Insert Row" name="b1" onClick="addRow_table1();">
    </body>
    As you can see from above.. I have a table named TABLE1 with a button "ADD ROW" When clicked, a new row is created dynamically on the table. I want to add the datetime picker javascript in the new row.. in this case variable named INP2. In the code above for INP2 I have commented out the code I entered that I thought would have worked.. but it doesnt..
    thanks

    CJ.
    Last edited by cjonline; 06-12-2006 at 05:52 AM.

  7. #7
    Join Date
    May 2006
    Location
    Udupi,India
    Posts
    46
    ok.. i wil tackle the problem and get back to u soon..Is it urgent ,because i am bit busy now

  8. #8
    Join Date
    May 2006
    Location
    Udupi,India
    Posts
    46
    if possible post ur calender code as well

  9. #9
    Join Date
    Apr 2006
    Posts
    52
    Sorry to hastle you, but it's getting urgent now.

    Dont worry about the calender javascript. it all works fine when called from HTML.

    ie.

    Code:
    <input type="Text" name="interviewdate" maxlength="15" size="15" value=""><a href="javascript:NewCal('interviewdate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
    I need to be able to add that code dynamically when a new row is added to the table when button Add Row is clicked.

    Thanks.
    CJ

  10. #10
    Join Date
    May 2006
    Location
    Udupi,India
    Posts
    46

    Smile

    Try this one...


    HTML Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 //EN"> 
    <html>
    <head>
    <script language="javascript" type="text/javascript">
    
    function addRow_table1()
    {
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
    
    var row = document.createElement('TR');
    
    var cell1 = document.createElement('TD');
    var cell2 = document.createElement('TD');
    var cell3 = document.createElement('TD');
    var cell4 = document.createElement('TD');
    var cell5 = document.createElement('TD');
    
    var inp1 =  document.createElement('textarea');// name='awarding' cols='30' rows='5'></textarea>");
    
    //var inp2 = document.createElement("<input type='Text' name='interviewdate' maxlength='15' size='15' value='<%=intdatein%>'><img src='cal.gif' width='16' height='16' border='0' alt='Pick a date'></img>");
    var inp2 = document.createElement('INPUT');
    
    var inp3 = document.createElement('INPUT');
    var inp4 = document.createElement('textarea');// name='recommend' cols='30' rows='5'></textarea>");
    var inp5 = document.createElement('INPUT');
    
    inp1.setAttribute('name','awarding');//+Table1RowId);
    inp2.setAttribute('type','text');
    inp2.setAttribute('name','awarddatet');//+Table1RowId);
    inp2.setAttribute('maxlength','15');
    inp2.setAttribute('size','15');
    inp2.setAttribute('onClick','javascript:NewCal('interviewdate','ddmmyyyy');');
    inp3.setAttribute('type','text');
    inp3.setAttribute('name','result');//+Table1RowId);
    inp4.setAttribute('name','recommend');//+Table1RowId);
    inp5.setAttribute('type','button');
    inp5.setAttribute('value','Delete');
    inp5.onclick=function(){delRow_table1(this);}
    
    
    //cell1.innerHTML = gRowId;
    cell1.appendChild(inp1);
    cell2.appendChild(inp2);
    cell3.appendChild(inp3);
    cell4.appendChild(inp4);
    cell5.appendChild(inp5);
    
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    row.appendChild(cell5);
    
    tbody.appendChild(row);
    //Table1RowId++;
    }
    </script>
    </head>
    <body>
    <table width="78%" border="1" id="table1">
      <tbody>
        <tr>
          <td><div align="center"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Awarding
              Body (IIP. SQMS, HMI, SQA, CISCO, Microsoft, EFQM)</font></strong></div></td>
          <td><div align="center"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Date</font></strong></div></td>
          <td><div align="center"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Result
              (if Applicable)</font></strong></div></td>
          <td><div align="center"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Recommendations
              / Areas for Improvement (If Applicable)</font></strong></div></td>
    		  <td><div align="center"><strong></strong></div></td>
        </tr>
    	</tbody>
      </table>
       	<input type="button" value="Insert Row" name="b1" onClick="javascript:addRow_table1();">
    </body>
    </html>
    Copy entire code and try

  11. #11
    Join Date
    Apr 2006
    Posts
    52
    Hi, thanks for spending the time on this one, but first I got error ")" expected.
    I changed from

    inp2.setAttribute('onClick','javascript:NewCal('interviewdate','ddmmyyyy');');

    to

    inp2.setAttribute('onClick',"javascript:NewCal('interviewdate','ddmmyyyy');");

    That seemed to fix that error, however, there is no where to click to luanch the Datetime picker..? in the html example I posted ,the dtpicker has a calender image (a href) that when clicked opens a new window containing the dtpicker

    Code:
    <input type="Text" name="interviewdate" maxlength="15" size="15" value="">
    <a href="javascript:NewCal('interviewdate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

  12. #12
    Join Date
    May 2006
    Location
    Udupi,India
    Posts
    46
    onclicking date text box it should fire NewCal function... after adding row click on textbox in date column

  13. #13
    Join Date
    Apr 2006
    Posts
    52
    Hi,
    Nothing happens when I click the textbox after adding row.... Was I correct to change the ' to "" in the

    inp2.setAttribute('onClick','javascript:NewCal('interviewdate','ddmmyyyy');');


    could this be causing the problem?

  14. #14
    Join Date
    May 2006
    Location
    Udupi,India
    Posts
    46
    Code:
    .... Was I correct to change the ' to ""
    should not affected code actually
    Code:
    inp2.setAttribute('onClick','javascript:NewCal('interviewdate','ddmmyyyy');');
    y r u passing arguments here.. u will gettin date from picker..

  15. #15
    Join Date
    Apr 2006
    Posts
    52
    should not affected code actually
    Keep getting error - ")" Expected - when using your code

    y r u passing arguments here.. u will gettin date from picker..
    The reason is that I read the date from a DB (if exists).

    when this form is submitted the date is inserted or updated into a table in a DB.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles