title: Change URL Submitted to Depending on Form Selection
body: <p>I have a form which I need to submit to one of three different URLs depending on a selection made in the form.</p>
  
  <p>I suspect the easiest solution is to use jQuery to insert the appropriate path before the rest of the form parameters as the selection is made, but not sure on what the code would be. Any pointers greratly appreciated!</p>
  
  <pre><code>&lt;form id="myForm" action='/booking/default-path' accept-charset='utf-8' method='get'&gt;
    &lt;select name="paramA" id="paramA"&gt;
      &lt;option id="optionA" value="A" selected="selected"&gt;Option A&lt;/option&gt;
      &lt;option id="optionB" value="B"&gt;Option B&lt;/option&gt;
    &lt;/select&gt;
    &lt;select name="currency" id="currency"&gt;
      &lt;option id="GBP" value="GBP" selected="selected"&gt;British Pounds&lt;/option&gt;
      &lt;option id="EUR" value="EUR"&gt;Euros&lt;/option&gt;
      &lt;option id="USD" value="USD"&gt;US Dollars&lt;/option&gt;
    &lt;/select&gt;
  &lt;input type="submit" value="submit" id="submit" name="submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Where the three different URLs would be:</p>
  
  <p>../booking/default-path-gbp?...[params here]...</p>
  
  <p>../booking/default-path-eur?...[params here]...</p>
  
  <p>../booking/default-path-usd?...[params here]...</p>
  
  <p>I know it would be a lot easier to incorporate the parameter in the usual way and just use one submission URL root, but unfortunately I'm submitting to an eComms system out of my control and am stuck with having to find a solution to this.</p>
  
  <p>Should be easy I think, but not sure where to start, jQuery used elsewhere, so would prefer to use this framework in any solutions.</p>
  
  <p>EDIT: Solutions below look really close! However I've discovered another framework in play that's conflicting (Mootools) and nee to load via .ready() to set jQuery correctly firing.</p>
  
  <p>I've got to:</p>
  
  <p>This looks close, but I can't get it to fire. I have troubleshot that there is another framework in use that;s conflicting (MooTools) so I'm triggering code via on ready using:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  //&lt;!--
  jQuery(document).ready(function($) {
    $("p.hello").text("The DOM is now loaded and can be manipulated.");//Test line!
    $('#myForm').attr( 'action', function() {
    '/booking/default-path' + $('#currency').val();
  });
  //--&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>But no dice. The test line works without the rest of the code, so jQuery' working, but it's not working with the rest of the code. So close! Where am I going wrong?</p>
  
  <p>EDIT 2:</p>
  
  <p>This is the code that's not catching:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  //&lt;!--
  jQuery(document).ready(function($) {//Need to use this to avoid MooTools conflict
    $("p.hello").text("The DOM is now loaded and can be manipulated."); //Test line!
    $('#currency').change(function() {
      $("#myForm").attr("action", "/booking/default-path" + $("#currency").val());
    });
  });
  //--&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>EDIT 3: The above code works erfectly...for everything except the form action - it's odd, I can even change other attributes of the form - pass the select data as a string to a title attribute for example, but when it's set to the 'action' it doesn't work. Maddening! Has anyone got an idea why the action attribute of the form would fail in particular?</p>
  
  <p>Thanks for all help so far!</p>
  
  <p>FINAL EDIT!</p>
  
  <p>And solved! There was a conflicting input with an ID of 'action', causing the DOm to fail. Resolved &amp; above code works a treat, thanks guys!</p>