Изменить URL, отправленный в зависимости от выбора формы

Question

У меня есть форма, которую мне нужно отправить на один из трех разных URL-адресов в зависимости от выбора, сделанного в форме.

Я подозреваю, что самое простое решение - использовать jQuery для вставки соответствующего пути перед остальнымипараметров формы при выборе, но не уверен, какой код будет.Любые указатели приветствуются!

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

Где будут три разных URL:

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

.. / booking / default-path-eur? ... [параметры здесь] ...

.. / booking / default-path-usd? ... [параметры здесь]...

Я знаю, что было бы намного проще включить параметр обычным способом и просто использовать один корневой URL-адрес для отправки, но, к сожалению, я отправляюсь в систему eComms вне моего контроля и застрялс необходимостью найти решение этой проблемы.

Я думаю, это должно быть легко, но я не уверен, с чего начать, jQuery используется в другом месте, поэтому предпочел бы использовать эту платформу в любых решениях.

РЕДАКТИРОВАТЬ: Решения ниже выглядят очень близко!Однако я обнаружил другую платформу в игре, которая конфликтует (Mootools) и ее необходимо загрузить через .ready () для правильной установки запуска jQuery.

Мне нужно:

Это выглядит близко, но я не могу заставить его стрелять.Я обнаружил, что существует другая используемая инфраструктура, которая конфликтует (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: приведенный выше код работает неправильно ... длявсе, кроме действия формы - это странно, я даже могу изменить другие атрибуты формы - например, передать выбранные данные в виде строки в атрибут заголовка, но когда он установлен в «действие», он не работает.Maddening!Кто-нибудь получил представление, почему атрибут действия формы может потерпеть неудачу, в частности?

Спасибо за всю помощь!

ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ!

И решено!Был введен конфликт с идентификатором «action», что привело к сбою 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());

});

Также вы хотите поместить тестовую строку и строку под ней в событие change #currency select, чтобы оно изменило 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

Вы можете попробовать это

добавьте эту кнопку или добавьте onclick = "javascript: submitPost ($ (this)); на входах, которые вы публикуете с

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

Затем выполните любую операцию, например, изменение URL-адреса записи в функции 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 4

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

О вашем конфликте в готовом вызове: Функция, которую вы передаете в качестве параметра "change", получает переменную $ из глобальной области видимости ... я думаю. Таким образом, в этом случае вы можете определить локальную переменную и передать ее в область действия внутренней функции, которая передала «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());
  });
});