Change URL Submitted to Depending on Form Selection

Question

I have a form which I need to submit to one of three different URLs depending on a selection made in the form.

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!

<form id="myForm" action='/booking/default-path' accept-charset='utf-8' method='get'>
  <select name="paramA" id="paramA">
    <option id="optionA" value="A" selected="selected">Option A</option>
    <option id="optionB" value="B">Option B</option>
  </select>
  <select name="currency" id="currency">
    <option id="GBP" value="GBP" selected="selected">British Pounds</option>
    <option id="EUR" value="EUR">Euros</option>
    <option id="USD" value="USD">US Dollars</option>
  </select>
<input type="submit" value="submit" id="submit" name="submit" />
</form>

Where the three different URLs would be:

../booking/default-path-gbp?...[params here]...

../booking/default-path-eur?...[params here]...

../booking/default-path-usd?...[params here]...

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.

Should be easy I think, but not sure where to start, jQuery used elsewhere, so would prefer to use this framework in any solutions.

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.

I've got to:

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:

<script type="text/javascript">
//<!--
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();
});
//-->
</script>

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?

EDIT 2:

This is the code that's not catching:

<script type="text/javascript">
//<!--
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());
  });
});
//-->
</script>

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?

Thanks for all help so far!

FINAL EDIT!

And solved! There was a conflicting input with an ID of 'action', causing the DOm to fail. Resolved & above code works a treat, thanks guys!

Answer 1

You may try this

add this button or add onclick="javascript:submitPost($(this)); on the inputs you are posting from

<input type="button" value="click to submit" onclick="javascript:submitPost($(this));"/>

Then perform any operation like changing post URL in function submitPost(obj) -

    function submitPost(obj) {
    // Form object 
    //console.dir(obj[0].form); 

    //Get Form Action 
    var formAction = obj[0].form.action;

    // POST to entered EndPoint URL 
    var postURL        = 'http://newurl.com' + '/index.php?' + actionArr[1]; 
    obj[0].form.action = postURL;

    console.log("Posting to => " + postURL);
    obj[0].form.submit();

}

Answer 2

<input type="submit" value="submit" id="submit" name="submit" onclick="$('form').attr( 'action', '/booking/default-path-' + $('#currency').val()"/>

you can use jQuery in this case to get more agile access to DOM-elements and nothing else

EDIT 2: Use noconflict to rename the jquery object when using other frameworks (http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx)

var $j = jQuery.noConflict();  
$j('#myDiv').hide();

About your conflict in ready invoking: Function you pass as parameter to "change" get $ variable from global scope... i think. So in this case you can define local variable and pass it in the scope of internal function that passed to "change":

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!
  var $myLocal = $;
  $('#currency').change(function() {
    var $ = $myLocal;
    $("#myForm").attr("action", "/booking/default-path" + $("#currency").val());
  });
});

Answer 3

You could change the form action on the select change. Something like this, except use an if to determine which currency is selected and change the url accordingly.

Edit: Actually, the other answer is a great way to do it without an if.

$('#currency').change(function() {
  $('#myForm').attr('action', $('#currency').val()));
});

Second Edit:

The second parameter of the .attr() method must be a string, not a function. Your jQuery should look like this:

$(function() {  // this is a shortcut to using $(document).ready()

   $("p.hello").text("The DOM is now loaded and can be manipulated."); //Test line!
   $("#myForm").attr("action", "/booking/default-path" + $("#currency").val());

});

Also you would want to put the test line and the one below it inside of the change event of the #currency select so that it changes the URL when the selection changes. The way you have it now, it would only change the URL on the initial page load and never again.

Answer 4

$( '#currency' ).change( function() {
    var selected = $( '#currency option:selected' );
    $( '#myForm' ).attr( 'action', '../booking/default-path-' + $( selected ).attr( 'id' ).toLowerCase() + '.php' );
} );