title: Why does %26 get decoded to & when passed as a parameter to a JavaScript function from a link?
body: <p>We've got a menu in out web app that uses <code>&lt;a&gt;</code> tags to load pages in the main frame.</p>
  
  <p>A typical item in the menu would be something like:</p>
  
  <pre><code>&lt;a target="mainframe" href="/servlet1?param1=val1&amp;parma2=servlet2?s2p1=val2%26s2p2=val3&amp;param3=val4"&gt;Menu Item 1&lt;/a&gt;
  </code></pre>
  
  <p>We needed to add some JavaScript validation before the link is requested so I changed it to:  </p>
  
  <pre><code>&lt;a target="mainframe" href="javascript:validate('/servlet1?param1=val1&amp;parma2=servlet2?s2p1=val2%26s2p2=val3&amp;param3=val4')"&gt;Menu Item 1&lt;/a&gt;  
  </code></pre>
  
  <p>(I know that <code>javascript:function</code> in a link is bad practice but we use a 3rd party library to generate the menu so I can't change this part of the code)</p>
  
  <p>Servlet1 expects:<br>
  param1='val1'<br>
  param2='servlet2?s2p1=val2%26s2p2=val3'<br>
  param3='val4'</p>
  
  <p>Servlet1 then forwards to the value of param2 so Servlet2 expects:<br>
  s2p1='val2'<br>
  s2p2='val3'  </p>
  
  <p>However when I put an <code>alert</code> in my validate function to check what is passed in:</p>
  
  <pre><code>function validate(href) {
      alert(href);
  
      ...validation code...
  }
  </code></pre>
  
  <p>it is giving:<br>
  /servlet1?param1=val1&amp;parma2=servlet2?s2p1=val2**&amp;**s2p2=val3&amp;param3=val4 (note the bold <code>&amp;</code> which was <code>%26</code> in the above function call)</p>
  
  <p>The <code>%26</code> is getting converted to an <code>&amp;</code> when it is passed into the JS function which would not normally happen until the request is forwarded to <code>Servlet2</code>. Because the <code>%26</code> has already been changed to an <code>&amp;</code> the <code>s2p2</code> request parameter gets picked up by <code>servlet1</code> instead of <code>servlet2</code>.</p>
  
  <p>Basically my question is why does the <code>%26</code> get converted to a <code>&amp;</code> at this point just by passing it as a parameter to the function from the <code>href</code> attribute when if you do  <code>onClick="validate('/servlet1?param1=val1&amp;parma2=servlet2?s2p1=val2%26s2p2=val3&amp;param3=val4')"</code><br>
  it stays as <code>%26</code> as you'd expect?</p>