title: How to properly submit form from a UL LI element?
body: <p>I have the following js function that submits my HTML postform - in the HTML ul below I can submit the form correctly using either the "input", "button", or "href" li elements. What is the preferred method or best practice way, why should I choose one method over the other? Eventually the sidebar will have several choices for the user to select from.</p>
  
  <p>Note: I want the clickable sidebar elements to look like selectable text not a button, class="astext" performs this with CSS. I am only targeting the latest browsers.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   &lt;script type="text/javascript"&gt;
      function submitForm(queryType) {
  
          // set the hidden input's query type value
          $('#db_query').val(queryType);
  
          // submit the form.
          $('#post_form').submit();
  
      }
      &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    
      &lt;form method="POST" name="postform" id="post_form" action="process.php"&gt;
          &lt;input name="display" id="display_id" type="hidden" value="north" /&gt;
          &lt;input name="query" id="db_query" type="hidden" value="all" /&gt;
      &lt;/form&gt;
    
      &lt;aside id="sidebar"&gt;
            &lt;h3&gt;Schedule selection items here...&lt;/h3&gt;
            &lt;!-- I can use "input", or "button", or "href" below to submit the form, what is the correct way or does it really matter? --&gt;
            &lt;!-- they are all clear to me and seem to be maintainable? --&gt;
  
            &lt;ul&gt;
               &lt;li&gt;&lt;input onclick="submitForm('tomorrow');" type="submit" name="schedule" class="astext" value="Select Tomorrow" /&gt;&lt;/li&gt;
               &lt;li&gt;&lt;button onclick="submitForm('recent');" type="submit" name="schedule" class="astext"&gt;Select Recent&lt;/button&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#" onclick="submitForm('all');" class="astext"&gt;Select All&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
      
      &lt;/aside&gt;
    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>