title: jQuery get value from form returns Undefined
body: <p>I've come across multiple answers to this question and have not found one that works. I am using pug(jade) and trying to get the value from a modal form. </p>
  
  <p>here is the pug:</p>
  
  <pre><code>     #myModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel',data-keyboard="false", data-backdrop="static")
     .modal-dialog(role='document')
      .modal-content
        .modal-header
          .text-center.h4#myModalLabel.modal-title(style="color:#4c86ff; font-family: 'Lora', serif; font-size:20px; font-weight:600") please add your symptoms
        .modal-body
          form.form-horizontal(action='/token' ,id='symptoms', method='POST')
            input(type='hidden', name='_csrf', value=_csrf)
            .form-group
                input.textarea.form-control(type='text', name='symptomsInput', id='symptomsInput', placeholder='What are your symptoms?', autofocus, required)
        .modal-footer
          button.btn.btn-primary#button-grabToke(type='submit' data-toggle="modal" data-target="#myModal") Go!
  </code></pre>
  
  <p>and here is my js:</p>
  
  <pre><code>$('#button-grabToke').click(function(e){
       var symptoms = $('#DynamicValueAssignedHere').find('input[name="symptomsInput"]').val();
        console.log(symptoms);
           }); 
  });
  </code></pre>