title: Passing javascript onclick parameter to an element on another page
body: <p>I've written a contact form that changes itself according to what's selected in a (form select option) dropdown at the top of the page, using some javascript to hide elements and change 'required' classes etc</p>
  
  <p>This works fine on the page.</p>
  
  <p>In the nav on the site, I have a dropdown (bootstrap 3) that mimics the options in the form dropdown. The idea being, visitors have 2 options to move to the form they want, either from the nav, or from the dropdown on the contact page.</p>
  
  <p>I have some javascript that detect the nav selection and SHOULD change the associated dropdown on the contact page, this in fact works, provided you're already on the contact page.</p>
  
  <p>The difficulty I'm having, is passing the value through to the contact page from, say the home page.</p>
  
  <p>Some snippets below might help:</p>
  
  <p>The contact page form dropdown:</p>
  
  <pre><code>   &lt;div class="dropdown"&gt;
      &lt;label for="nature"&gt;Nature of Enquiry?&lt;/label&gt;
        &lt;select tabindex=1 name="nature" id="nature"&gt;
         &lt;option value="0" selected&gt;Ask a Question&lt;/option&gt;
         &lt;option value="1"&gt;Get a Quote&lt;/option&gt;
         &lt;option value="2"&gt;Submit Meter Reading&lt;/option&gt;
         &lt;option value="3"&gt;Log a Service Call&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The global nav:</p>
  
  <pre><code>   &lt;li class="dropdown  &lt;?=($page_title == 'Contact') ? 'active' : ''?&gt;"&gt;
       &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Contact &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
       &lt;ul role="menu" class="dropdown-menu choose"&gt;
         &lt;li&gt;&lt;a href="./contact.php#Contact" id="0"&gt;Ask a Question&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="./contact.php#Contact" id="1"&gt;Get a Quote&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="./contact.php#Contact" id="2"&gt;Submit Meter Reading&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="./contact.php#Contact" id="3"&gt;Log a Service Call&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
     &lt;/li&gt;
  </code></pre>
  
  <p>The global nav javascript catch:</p>
  
  <pre><code>&lt;script&gt;
    $('.choose a').click(function() {
      $('#nature').val(this.id).change();
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>The local contact page javascript change function:</p>
  
  <pre><code>$('#nature').change(function() 
  { 
  var selectedValue = parseInt(jQuery(this).val());
  
  switch(selectedValue){
      case 0:
          hide('error');
          hide('clicks');
          show('subject');
          document.getElementById('subjectspan').style.display = 'inline'; 
          document.getElementById('companyspan').style.display = 'none'; 
          $('input#mono').removeClass('required'); 
          $('input#company').removeClass('required');
          $('textarea#message').addClass('required');                          
          break;
      case 1:
          hide('error');
          hide('clicks');
          show('subject');
          document.getElementById('subjectspan').style.display = 'inline'; 
          document.getElementById('companyspan').style.display = 'none'; 
          $('input#mono').removeClass('required'); 
          $('input#company').removeClass('required');
          $('textarea#message').addClass('required');                           
          break;
      case 2:
          hide('error');
          show('clicks');
          hide('subject');
          document.getElementById('companyspan').style.display = 'inline';
          document.getElementById('meterspan').style.display = 'inline';            
          document.getElementById('subjectspan').style.display = 'none'; 
          $('input#mono').addClass('required');
          $('input#company').addClass('required');
          $('textarea#message').removeClass('required');                        
          break;
      case 3:
          hide('error');
          hide('clicks');
          show('subject');
          document.getElementById('companyspan').style.display = 'inline';
          document.getElementById('subjectspan').style.display = 'inline'; 
          $('input#mono').removeClass('required');            
          $('input#company').addClass('required');
          $('textarea#message').addClass('required');            
          break;
  }
  
  });
  </code></pre>
  
  <p>I know that last bit of javascript is pretty untidy, but for now it works.</p>
  
  <p>Like I say, the nav script works absolutely perfectly, provided you're already on the contact page. How can I get that to work from another page?</p>