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？... [params here] ...

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

我知道以通常的方式合并参数并且只使用一个提交URL根目录要容易得多，但不幸的是我正在提交到我无法控制的eComms系统，并且不得不找到解决方案对此。

我认为应该很容易，但不确定从哪里开始，jQuery在别处使用，所以更愿意在任何解决方案中使用这个框架。

编辑：以下解决方案看起来非常接近！但是我发现了另一个正在发挥冲突的框架（Mootools），并且需要通过.ready（）加载来正确触发jQuery。

我必须：

这看起来很接近，但我无法解决它。我有麻烦，还有另一个框架正在使用; 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：上面的代码工作正常...除了表单操作之外的所有内容 - 它很奇怪，我甚至可以更改表单的其他属性 - 例如，将选择数据作为字符串传递给title属性，但是当它设置为'动作'它不起作用。郁闷了！有没有人知道为什么表单的action属性会失败？

到目前为止，感谢您的帮助！

最终编辑！

并解决了！输入ID为'action'时出现冲突，导致DOm失败。已解决＆amp;上面的代码是一种享受，谢谢你！

Answer 1

您可以更改选择更改的表单操作。 ~~这样的事情，除了使用if来确定选择哪种货币并相应地更改网址。~~

编辑：实际上，另一个答案是没有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 select的change事件中，以便在选择更改时更改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（$（this））;关于您要发布的输入

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

}

根据表单选择更改提交的URL

4 个答案: