附加一个新表单，并在输入文本时提交

append a new form and submit it when there is text in input

本文关键字：输入 文本 提交 一个 新表单 表单      更新时间：2023-09-26

我想在点击创建按钮时附加填充表单，并填写输入文本以将文本附加到结果div中。我想使用提交输入来触发输入的完整性，并在结果div中显示文本时隐藏表单。然而，我发现我无法显示文本和隐藏表单。我想知道为什么我不能做到这一点。

这是代码：

html:

 <div id="results">
 <button type="button" id="create-group">Create Group</button>
 </div>

javascript:

var create = document.getElementById('create-group');
  create.addEventListener('click',function(e){
     addForm();
});
function addForm(){
  var form1 = $('<input type="text" id="form1">');
  var form2 = $('<input type="submit" id="form2">');
  $('#results').append("<div id='allForm'>")
  .append(form1)
  .append(form2)
  .append("</div>");
  createGroup();
}
function createGroup(){
  var form=document.getElementById('allForm');
  form.on('submit',function(e){
  e.preventDefault();
  var item = $('#form1').val();
  if(item){
    $('#results').append("<ul>")
    .append(item)
    .append("</ul>");
    form.remove();
  }
  else{
    alert("Input a name!");
  }
});
}

我对您的代码做了一些更改，但以下是有效的：

html:

<button type="button" id="create-group">Create Group</button>
<div id="results">
    <script id="results-template" type="text/x-handlebars-template">
        <h1>{{someResult}}</h1>
    </script>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script>
<script src="test.js"></script>

js:

$(document).ready(function() {
var create = $('#create-group');
create.click(function() {
    addForm();
});
});
function addForm(){
  var form1 = $('<input type="text" id="form1">');
  var form2 = $('<input type="submit" id="form2">');
  $('#results').append("<div id='allForm'>")
  .append(form1)
  .append(form2)
  .append("</div>");
  createGroup();
}
function createGroup(){
  var submit = $('#form2');
  submit.click(function() {
    showResult();
  });
}
function showResult() {
  var source = $("#results-template").html();
  //compile returns a function
  var template = Handlebars.compile(source);
  //provide an object with values
  var context = {
      someResult: $('#form1').val()
  }
  var html = template(context);
  form1.remove();
  form2.remove();
  $('body').append(html);
}

我使用handlers.js获取输入的值，隐藏表单，并将其显示到resultsdiv中。这可能不是最必要的工具，但我认为它可能很有用。

下面是一个工作示例：

http://jsfiddle.net/mtun4g6p/1/

相关文章：