jquery - 根据表单选择更改提交的 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？...[此处的参数]...

../booking/default-path-eur？...[此处的参数]...

../booking/default-path-usd？...[此处的参数]...

我知道以通常的方式合并参数并仅使用一个提交 URL 根会容易得多，但不幸的是，我正在向不受我控制的电子商务系统提交，并且必须找到解决方案对此。

我认为应该很容易，但不确定从哪里开始，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:上面的代码工作正常......除了表单操作之外的所有内容 - 这很奇怪，我什至可以更改表单的其他属性 - 例如，将选择数据作为字符串传递给标题属性，但是当它设置为“操作”，但不起作用。令人抓狂!有谁知道为什么表单的操作属性会特别失败？

感谢迄今为止的所有帮助!

最终编辑!

解决了! ID 为“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());

});

此外，您还希望将测试行及其下方的测试行放在 #currency 选择的更改事件内，以便在选择更改时更改 URL。按照您现在的方式，它只会更改初始页面加载时的 URL，而不会再更改。