Button Add will generate new Textarea

Question

Is there possible button "Add" will generate new textarea in form? I've searching for whole day but couldn't find any logic to make "Add" function that generate new textarea.

h1,h2,h3,h4,h5,p,table {font-family: Calibri;}
.content {
  margin: 0 auto;
  width: 75%;
  margin-top: 15px;
}
table.addbutton {
  border: solid black 1px;
  width: 100%;
  height: auto;
}
td,th,tr {
  border: solid black 1px;
  text-align: center;
}
textarea {
  width: 100%;
  margin: 0;
  overflow: hidden
}

<div class="content">
  <table class="addbutton">

    <form action="" method="post">

      <!-- Title -->
      <tr style="color:White;">
        <th bgcolor="#82BBE8">Fixed Title A</th>
        <th bgcolor="#82BBE8">Fixed Title B</th>
        <th bgcolor="#82BBE8">Fixed Title C</th>
        <th bgcolor="black">Fixed Title D</th>
        <th bgcolor="#82BBE8">Fixed Title E</th>
        <th bgcolor="black">Fixed Title F</th>
        <th bgcolor="#82BBE8">Fixed Title G</th>
      </tr>
      <!-- Title end -->

      <tr style="color:White;">

        <td rowspan="2" width="auto" bgcolor="#82BBE8">Title Example</td>

        <td style="color:Black">
          <p align="right"><input type="button" alt="AddColumn" value="Add"></p>
          <br>
          <h5>When we click "Add" button will show new textarea</h5>
          <textarea placeholder="Please input text here.."></textarea>
        </td>

        <td style="color:Black">
          Example 1
        </td>

        <td style="color:Black">
          Example 2
        </td>

        <td style="color:Black">
          Example 3
        </td>

        <td style="color:Black">
          Example 4
        </td>

        <td style="color:Black">
          Example 5
        </td>

      </tr>

      <tr>
        <td>
          <br>
          <p align="right"><input type="button" alt="AddColumn" value="Add"></p>
          <h5>When we click "Add" button will show new textarea</h5>
          <textarea placeholder="Please input text here.."></textarea>
        </td>

        <td style="color:Black">
          Example 5
        </td>

        <td style="color:Black">
          Example 6
        </td>

        <td style="color:Black">
          Example 7
        </td>

        <td style="color:Black">
          Example 8
        </td>

        <td style="color:Black">
          Example 9
        </td>
      </tr>


  </table>
  </form>
</div>
</body>

Possible duplicate of [creating a textarea with javascript](https://stackoverflow.com/questions/7377399/creating-a-textarea-with-javascript) — Dan Bracuk, Mar 15 '18 at 02:32

score 1 · Answer 1 · answered Mar 15 '18 at 01:02

1

Here's a sample to generate text-area

function myFunction() {
    var x = document.createElement("FORM");
    x.setAttribute("id", "myForm");
    document.body.appendChild(x);

    var y = document.createElement("TEXTAREA");
    document.getElementById("myForm").appendChild(y);
}

<button onclick="myFunction()">Add</button>

answered Mar 15 '18 at 01:02

Melchia

22,578
22
103
117

1

Thank you bro, i'll try hard to solved my problem and if anything happen i call you back – Kijiya Mar 15 '18 at 01:36
Hmm, do you have idea when i click the add button the textarea will show in targeted place where i want. – Kijiya Mar 15 '18 at 01:43

Button Add will generate new Textarea

1 Answers1