你如何将文本字段从模态传递给父级？

Question

当按下父窗口上的按钮时，模态窗口会向下滑动。模态窗口有两个文本字段。用户输入完文本后，有一个“添加”按钮可以按下。我希望添加按钮填写 html 中的无序列表。我怎样才能将它传递给父母？

<div class="modal fade" id="newTask" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Add a New Task</h4>
      </div>
      <div class="modal-body">
        <form>
          <input class="textField" type="text" placeholder="Enter the Task here."></input>
          <input class="textField datepicker dueDate" id="dpd1" type="text" placeholder="Select Date">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="addListItem('list')" id="addTask">Add Task</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


$('.modal form').on('#newTask', function addListItem(listID){
var input = $('input[type=text]');
var str = '<li><table id="todoTable" border="1" cellspacing="2" cellpadding="3"><tr><td> <input type="checkbox" class="checkbox">  </input> </td><td> <input type="text" class="todo-data">  </input> </td><td> <input type="button" class = "image" value="X">  </input> </td></tr><tr><td> <input type="checkbox" class="no-show">  </input> </td> <script>$function(){$(".datepicker").datepicker();});</script> <td> <input type="text" id="datepicker" class = "datepicker">  </input> </td></tr></table></li>';
$('.todo-list').append(str);
input.val('');
$(this).parent().hide();
return false;

});

Answer 1

正如第一条评论所提到的，您需要做的就是将其附加到列表中。我不确定您对哪一部分感到困惑，所以我整理了一个简单的示例，以尽可能最小的方式完成上述所有操作。 jsfiddle的链接如下：

http://jsfiddle.net/Qw2VY/2/

这里是复制的 javascript 代码：

$('button').on('click', function(){
  $('.modal').toggle()
});

$('.modal form').on('submit', function(){
    var input = $('input[type=text]');
    $('ul').append('<li>'+ input.val() + '</li>');
    input.val('');
    $(this).parent().hide();
    return false;
});

第一次点击函数很简单，就是在点击按钮时打开或者关闭模态框。第二部分是大部分动作发生的地方。当模态中的表单被提交时，以下是一行一行的内容：

• 抓取用户输入文本的输入字段
• 将该字段的值添加到我们的列表中，由列表项包裹
• 清除文本字段，以便下次需要添加项目时它为空
• 关闭模态
• 返回 false 取消实际的表单提交

这里还有很多可以做的事情，比如添加一个取消按钮来摆脱你不想要的模式，验证以确保用户实际输入了你想要的文本类型，等等。但是我假设您可以弄清楚这些东西，这很简单。如果不能随意发表评论和询问，我们可以讨论一下。

编辑：作者将代码添加到问题后

您似乎正在寻找某人只是为您写一个复制粘贴的答案，正如我在评论中提到的那样，我不愿意这样做。但我很高兴浏览您的代码并进行编辑，以便您学习。让我们直接进入它。

首先，让我们看一下html。首先，不知道你在做什么用javascript附加所有的html。让我们把它放在开始的页面上。我从脚本中取出 html 并修复了一些错误（未闭合的标签、间距问题、自闭合输入标签等）。

<!-- table up top here -->

<table id="todoTable" border="1" cellspacing="2" cellpadding="3">
  <tr>
    <td><input type="checkbox" class="checkbox" /></td>
    <td><input type="text" class="todo-data" /></td>
    <td><input type="button" class="image" value="X" /></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="no-show" /></td>
    <td><input type="text" id="datepicker" class="datepicker" /></td>
  </tr>
</table>

<!-- we need a button to click that makes the modal show up -->

<button class='triggerModal'>open modal</button>

<!-- modal html here (abbreviated) -->

<div id='newTask'> ... </div>

<!-- now we can start on the script -->

<script>

  // first, we need to make sure the modal shows up when you
  // click the button
  $('.triggerModal').on('click', function(){
    $('#newTask').modal()
  });

  // now, after the modal is up, we need to respond to the form submission.
  // i'll let you fill this in, based on my example. If this is still confusing
  // to you, you need to go back and review javascript and jquery basics. if this
  // is the case let me know and I'd be happy to suggest resources
</script>

编辑 2： 作者表示他们并不真正了解 html、css 和 javascript 如何工作的基础知识，因此虽然这个答案可能会解决问题，但它超出了范围。以下是我建议的一些资源，用于开始学习 html、css 和 javascript 的基础知识：

• HTML: http://teamtreehouse.com/library/websites/html
• CSS： http://teamtreehouse.com/library/websites/css-foundations-2
• JS 基础： http://teamtreehouse.com/library/websites/javascript-foundations
• jQuery 基础知识： http://www.codeschool.com/courses/try-jquery