title: Passing multiple datas through bootstrap modal
body: <p>I'm trying to do the same with multiple data, with <code>data-todo</code> attribute, but it doesn't work. Could you help me?</p>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>$(document).on("click", ".open-EditTodo", function () {
      var todoId = $(this).data('id');
      var todoName = $(this).data('todo');
      $(".modal-body #todoId").val( todoId );
      $(".modal-body $todoName").val( todoName );
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="#editTodoDialog" class="open-EditTodo btn btn-warning" data-toggle="modal" data-id="$todo_id" data-todo="$todo_name"&gt;EDIT&lt;/a&gt;
  
  &lt;div class="modal fade" tabindex="-1" role="dialog" style="margin-top: 200px;" id="editTodoDialog"&gt;
    &lt;div class="modal-dialog" align="center"&gt;
      &lt;div class="modal-content" style="width: 350px;"&gt;
        &lt;div class="modal-header" align="left"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Edit to-do:&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body" align="center" style="height: 65px;"&gt;
          &lt;form class="form-inline" role="form" method="post" action="todo.php"&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="text" name="todoName" id="todoName" value="" class="form-control" style="width: 230px;"&gt;
              &lt;input type="hidden" name="todoId" id="todoId" value=""&gt;
              &lt;button type="submit" class="btn btn-warning"&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt; Edit&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>By the way, <code>data-id</code> works just fine, but <code>data-todo</code> doesn't.</p>