个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 06:13:40 25 4
gpt4 key购买 nike

****更新****

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

这是我的复选框代码

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

上一个问题我有一个包含多个文本区域的表单。我不熟悉任何数据库，所以我不使用数据库，而是更喜欢在提交时使用或将我的文本区域的值/输入保存到另一个文本区域。我能够让它工作，但是随着那些动态添加的文本区域，我只能得到第一个文本区域。

这是我的脚本

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

最佳答案

您动态创建的文本区域都在 #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>

关于javascript - 将多个textarea的值添加到另一个textarea提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56197312/

25 4 0
文章推荐： html - 如何应用 CSS 将标签中包裹的 DDA.AC 字符置于屏幕中央
文章推荐： jquery - 无法使用 Infinite Scroll 和 Flask 进行分页
文章推荐： javascript - 将 HTML 元素与 onscroll 链接，onchange 不起作用
文章推荐： java - Web应用程序中有多个版本: duplication or messy code?
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com