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

Question

我想在单击创建按钮时追加填写表单，并填写输入文本以将文本追加到结果中 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!");
  }
});
}

Answer 1

我稍微修改了你的代码，但这里有一些有用的东西：

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);

}

我正在使用 handlebars.js 获取输入值、隐藏表单并将其显示到结果 div 中。它可能不是最必要的工具，但我认为它可能有用。

这是一个工作示例：

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

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

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

html

javascript

forms

jquery

submit