Javascript 如何将文本字段从模式传递到父级？

当按下父窗口上的按钮时，模式窗口向下滑动。模式窗口有两个文本字段。用户完成文本输入后，有一个“添加”按钮可供按下。我希望add按钮以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;

&时代；
添加新任务
接近
添加任务
$（'.modal form'）。在（'#newTask'，函数addListItem（listID）{
变量输入=$（'input[type=text]'）；
var str='
$function（）{$（“.datepicker”）.datepicker（）；}）；
'；
$（'.todo list'）。追加（str）；
input.val（“”）；
$（this.parent（）.hide（）；
返回false；

---

}))

正如第一条注释所提到的，您所需要做的就是将其附加到列表中。我不确定你对哪一部分感到困惑，所以我把一个简单的例子放在一起，以尽可能少的方式完成上述所有工作。JSFIDLE的链接如下：

下面是复制的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;
});

$（'button'）。在（'click'，function（）上{
$（'.modal'）.toggle（）
});
$（'.modal form'）。在（'submit'，function（）上{
变量输入=$（'input[type=text]'）；
$（'ul'）.append（'
'+input.val（）+'
'）；
input.val（“”）；
$（this.parent（）.hide（）；
返回false；
});

第一次单击功能很简单，单击按钮时只需打开或关闭模式。第二部分是大部分动作发生的地方。提交模式中的表单时，下面是逐行进行的操作：

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

这里还有很多可以做的事情，比如添加一个取消按钮，如果你不想的话，可以取消模式，验证以确保用户实际输入了你想要的文本，等等。但是我假设你可以解决这个问题，这很简单。如果您不愿意发表评论和询问，我们可以查看

编辑：在作者向问题添加代码后

似乎你正在寻找一个只为你写一份拷贝粘贴答案的人，正如我在评论中提到的，我不愿意这样做。但我很高兴能够浏览您的代码并进行编辑，以便您能够学习。让我们直接开始吧

首先，让我们看一下HTML。首先，我不知道你在做什么，在html中添加javascript。让我们从这一页开始。我从脚本中删除了html并修复了一些错误（未关闭的标记、间距问题、自动关闭的输入标记等）

开放模态
... 
//首先，我们需要确保当您
//点击按钮
$（'.triggerModal'）。在（'click'，function（）上{
$（'#newTask'）.modal（）
});
//现在，在模式启动之后，我们需要对表单提交做出响应。
//我会让你根据我的例子来填写。如果这仍然令人困惑
//对于您来说，您需要回顾一下javascript和jquery的基础知识。如果这
//如果是这样的话，请告诉我，我很乐意提供资源建议

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

• HTML:
• CSS:
• JS基础知识：
• jQuery基础知识：

---

将其附加到父级^？我在这方面真的很新。对不起，我对HTML和JS还是很新的。我不知道如何将模态表单元素指向父窗口。我已经知道如何将它添加到列表中。我只需要从子元素中获取元素，并将其显示在父元素中。我将把我的代码放在上面。堆栈溢出不是人们为您编写代码的地方。这是一个学习事情如何运作的地方，你可以自己做。如果您对html、css或javascript有一些具体问题感到困惑，我很乐意尝试回答，但我不会为您编写代码。这就是为什么我提供了一个最小的实现，这样您就可以运行它，测试它，并了解：）也就是说，我将编辑和清理您的html，并为您设置一个JSFIDLE，以便我们可以开始解决这个问题。我编辑了答案，添加了一些资源，您可以通过这些资源让您站起来。如果您已经完成这些，并且渴望获得更多，请在Internet上找到我，并向我发送电子邮件：）

<!-- 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>