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/

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

1 个答案: