title: javascript-Html input tag in jquery dialog box is always giving undefined value in js
body: <p>I have created dialog box using jquery. The dialog box has two input fields and submit button.</p>
  
  <p>Whenever I click the submit button the call is going to js function correctly. But it is not taking input values.</p>
  
  <p>Sample.html</p>
  
  <pre><code>&lt;a href="#"  class="view" &gt;View&lt;/a&gt;
  &lt;div id="dialogBox" title="details" style="display: none;"&gt;
  &lt;div id="list" class="ui-popup"&gt;
  
  &lt;label for="name"&gt;Add name&lt;/label&gt;&lt;br/&gt;
  &lt;input style="width: 50%;" type='text' id="name" value="" &gt;
  &lt;input type="checkbox" id="db" /&gt; &lt;label for="db"&gt;click to add to DB&lt;/label&gt;&lt;br&gt;&lt;br&gt;
  &lt;input type="submit" class="save" id="save" value="SAVE"/&gt;&amp;nbsp;&amp;nbsp;&lt;input type="submit" class="cancel" id="cancel" value="CANCEL"/&gt;
  
  &lt;ul&gt;
  &lt;li&gt;{{name}}&lt;/li&gt;
  &lt;li&gt;{{time}}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>name.js</p>
  
  <pre><code>var view= function( eventData )
  {
      event.preventDefault();
  
      $("#dialogbox").dialog({resizable: false,
          height:'auto',
          width:950,
          modal: true}).css("maxHeight", window.innerHeight-200);
  };
  
  $('.view').click(view);
  
  var update = function(e)
  {
      var name = $("#name").val(); //undefined
      var db = $("#db").checked; //undefined
      params = {"function": "updatenames", "db": db};
      params['name'] = name;
      jQuery.post('api.py', params);
  
  };
  
  $('.save').click(update);
  
  $('.cancel').click(function(e){
      var comment = document.getElementById('name').value = '';
  });
  </code></pre>
  
  <p>The 'name' text box and the db check box always giving undefined in js .</p>
  
  <p>Did I do anything wrong while trying getting value for those inputs?</p>
  
  <p>Please share your suggestions</p>