adding elements

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • rhx
    New Member
    • Jul 2007
    • 14
    #1

    adding elements

    Need help on this one, I have this code where i intend to use, it adds a new textarea each time a button is clicked. How can i assign a unique element name for each textarea created?

    Code:
    <script type="text/javascript">
function addTextArea() 
{
    var newInput = document.createElement("textarea");
	newInput.setAttribute("type", "text");
	newInput.setAttribute('id','idName');
	newInput.setAttribute('name','name');
	newInput.setAttribute("cols", "50");
	newInput.setAttribute("row", "30");
    document.getElementById("divToAddTextBox").appendChild(newInput);
}
</script>
<body>
<form name ="reg" method="POST" action="sample_a.php">
<table><tr><td  id="divToAddTextBox" width="400">
</td></tr>
<input type="button" onclick="addTextArea()" value="Click Here to Add Textbox" />
<input type="button" onclick="submit()" value="Click Here Submit" />
</table>
</body>
    Tags: None
    • epots9
      Recognized Expert Top Contributor
      • May 2007
      • 1352
      #2
      Originally posted by rhx
      Need help on this one, I have this code where i intend to use, it adds a new textarea each time a button is clicked. How can i assign a unique element name for each textarea created?

      Code:
      <script type="text/javascript">
function addTextArea() 
{
    var newInput = document.createElement("textarea");
	newInput.setAttribute("type", "text");
	newInput.setAttribute('id','idName');
	newInput.setAttribute('name','name');
	newInput.setAttribute("cols", "50");
	newInput.setAttribute("row", "30");
    document.getElementById("divToAddTextBox").appendChild(newInput);
}
</script>
<body>
<form name ="reg" method="POST" action="sample_a.php">
<table><tr><td  id="divToAddTextBox" width="400">
</td></tr>
<input type="button" onclick="addTextArea()" value="Click Here to Add Textbox" />
<input type="button" onclick="submit()" value="Click Here Submit" />
</table>
</body>
      try this:
      [CODE=javascript]
      var count = 1;
      function addTextArea()
      {
      var newInput = document.create Element("textar ea");
      newInput.setAtt ribute("type", "text");
      newInput.setAtt ribute('id','te xtarea' + count);
      newInput.setAtt ribute('name',' textarea' + count);
      newInput.setAtt ribute("cols", "50");
      newInput.setAtt ribute("row", "30");
      document.getEle mentById("divTo AddTextBox").ap pendChild(newIn put);
      count++;
      }
      [/CODE]

      ** make sure your script tag is between the head tag.

      so now every textarea is called the same just with a different number at the end, makes it easier to read after cuz then u can use a for loop.

      good luck.

        Comment

        • rhx
          New Member
          • Jul 2007
          • 14
          #3
          big thanks epots9... one last thing, what if i would like to limit the number of textarea that can be added, where can i place the control?

            Comment

            • epots9
              Recognized Expert Top Contributor
              • May 2007
              • 1352
              #4
              Originally posted by rhx
              big thanks epots9... one last thing, what if i would like to limit the number of textarea that can be added, where can i place the control?
              a simple if statement can be used for that:
              [CODE=javascript]
              var count = 1;
              function addTextArea()
              {
              if(count >= 5)
              {
              alert("too many");
              }
              else
              {
              var newInput = document.create Element("textar ea");
              newInput.setAtt ribute("type", "text");
              newInput.setAtt ribute('id','te xtarea' + count);
              newInput.setAtt ribute('name',' textarea' + count);
              newInput.setAtt ribute("cols", "50");
              newInput.setAtt ribute("row", "30");
              document.getEle mentById("divTo AddTextBox").ap pendChild(newIn put);
              count++;
              }
              }
              [/CODE]

              good luck

                Comment

                • rhx
                  New Member
                  • Jul 2007
                  • 14
                  #5
                  that gives me something to start with, thanks a lot epots9.

                    Comment

                    • epots9
                      Recognized Expert Top Contributor
                      • May 2007
                      • 1352
                      #6
                      np, i'm glad i could help

                      if u have anymore questions u can always come back to TSDN for support.

                        Comment

                        Previous template Next
                        Working...