Question

我之前的问题已修复，现在我需要询问如何在提交表单后让textarea重置其输入。这是jsFiddle：http://jsfiddle.net/rz4pnumy/

我应该更改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;
}
});

按下提交后内容会被清空，我只会在瞬间看到已完成的段落。

Answer 1

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

此外，您的小提琴未设置为jQuery（它设置为无库），因此在测试期间可能也会导致问题。

编辑我正在谈论的例子：

$('#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 ...

Answer 2

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

提交表格后，Textarea值保持不变

2 个答案: