Javascript Textarea值在提交表单后保持不变

我以前的问题已经解决了，现在我需要询问如何防止textarea在提交表单后重置其输入。以下是JSFIDLE：

我应该在HTML中更改表单吗

<form id="form1" method="GET">

（表单不进入php文件或任何其他文件，我使用它提交textarea输入，并使用我使用jQuery创建的变量在同一页面上创建段落） 还是JS里的什么

$(document).ready( function () {

  $('#form1').on('submit', function (event) {

    // If the form validation returns false, block the form from submitting by 
    // preventing the event's default behaviour from executing.
    if (!validate()) {
        event.preventDefault();
    }

    if(validate()) {
      var adjective1 = $('#adjective1').val();
      var adjective2 = $('#adjective2').val();
      var pluralnoun = $('#plural-noun').val();
      var verb1 = $('#verb1').val();
      var edibleobject = $('#edible-object').val();
      var monster1 = $('#monster1').val();
      var adjective3 = $('#adjective3').val();
      var monster2 = $('#monster2').val();
      var verb2 = $('#verb2').val();

      $('body').append(
        '<div id="para">' +
          '<p>Rain was still lashing the windows, which were now ' + adjective1 +', but inside all looked bright and cheerful. ' +
          'The firelight glowed over the countless ' + adjective2 + '' + pluralnoun + ' where people sat ' + verb1 + ', talking, ' +
          'doing homework or, in the case of Fred and George Weasley, trying to find out what would happen if you fed a ' + edibleobject +' to a ' + monster1 + '.' + 
          'Fred had "rescued" the ' + adjective3 + ', fire-dwelling ' + monster2 + ' from a Care of Magical Creatures class and it was now ' + verb2 + ' gently ' +
          'on a table surrounded by a knot of curious people. </p>' +
        '</div>'
        );
    }
});

function validate() {

  var success = true;

  $('.input').each(function(i, item) {
      if ($(item).val() === "") 
      {
         console.log("Missing textarea input");
         success = false;
         $(item).attr("style","border:1px solid red;");
         //note it will overwrite your element style in all Input class
      }
      else
      {
         $(item).removeAttr('style')
         // to remove border 
     }
   });

    return success;
}
});

$（文档）.ready（函数（）{
$（'#form1'）。关于（'submit'，函数（事件）{
//如果表单验证返回false，请阻止通过提交表单
//阻止执行事件的默认行为。
如果（！validate（））{
event.preventDefault（）；
}
if（validate（））{
变量形容词1=$（'#形容词1'）.val（）；
变量形容词2=$（'#形容词2'）.val（）；
var pluralnoun=$（“#复数名词”）.val（）；
var verb1=$（'#verb1'）.val（）；
var edibleobject=$（“#可食用对象”）.val（）；
var monster1=$（'#monster1'）.val（）；
变量形容词3=$（'#形容词3'）.val（）；
var monster2=$（'#monster2'）.val（）；
var verb2=$（'#verb2'）.val（）；
$（'body'）。追加(
'' +
“雨仍在猛烈地敲打着窗户，窗户现在是”+1+”，但里面的一切看起来都很明亮和愉快。”+
“火光照耀着无数的“+形容词2+”+复数名词+”人们坐在那里聊天，”+
“做作业，或者，在弗雷德和乔治·韦斯莱的例子中，试图找出如果你将“+edibleobject+”喂给“+monster1+”会发生什么。”
“弗雷德从魔法生物护理课程中“救出”了“+形容词3+”、火居“+怪物2+”，现在是“+verb2+”了”+
“在一张桌子上，围着一群好奇的人。
”+
''
);
}
});
函数验证（）{
var成功=真；
$（'.input'）。每个（函数（i，项）{
如果（$（项）.val（）=“”）
{
console.log（“缺少文本区域输入”）；
成功=错误；
$（item）.attr（“样式”，“边框：1px实心红色；”）；
//注意，它将覆盖所有输入类中的元素样式
}
其他的
{
$（item）.removeAttr（'style'））
//移去边界
}
});
回归成功；
}
});

---

按submit后，内容将清空，我只在一瞬间看到完成的段落。

无论validate是否通过，都需要阻止默认事件处理程序执行，因此需要删除事件.preventDefault（）调用周围的if语句。preventDefault是防止提交和重新加载页面的功能

此外，您的Fiddle没有设置为jQuery（它被设置为no library），因此在测试期间可能也会导致问题

例如，我正在谈论的内容：

$('#form1').on('submit', function (event) {

    // block the form from submitting by 
    // preventing the event's default behaviour from executing.
    event.preventDefault();

    if(validate()) {
        var adjective1 = $('#adjective1').val();
        var adjective2 = $('#adjective2').val();
        var pluralnoun = $('#plural-noun').val();
        ... etc ...

---

我会使用php，将一个变量设置为textarea的GET值，并将textarea的值设置为该变量

，我在本地驱动器上进行测试，我上传到JSFIDLE，因为其他堆栈溢出编码器更喜欢使用链接来可视化它。如果我删除preventDefault调用，那么，即使validate为false，它也不会提交吗？preventDefault（）的作用与它听起来的一样—它阻止事件处理程序的默认操作（这是一个提交）。由于您在客户端处理请求，因此您永远不希望表单实际提交到服务器。如果我的答案不清楚，您需要preventDefault（）调用，而不需要围绕它的if语句。目前，您的代码仅在表单无效时才执行preventDefault，因此，如果表单有效，那么它将不会preventDefault，然后它将提交到服务器。