problem with placing the dynamically created textbox

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • foss
    New Member
    • Dec 2007
    • 11
    #1

    problem with placing the dynamically created textbox

    I have got a Html form with a table.
    The table contains textfield and a button.
    When I click the button I want another textfiled to be created.
    (I have done till here)

    The problem is that I want the new textfield to be created in the same cell (within <TD> tag) where the first textfield is. I have tried to use <span> tag so as to force the new textfield to be created in the table cell. But I could not succeed.
    My code goes as follows:


    <html>
    <head>
    <title>testin g</title>

    <script type="text/javascript">

    var counter = 0;

    function createTextField (name, id, parentEl) {
    if(navigator.us erAgent.toLower Case().indexOf( "msie") != -1) { isIE = true; } else { isIE = false; }

    if(isIE) {
    newInput = document.create Element('<INPUT name=\''+(name+ counter)+'\'>') ;
    } else {
    newInput = document.create Element('INPUT' );
    newInput.name = name + counter;
    newInput.size = 10;
    }

    newInput.type = 'text';
    newInput.id = id + counter;

    if(parentEl && parentEl != "") {
    if(typeof(paren tEl) == "string") {
    parentEl = document.getEle mentById(parent El);
    }
    parentEl.append Child(newInput) ;
    parentEl.append Child(document. createElement(' BR')); // break line
    } else {
    document.body.a ppendChild(newI nput);
    document.body.a ppendChild(docu ment.createElem ent('BR')); // break line
    }

    counter++;
    }


    </script>

    </head>
    <body>


    <table>
    <tr>
    <td><input type="text" name="username" id="user" size="20" value="" /><span id="putInputEle mentsHere"></span></td>
    <td><input type="button" value="More" onClick="create TextField('myIn put', 'myInputId', '');" /></td>
    </tr>

    </table>

    <p>&nbsp;</p>
    </body>
    </html>
    Tags: None
    • theS70RM
      New Member
      • Jul 2007
      • 107
      #2
      Hi you just need to complete the function call here:

      Code:
      <input type="button" value="More" onClick="createTextField('myInput', 'myInputId', '');" />
      by entering the ID of the element you want to insert the textbox into, ie:

      Code:
      <input type="button" value="More" onClick="createTextField('myInput', 'myInputId', 'putInputElementsHere');" />
      Cheers

      Andy

        Comment

        • foss
          New Member
          • Dec 2007
          • 11
          #3
          sorry for disturbing . I got my mistake .
          The corrected code is:
          [HTML]<html>
          <head>
          <title>testin g</title>

          <script type="text/javascript">

          var counter = 0;

          function createTextField (name, id, parentEl) {
          if(navigator.us erAgent.toLower Case().indexOf( "msie") != -1) { isIE = true; } else { isIE = false; }

          if(isIE) {
          newInput = document.create Element('<INPUT name=\''+(name+ counter)+'\'>') ;
          } else {
          newInput = document.create Element('INPUT' );
          newInput.name = name + counter;
          newInput.size = 10;
          }

          newInput.type = 'text';
          newInput.id = id + counter;

          if(parentEl && parentEl != "") {
          if(typeof(paren tEl) == "string") {
          parentEl = document.getEle mentById(parent El);
          }
          parentEl.append Child(newInput) ;
          parentEl.append Child(document. createElement(' BR')); // break line
          } else {
          document.body.a ppendChild(newI nput);
          document.body.a ppendChild(docu ment.createElem ent('BR')); // break line
          }

          counter++;
          }


          </script>

          </head>
          <body>


          <table>
          <tr>
          <td><input type="text" name="username" id="user" size="10" value="" /><span id="putInputEle mentsHere"></span></td>
          <td><input type="button" value="More" onClick="create TextField('myIn put', 'myInputId', 'putInputElemen tsHere');" /></td>
          </tr>

          </table>

          </body>
          </html>[/HTML]
          Last edited by acoder; Mar 14 '08, 11:11 AM. Reason: Added code tags

            Comment

            • foss
              New Member
              • Dec 2007
              • 11
              #4
              Thanks Andy for your reply

              :-)

                Comment

                Previous template Next
                Working...