NoName84 NoName84 - 24 days ago 9
Javascript Question

Javascript Repeating Append Textarea Values issue

I have created a form with four textareas and a submit button. The reason of this form, is when I press the submit button to append the value (text) that i have insert in my textareas inside a div.

When I press the submit button i can see the text that I have insert in my four textareas however when I press the submit button again it will append another four textareas and so on.

What I would like to happen is whenever I press the submit button to just show four textareas(with the updated text) without appending another four textareas.



var firstContent = document.getElementById("first-content");
var secondContent = document.getElementById("second-content");
var thirdContent = document.getElementById("third-content");
var fourthContent = document.getElementById("fourth-content");
var customContainer = document.getElementById("c-content");
var submitBtn = document.getElementById("c-btn");


function submitCustomForm() {

var cElementOne = document.createElement("p");
cElementOne.innerHTML = firstContent.value;
customContainer.append(cElementOne);

var cElementTwo = document.createElement("p");
cElementTwo.innerHTML = secondContent.value;
customContainer.append(cElementTwo);

var cElementThree = document.createElement("p");
cElementThree.innerHTML = thirdContent.value;
customContainer.append(cElementThree);

var cElementFour = document.createElement("p");
cElementFour.innerHTML = fourthContent.value;
customContainer.append(cElementFour);
}

submitBtn.addEventListener("click", submitCustomForm);

<div class="container">
<form action="#" method="post" onsubmit="return false">
<div class="content-container">
<label>First Content
<label>
<textarea id="first-content" class="content-area" placeholder="Insert Content Here"></textarea>
</div>
<hr>
<div class="content-container">
<label>Second Content
<label>
<textarea id="second-content" class="content-area" placeholder="Insert Content Here"></textarea>
</div>
<hr>
<div class="content-container">
<label>Third Content
<label>
<textarea id="third-content" class="content-area" placeholder="Insert Content Here"></textarea>
</div>
<hr>
<div class="content-container">
<label>Fourth Content
<label>
<textarea id="fourth-content" class="content-area" placeholder="Insert Content Here"></textarea>
</div>


<button id="c-btn">Submit</button>

<div id="c-content">

</div>
</form>
</div>




Answer

        var firstContent = document.getElementById("first-content");
        var secondContent = document.getElementById("second-content");
        var thirdContent = document.getElementById("third-content");
        var fourthContent = document.getElementById("fourth-content");
        var customContainer = document.getElementById("c-content");
        var submitBtn = document.getElementById("c-btn");


        function submitCustomForm() {
          //clear the content
          customContainer.innerHTML="";
          
          var cElementOne = document.createElement("p");
          cElementOne.innerHTML = firstContent.value;
          customContainer.append(cElementOne);

          var cElementTwo = document.createElement("p");
          cElementTwo.innerHTML = secondContent.value;
          customContainer.append(cElementTwo);

          var cElementThree = document.createElement("p");
          cElementThree.innerHTML = thirdContent.value;
          customContainer.append(cElementThree);

          var cElementFour = document.createElement("p");
          cElementFour.innerHTML = fourthContent.value;
          customContainer.append(cElementFour);
        }

        submitBtn.addEventListener("click", submitCustomForm);
        <div class="container">
          <form action="#" method="post" onsubmit="return false">
            <div class="content-container">
              <label>First Content
                <label>
                  <textarea id="first-content" class="content-area" placeholder="Insert Content Here"></textarea>
            </div>
            <hr>
            <div class="content-container">
              <label>Second Content
                <label>
                  <textarea id="second-content" class="content-area" placeholder="Insert Content Here"></textarea>
            </div>
            <hr>
            <div class="content-container">
              <label>Third Content
                <label>
                  <textarea id="third-content" class="content-area" placeholder="Insert Content Here"></textarea>
            </div>
            <hr>
            <div class="content-container">
              <label>Fourth Content
                <label>
                  <textarea id="fourth-content" class="content-area" placeholder="Insert Content Here"></textarea>
            </div>


            <button id="c-btn">Submit</button>

            <div id="c-content">

            </div>
          </form>
        </div>