Question

****更新****

在@JasonB的帮助下，我能够进行以下发行工作。另外，我在同一表单上还有另外3个文本区域，仅在单击其复选框时才会显示。如何将其添加到当前脚本中？我尝试以与TextBoxesGroup相同的方式对它进行分组，但只是给了另一个ID，但是当我点击Submit时，即使我没有单击复选框，也将提交内部值。提前非常感谢您。我真的是编程新手，正在尝试学习基础知识。

此复选框的“这是我的代码”

<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>

上一个问题 我有一个带有多个文本区域的表单。我不熟悉任何数据库，因此我宁愿使用我的textarea的值/输入或将其保存到提交时的另一个textarea，而不是使用一个数据库。我能够使其工作，但是随着那些文本区域的动态添加，我只能得到第一个文本区域。

这是我的剧本

$(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++;
  });

这是我的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>

我的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;
}

Answer 1

您动态创建的文本区域都位于#TextBoxesGroup中。

要在提交时全部选中它们，可以致电$('#TextBoxesGroup textarea')。要将它们的内容附加到用'\ n'字符分隔的字符串中，您可以使用jQuery的.map函数来获取包装在jQuery对象中的数组中每个元素的文本，.get来获取底层内容数组和.join来连接以'\ n'作为粘合词的字符串。

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>

将多个textarea的值添加到另一个textarea提交

1 个答案: