Javascript 将JS处理的值附加到要以表单形式发送的textarea

我目前正在做一个学校项目，但我遇到了一个我不知道如何解决的问题

我和我的团队正在开发一个菜谱库，用户可以上传自己的菜谱。我希望用户分阶段上传配方本身。 差不多

烧开水

把鸡蛋放在沸水里

煮5-6分钟。”

html：

<form action="handler.php" method="POST" enctype="multipart/form-data" name="recipe">
    <p><input type="text" name="name "placeholder="name"/></p>
    <p><div class="recipe_showing"></div></p>
    <textarea name="recipe_data"  class="recipe_data" style="display:none;"></textarea>
    <p><input type="text" class="recipe_part" placeholder="part of the recipe"/>
    <input type="button" class="recipe_enter" value="enter"/></p>
<more form tags and etc>

我知道过度使用了

标签，我们目前正在开发代码的功能，优化将是第二位

下面是我们使用的js代码

$(document).ready(function() {
    var recipe_logg_count=0;
    $(".recipe_enter").click(function() {
        if ($('.recipe_part').val() == null) {
            alert('please write down the first part of the recipe');
        }
        else {
            recipe_logg_count++;
            $('.recipe_showing').append(recipe_logg_count + '. ' + $('.recipe_part').val()+ '</br>');
            $('.recipe_data').append('<p>'+ recipe_logg_count + '. ' + $('.recipe_part').val()+'</p>');
        }
    });
});

$（文档）.ready（函数（）{
var recipe_logg_count=0；
$（“.recipe_enter”）。单击（函数（）{
if（$（'.recipe_part'）.val（）==null）{
警告（“请写下配方的第一部分”）；
}
否则{
配方记录计数++；
$（'.recipe_showing'）.append（recipe_logg_count+'.+$（'.recipe_part'）.val（）+'
'）；
$（'.recipe_data'）.append（''+recipe_logg_count+'.++$（'.recipe_part'）.val（）+'
'）；
}
});
});

我没有向用户显示textarea的内容，我使用的是一个单独的div。 如您所见，我试图简单地将“recipe_part”中的值附加到textarea，但这不起作用

我已经尝试删除了我在开始时附加的

标记，这似乎很好。但是我需要有

标记，以便在显示的页面上设置配方的样式

---

是否有一种方法可以发送文本内容，即使其中有其他html标记？

我不会在文本区域中插入段落（不确定是否可能）。相反，我会在mysql数据库中有两个表，一个名为“recipes”，另一个名为“steps”“。每个配方都有一个自动递增id，每个步骤都通过该id连接到配方。当用户在每个提交的步骤上插入步骤时，我将执行一个ajax调用，将该步骤插入数据库，在您用于配方预览的这个额外div中向用户显示它，并清空输入，以便用户可以开始插入下一步。

我不会在文本区域中插入段落（不确定是否可能）。相反，我在mysql数据库中有两个表，一个名为“recipes”，另一个名为“steps”。每个配方都有一个自动递增id，每个步骤都通过该id连接到一个配方。当用户在每个提交的步骤上插入步骤时，我会执行一个ajax调用，将该步骤插入到数据库中，将它显示给您用于配方预览的这个额外div中的用户，并清空输入，以便用户可以开始插入下一步。

我认为您不能在文本区域中追加文本。您应该能够使用val（）在textarea中追加文本

您可以尝试使用.val（）函数

或者使用js

var enterBtn = document.getElementById('recipe_enter');
var recipeData = document.getElementById('recipe-data');
var recipeShowing = document.getElementById('recipe-showing');
var recipeData_value = '';
var recipeShowing_value = '';
enterBtn.addEventListener('click', function(e){
    var rpart = document.getElementById('recipe_part').value;
    recipeData_value += recipe_log_count + '. ' + rpart + "\n\r";
    recipeShowing_value += recipe_logg_count + '. ' + rpart + "\n\r";
    recipeData.value = recipeData_value;
    recipeShowing.value = recipeShowing_value;
});

[JQuery] 将前面的文本保存在函数范围之外的变量中，并附加到这些变量，然后将这些变量添加为值

$(document).ready(function() {
var recipe_logg_count=0;

var recipe_data = '';
var recipe_showing = '';

$(".recipe_enter").click(function() {
    var recipe_part = $('.recipe_part').val();
    if (recipe_part == null) {
        alert('please write down the first part of the recipe');
    }
    else {
        recipe_logg_count++;
        recipe_data += recipe_logg_count + '. ' + recipe_part + "\n\r";
        recipe_showing += recipe_logg_count + '. ' + recipe_part +"\n\r";
        $('.recipe_data').val(recipe_data);
        $('.recipe_showing').val(recipe_showing);
    }
});

---

我认为你不能在文本区域中添加文本。您应该能够使用val（）在textarea中追加文本

您可以尝试使用.val（）函数

或者使用js

var enterBtn = document.getElementById('recipe_enter');
var recipeData = document.getElementById('recipe-data');
var recipeShowing = document.getElementById('recipe-showing');
var recipeData_value = '';
var recipeShowing_value = '';
enterBtn.addEventListener('click', function(e){
    var rpart = document.getElementById('recipe_part').value;
    recipeData_value += recipe_log_count + '. ' + rpart + "\n\r";
    recipeShowing_value += recipe_logg_count + '. ' + rpart + "\n\r";
    recipeData.value = recipeData_value;
    recipeShowing.value = recipeShowing_value;
});

[JQuery] 将前面的文本保存在函数范围之外的变量中，并附加到这些变量，然后将这些变量添加为值

$(document).ready(function() {
var recipe_logg_count=0;

var recipe_data = '';
var recipe_showing = '';

$(".recipe_enter").click(function() {
    var recipe_part = $('.recipe_part').val();
    if (recipe_part == null) {
        alert('please write down the first part of the recipe');
    }
    else {
        recipe_logg_count++;
        recipe_data += recipe_logg_count + '. ' + recipe_part + "\n\r";
        recipe_showing += recipe_logg_count + '. ' + recipe_part +"\n\r";
        $('.recipe_data').val(recipe_data);
        $('.recipe_showing').val(recipe_showing);
    }
});

---

jQuery的

append

应用于

textarea

时，似乎只是默默地忽略了带有标签的文本。您可以使用

$（'textarea'）.text（$（'textarea'）.text（）+…）

来解决这个问题，但是，通常不鼓励用户提交html标记，因为如果不仔细清理，它会导致XSS攻击。

jQuery的

append

在应用于

textarea

时，似乎只是默默地忽略带有标记的文本。您可以通过使用

$（'textarea'）.text（$（'textarea'）.text（）+…）

来解决这个问题，但是允许用户提交html标记通常是不被鼓励的，因为如果不仔细清洁，它将导致XSS攻击。

我现在已经测试了一些东西，并且意识到我可以用php解决这个问题。如果我喜欢这个：

"$('.recipe_data').append(recipe_logg_count + '. ' + $('.recipe_part').val()+ ':');"

这允许我附加值。 在那之后，我可以很容易地做到

$recipe_parts = explode(':', $recipe_data);
foreach($recipe_parts as $part){
print "<p>".$part."<p/>";
}

$recipe\u parts=分解（“：”，$recipe\u数据）；
foreach（$recipe\u零件作为$part）{
打印“”$part.“
”；
}

我现在已经测试了一些东西，并且意识到我可以用php解决这个问题。如果我喜欢这个：

"$('.recipe_data').append(recipe_logg_count + '. ' + $('.recipe_part').val()+ ':');"

这允许我附加值。 在那之后，我可以很容易地做到

$recipe_parts = explode(':', $recipe_data);
foreach($recipe_parts as $part){
print "<p>".$part."<p/>";
}

$recipe\u parts=分解（“：”，$recipe\u数据）；
foreach（$recipe\u零件作为$part）{
打印“”$part.“
”；
}

忘记添加，在handler.php$\u POST中，密钥配方数据为空。完全清空您可能希望在将其发送到服务器时使用

submit

按钮。。。另外，您的

样式

在其中一个文本区域上被错误地关闭（好吧，不是），并且您的最后两个输入缺少关闭的

/

。您可能想提到您的JavaScript是jQuery，这样您就可以吸引更多的jQuery粉丝来帮助您。@此处的某些内容是我在复制代码时弄乱的，我已经试着让它更清楚了，现在还有更多的表单标签等等。我们正在使用一个按钮在表单末尾提交它。@是的，我试图在“配方显示”和“配方数据”中添加忘记添加的内容，在handler.php$\u POST中，关键配方数据为空。完全清空您可能希望在将其发送到服务器时使用

submit

按钮。。。另外，您的

样式

在其中一个文本区域上被错误地关闭（好吧，不是），并且您的最后两个输入缺少关闭的

/

。您可能想提到您的JavaScript是jQuery，这样您就可以吸引更多的jQuery粉丝来帮助您。@