title: Preselect an option for form > select element based on button clicked?
body: <p>I have a page which displays several products and each of them have their own "Buy Now" button, however, each button leads to the same contact form (on the same page).</p>
  
  <p>The contact form has a <code>&lt;select&gt;</code> element which has the dropdown options of selecting one of the product. Would it be possible to preselect the value of the <code>&lt;select&gt;</code> element based on the button that was clicked on the page.</p>
  
  <p>For instance, If a user clicks on the "Buy Now" button for product "ABC", the contact form will be displayed and the value of the "Product" (<code>&lt;select&gt;</code>) element would be "ABC"</p>
  
  <p>Form's code, in case anyone wants to look at it:</p>
  
  <pre><code>&lt;div class="pop-up"&gt;
      &lt;div class="popup-element"&gt;
  
          &lt;img src="img/close.png" id="close-pop-up"&gt;
          &lt;form class="form-horizontal" name="htmlform" method="post" role="form" action="mailer.php"&gt;
              &lt;input type="text" name="inputName" class="form-control" placeholder="Name"&gt;
              &lt;input type="text" name="inputPhone" class="form-control" placeholder="Phone/Email"&gt;
  
              &lt;div class="input-group"&gt;
                  &lt;select name="inputProduct" class="form-control"&gt;
                      &lt;option value="None"&gt;Select a Product&lt;/option&gt;
                      &lt;option value="abc"&gt;ABC&lt;/option&gt;
                      &lt;option value="def"&gt;DEF&lt;/option&gt;
                      &lt;option value="ghi"&gt;GHI&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;textarea name="inputMessage" class="form-control" placeholder="Special requests or custom requirements" rows="3"&gt;&lt;/textarea&gt;
              &lt;div class="text-center"&gt;
                  &lt;input type="submit"  class="btn btn-lg btn-default btn-query" value="Get a Quote"&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit:<br>
  Here's the code for my button:  </p>
  
  <pre><code>&lt;h2 class="btn-success quote pop-up-button"&gt;Book Now&lt;/h2&gt;
  </code></pre>
  
  <p>And here's the jQuery for it: </p>
  
  <pre><code>jQuery(document).ready(function($){
      //open popup
      $('.pop-up-button').on('click', function(event){
          event.preventDefault();
          $('.pop-up').addClass('is-visible');
      });
  
      //close popup
      $('.pop-up').on('click', function(event){
          if( $(event.target).is('#close-pop-up') || $(event.target).is('.pop-up') ) {
              event.preventDefault();
              $(this).removeClass('is-visible');
          }
      });
  
      //close popup when clicking the esc keyboard button
      $(document).keyup(function(event){
          if(event.which=='27'){
              $('.pop-up').removeClass('is-visible');
          }
      });
  });
  </code></pre>