Question

HTML部分包含带标签的textarea。用户必须输入文本，并且应该提交和刷新表单，以便用户再次输入文本5次。我怎么能用Javascript做到这一点？这是html代码：

<form name="myform" method="post">
  <div class="form-group col-sm-5">
    <label for="ques"><p id="p1">Question:</p></label>
        <textarea class="form-control" rows="5" id="ques"></textarea>
  </div>
</form>
<button type="button" class="btn" id="sub" onclick="func()">Next</button>

javascript代码：

var x=1;
document.getElementById("p1").innerHTML="Question"+x;

function func()
{
var frm = document.getElementsByName('myform')[0];
frm.submit();
frm.reset();  
return false;
}

Answer 1

我们可以使用<script type="text/template>创建模板，然后在每次单击按钮时将其附加到表单。

＆＃13;

const btn = document.getElementById('sub');

const appendNewTextArea = function() {
  const formEl = document.getElementById('form');
  const textareaTemplate = document.getElementById('textarea-template').innerHTML;
  const wrapper = document.createElement('div');
  wrapper.innerHTML = textareaTemplate;
  formEl.appendChild(wrapper);
}


// Call the function to create the first textarea
appendNewTextArea();

btn.addEventListener('click', appendNewTextArea);

＆＃13;

<form name="myform" method="post" id="form">

</form>
<button type="button" class="btn" id="sub">Next</button>

<script id="textarea-template" type="text/template">
  <div class="form-group col-sm-5">
    <label for="ques"><p id="p1">Question:</p></label>
    <textarea class="form-control" rows="5" id="ques"></textarea>
  </div>
</script>

＆＃13;

Answer 2

您可以使用以下两种方法。这两个都需要您向表单添加提交按钮，如下所示：

<form name="myform" method="post">
  <div class="form-group col-sm-5">
    <label for="ques"><p id="p1">Question:</p></label>
    <textarea class="form-control" rows="5" id="ques"></textarea>
  </div>
  <!-- add this button -->
  <input type="submit" value="Submit" class="btn">
</form>
<!-- no need for a <button> out here! -->

方法1：sessionStorage

sessionStorage允许您存储跨页面重新加载的持久数据。对于我的信息，请参阅sessionStorage上的MDN文档。此方法需要否外部库。请注意，在此方法中，您的页面会在提交时重新加载。

window.onload = function() {

  var myForm = document.forms.myform;

  myForm.onsubmit = function(e) {

    // get the submit count from sessionStorage OR default to 0
    var submitCount = sessionStorage.getItem('count') || 0;

    if (submitCount == 5) {
      // reset count to 0 for future submissions
    } else {
      // increment the count
      sessionStorage.setItem('count', submitCount + 1);
    }

    return true; // let the submission continue as normal
  }

  // this code runs each time the pages loads

  var submitCount = sessionStorage.getItem('count') || 0;

  console.log('You have submited the form ' + submitCount + ' times');

  if (submitCount == 4) {
    console.log("This will be the final submit! This is the part where you change the submit button text to say \"Done\", etc.");
  } 

};

方法2：使用jQuery的AJAX

如果您不介意使用jQuery，您可以轻松地进行AJAX调用以多次提交表单而无需重新加载。请注意，在此示例中，您的页面在提交后重新加载。

window.onload = function() {

  var myForm = document.forms.myform;
  var submitCount = 0;

  myForm.onsubmit = function(e) {
    $.post('/some/url', $(myForm).serialize()).done(function(data) {
      submitCount++;
    });

    console.log('You have submited the form ' + submitCount + ' times');

    if (submitCount == 4) {
      console.log("This will be the final submit! This is the part where you change the submit button text to say \"Done\", etc.");
    }

    e.preventDefault();
    return false;
  };
};

希望这有帮助！

多次显示文本框

2 个答案:

方法1：sessionStorage

方法2：使用jQuery的AJAX