How do you pass text fields from modal to parent?

Question

When a button on the parent window is pressed, a modal window slides down. The modal window has two fields for text. After the user finishes inputting the text, there is an "Add" button to press. I want the add button to fill in an unordered list in html. How can I pass that in to the 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

As the first comment mentioned, all you need to do is append it to the list. I'm not sure which part you are confused about, so I put together a simple example that does all the above in the most minimal way possible. Link to the jsfiddle is below:

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

And here's the javascript code reproduced:

$('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;
});

The first click function is simple, it's just opening or closing the modal when the button is clicked. The second piece is where most of the action is happening. When the form in the modal is submitted, here's what's going down line by line:

• grab the input field that the user entered text into
• add the value of that field to our list, wrapped by a list item
• clear out the text field so it's empty the next time an item needs to be added
• close the modal
• cancel the actual form submission by returning false

There's a lot more that could be done here like adding a cancel button to get rid of the modal if you didn't want, validation to make sure that the user actually put in the kind of text you want, etc. but I'll assume you can figure this stuff out, it's pretty straightforward. If not feel free to comment and ask and we can go over it.

EDIT: After author added code to the question

It seems like you are looking for someone to just write a copy-and-paste answer for you, which as I mentioned in my comment, I am not willing to do. But I am happy to go through your code and make edits so that you can learn. Let's jump right into it.

First, let's take a look at the html. First of all, no idea what you are doing appending all that html with javascript. Let's just put that on the page to begin with. I took the html out of the script and fixed a number of errors (unclosed tags, spacing issues, self-closing input tags, etc).

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

EDIT 2: Author has indicated that they not really understand the basics of how html, css, and javascript work so while this answer might solve the problem, it's out of scope. Here are some resources I suggested to get started with the basics of html, css, and javascript:

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