title: JQuery $(this).find(Selector) returning this
body: <p>I have a form defined as this</p>
  
  <pre><code>&lt;form name="NewForm"&gt;
      &lt;td hidden&gt;New&lt;/td&gt;
      &lt;td&gt;&lt;input name="name" type="text"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input name="url" type="url"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="submit" value="New"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="reset" value="Cancel"&gt;&lt;/td&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>on submit i call </p>
  
  <pre><code>function submitForm(event,data)
  {
      console.log($(this));
  
  
      var valid = true;
      var changed = false
  
      var input = $(this).find("input[name='name']");
  
      console.log("Name");
      console.log(input);
      console.log(input.val());
      console.log(input.prop( 'defaultValue' ));
  }
  </code></pre>
  
  <p>the console then reports</p>
  
  <pre><code>Object { 0: &lt;form&gt;, context: &lt;form&gt;, length: 1 }
  Name
  Object { length: 0, prevObject: Object, context: &lt;form&gt;, selector: "input[name='name']" }
  undefined
  undefined
  </code></pre>
  
  <p>why am i not selecting the first input on the form called name?</p>
  
  <p>EDIT: Entire code file</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div&gt;
          &lt;select id="SystemActive"&gt;
              &lt;option value="Y"&gt;Active&lt;/option&gt;
              &lt;option value="N"&gt;Deleted&lt;/option&gt;
          &lt;/select&gt;
          &lt;button id="SystemRefresh"&gt;Refresh&lt;/button&gt;&lt;br&gt;
          &lt;table id="SystemTable" class="resultsGrid"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th hidden&gt;ID&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;URL&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr &gt;
                      &lt;form name="NewForm"&gt;
                          &lt;td hidden&gt;New&lt;/td&gt;
                          &lt;td&gt;&lt;input name="name" type="text"&gt;&lt;/input&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input name="url" type="url"&gt;&lt;/input&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="submit" value="New"&gt;&lt;/input&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="reset" value="Cancel"&gt;&lt;/input&gt;&lt;/td&gt;
                      &lt;/form&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;script&gt;
          $(function() {
              $("form").submit(submitForm)
          });
  
          function submitForm(event,data)
          {
              console.log($(event.target));
  
  
              var valid = true;
              var changed = false
  
              var input = $(this).find("input[name=name]");
              console.log("Name");
              console.log(input);
              console.log($(input).val());
              input = $(this).find("input[name='name']");
              console.log("Name2");
              console.log(input);
              console.log($(input).val());
              input = $(this).find("input[name='name']");
              console.log("Name3");
              console.log(input.attr('name'));
  
              event.preventDefault();
              return false;
          }
  
      &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>