CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Galore Allana Fajardo Pangan
Galore Allana Fajardo Pangan

Reputation: 1

Add a value of multiple textarea to another textarea submit

****UPDATE****

I was able to have below issue work with the help of @JasonB. In addition, I also have another 3 textareas on the same form that will only show when its checkbox is clicked. How will I add that on my current script? I tried grouping it the same way as TextBoxesGroup but just giving another id but when I hit submit, even if I didn't clicked the checkbox, values inside are being submitted. Thank you so much in advance. I'm really new to programming and I'm trying to learn the basics.

HERE'S MY CODE for the checkbox

<textarea id="text" >NAME-
ADDRESS-
ETC-</textarea>
<textarea id="text1">NAME-
ADDRESS-
ETC-</textarea>
<textarea id="text2">NAME-
ADDRESS-
ETC-</textarea> 

<input type="checkbox" id="myCheck"  onclick="myFunction()">DETAILS
<input type="checkbox" id="myCheck1"  onclick="myFunction1()">DETAILS
<input type="checkbox" id="myCheck2"  onclick="myFunction2()">OTHERS


<script>
function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("text");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}
function myFunction1() {
    var checkBox1 = document.getElementById("myCheck1");
    var text1 = document.getElementById("text1");
    if (checkBox1.checked == true){
        text1.style.display = "block";
    } else {
       text1.style.display = "none";
    }
}
function myFunction2() {
    var checkBox2 = document.getElementById("myCheck2");
    var text2 = document.getElementById("text2");
    if (checkBox2.checked == true){
        text2.style.display = "block";
    } else {
       text2.style.display = "none";
    }
}
</script>

PREVIOUS QUESTION I have a form with multiple textareas. I'm not familiar with any databases so instead of using one, I prefer using or saving the values/inputs of my textarea to another textarea on submit. I was able to make it work but with those textareas being added dynamically, I only get the first textarea.

here's my script

$(document).ready(function () {
    var counter = 1;
    $("#addButton").click(function () {
            if (counter > 15) {
                alert("Only 15 textboxes allowed");
                return false;
            }
        $('<div/>',{'id':'TextBoxDiv' + counter}).html(
              $('<textarea/>',{'id':'myTextArea' + counter ,'class':'myTextArea'}).html( 'STEP ' + counter + ' : ' )
            )
                       .appendTo( '#TextBoxesGroup' )
   $("#myTextArea" + counter).each(function () {
            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
      }).on('input', function () {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
      });
                  counter++;

        });

        $("#removeButton").click(function () {
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }
            counter--;
            $("#TextBoxDiv" + counter).remove();
        });
        });

$(document).ready(function() {
  $("#btn-primary").click(function() {
e=1;
    var text55 = $('#textarea55').val();
    var text56 = $('#textarea56').val();
    var text57 = $('#textarea57').val();
    var text58 = $('#textarea58').val();
    var text59 = $('#textarea59').val();
    var text60 = $('#textarea60').val();
    var text61 = $('#textarea61').val();
    var text62 = $('#textarea62').val();
    var myTextArea = $('#myTextArea'+e).val();

  $('#inputTextToSave').val( $('#inputTextToSave').val()+text55+'\n'+text56+'\n'+text57+'\n'+'TROUBLESHOOTING NOTES'+'\n'+myTextArea+'\n'+text58+'\n'+text59+'\n'+text60+'\n'+text61+'\n'+text62+'\n');
e++;
  });

here's my html

<textarea id="textarea55" name="caller"></textarea><br>
<textarea id="textarea56" name="auth"></textarea><br>
<textarea id="textarea57" name="issue"></textarea><br>
<label>TROUBLESHOOTING NOTES:</label><br>
   <body>      
   <div id='TextBoxesGroup'>
   <div id="TextBoxDiv"></div></div>
<input type='button' value='ADD TS STEPS' id='addButton' class="bubbly-button">
<input type='button' value='REMOVE TS' id='removeButton' class="bubbly-button"><br><\body> 
<textarea id="textarea58" name="acct"></textarea><br>
<textarea id="textarea59" name="tid"></textarea><br
<textarea id="textarea60" name="resolution"></textarea><br>
<textarea id="textarea61" name="case"></textarea><br>
<textarea id="textarea62" rows="1" disabled>YANA</textarea>

<input type='button' value='SUBMIT' id='btn-primary' class="bubbly-button"><br>

my css

div {
  padding: 1px;
  }

textarea {
   outline: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
      }

.myTextArea {
  width: 535px;
  min-height: 14px;
  overflow-y: hidden;
  font-size: 14px;
  border: 3px solid orange;
  background-color:white;color:mediumvioletred;
  display: block;
  }

body{
  font-size: 14px;
  font-family: 'tempus sans ITC', 'Arial';
  color: mediumvioletred;
  text-align: center;
  background-color: pink;
}

Upvotes: 0

Views: 1235

Answers (1)

JasonB
JasonB

Reputation: 6368

Your dynamically created textareas are all in #TextBoxesGroup.

To select them all at the time of submission, you can call $('#TextBoxesGroup textarea'). To append their contents into a string with '\n' characters separating them you can use jQuery's .map function to get the text of each element in an array wrapped in a jQuery object, .get to get the underlying array, and .join to concatenate the strings with '\n' as the glue.

var contents = $('#TextBoxesGroup textarea')
  .map(function() {
    return $(this).text();
  })
  .get()
  .join('\n');
  
  console.log( contents );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="TextBoxesGroup">
  <div><textarea>One</textarea></div>
  <div><textarea>Two</textarea></div>
  <div><textarea>Three</textarea></div>
</div>

Upvotes: 1

Related Questions