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

Question

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

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

第一个点击功能很简单，就是点击按钮时打开或关闭模态框。第二部分是大部分 Action 发生的地方。提交模式中的表单时，这是逐行进行的:

• 抓取用户输入文本的输入框
• 将该字段的值添加到我们的列表中，用列表项包裹
• 清除文本字段，以便下次需要添加项目时它为空
• 关闭模式
• 返回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