根據表單選擇提交的更改URL

Question

根據表單中所做的選擇，我需要將表單提交給三個不同的URL之一。

我懷疑最簡單的解決方案是使用jQuery插入適當的路徑之前，其餘的表單參數進行選擇，但不知道代碼將是什麼。任何指針greratly讚賞！

<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> 

其中三個不同的網址是：這裏

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

../booking/default -path-歐元？... [這裏PARAMS] ...

這裏../booking/default-path-usd?...[params] ...

我知道這將是一個很容易以通常的方式合併參數，並只使用一個提交URL根目錄，但不幸的是，我正在向我的控制系統提交一個eComms系統，並且一直在尋找解決方案。

應該很容易我認爲，但不知道從哪裏開始，其他地方使用jQuery，所以寧願在任何解決方案中使用此框架。

編輯：下面的解決方案看起來非常接近！然而，我發現了另一個正在發揮作用的框架（Mootools）和nee通過.ready（）加載來設置正確觸發的jQuery。

我得：

這接近，但我不能讓它火。我已經troubleshot有使用另一種框架; S衝突的（MooTools的），所以我通過使用現成觸發代碼：

<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> 

但沒有骰子。測試線沒有代碼的其餘部分，所以jQuery的工作，但它沒有與其他代碼工作。很近！我哪裏錯了？

編輯2：

這是不是捕捉代碼：

<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> 

編輯3：上面的代碼工作erfectly ...以外的形式行動的一切 - 這是奇怪的，我甚至更改表單的其他屬性 - 例如將選擇數據作爲字符串傳遞給title屬性，但是當它設置爲「action」時，它不起作用。鬱悶了！有沒有人知道爲什麼表單的action屬性會失敗？

感謝您的所有幫助！

FINAL EDIT！

並解決！有一個與「action」ID相沖突的輸入，導致DOm失敗。已解決&上面的代碼很有用，謝謝你們！

Answer 1

您可以更改選擇更改的表單操作。 就像這樣，除了使用if來確定選擇哪種貨幣並相應地更改url。

編輯：其實，其他答案是一個很好的方式來做到這一點，沒有一個if。

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

第二編輯：

的.attr（）方法的第二個參數必須是字符串，而不是一個函數。您的jQuery的應該是這樣的：

$(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()); 

}); 

而且你會想要把測試線和它下面的一個內部的#currency的變化情況選擇，以便它改變URL選擇改變時。您現在的方式是，它只會在初始頁面加載時更改URL，而不會再次加載。

Answer 2

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

Answer 3

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

你可以使用jQuery在這種情況下，去DOM元素更加靈活的接入，並沒有別的

編輯2： 使用noconflict使用其他框架時重命名jQuery對象（http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx）

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

關於在準備調用您的衝突：你傳遞的參數「改變」得到全球範圍內$變量 功能...我認爲。所以在這種情況下，你可以定義局部變量，並通過它傳遞給「變」內部函數的範圍：

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 4

你可以試試這個

添加此按鈕或添加的onclick =「JavaScript的： submitPost（$（本））;在輸入您從

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

張貼然後像功能submitPost（OBJ）改變後的URL進行任何操作 -

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(); 

}