使用jQuery更改按钮单击时的表单动作和动词答案

【问题标题】：Change form action and verb on button click using jQuery使用jQuery更改按钮单击时的表单动作和动词
【发布时间】：2014-08-06 01:18:18
【问题描述】：

我有一个表单，它有一个需要使用 POST 和特定操作的主提交按钮，但我也有几个按钮需要使用 GET 提交表单和不同的操作。

我能看到的唯一方法是使用 jQuery .click() 事件拦截提交，并使用以下方式传递表单变量：

$('#btnClick').click(function (event) {

    event.preventDefault;

    input = $(':input');
    window.location.href = '/action/?' + input;

    return false;    
})

这会产生一个混乱的查询字符串，并暴露一些包含冗长数据的隐藏字段。使用 jQuery 拦截表单提交和使用 GET 重新发送的最佳方法是什么？

顺便说一句，我用几个按钮定位不同的 MVC GET 控制器操作，而主按钮使用 POST 到当前视图的控制器操作。

编辑

虽然我还没有尝试过，但迈克提供了一个我没想到的想法。我可以这样做：

$("form").attr("action", "/action");
$("form").attr("method", "post");

或

$("form").attr("action", "/action");
$("form").attr("method", "get");

但后者仍然会暴露一些杂乱无章的变量，主要是隐藏字段。有没有办法在不手动操作查询字符串的情况下排除隐藏字段？

【问题讨论】：

我要说的是处理提交事件并使用ajax。如果没有 ajax，你可能会改变它。不过没试过。
我想我在重定向到另一个页面时从未使用过 Ajax。这是你说的吗？
不，我是说如果您使用 ajax，您可以拦截他们在提交事件中所做的事情。如果不是，您可能只需更改表单本身的表单方法属性。这就是我首先要尝试的。这些天我做了很多 ajax...
该表单有一个使用 POST 提交的按钮和其他几个使用 GET 提交的按钮。
要拦截表单提交，您需要在 jquery 中处理提交事件。要完全取消，只需返回 false。您可能可以执行类似 $("form").attr("method", "post") 的操作。

标签： jquery html asp.net-mvc forms

【解决方案1】：

最好禁用不需要的字段，以免它们提交，否则表单可以正常工作。因此，例如，如果默认情况下您通过 POST 提交表单，但您有另一个按钮 #search 执行 GET 但您想排除某些元素：

$('#search').click(function (event) {
    event.preventDefault;
    $(this)
        .parents("form")
            .find("input.excludeOnSearch")
                .prop("disabled", true)
            .end()
            .attr("method", "GET")
            .submit();
})

【讨论】：

我喜欢这个。防止提交不需要的字段的好解决方案。谢谢。

【解决方案2】：

请看这里：http://jsbin.com/cakov/1/edit?html,js,output

$("form").on("submit", function(e) {
  var method = $("form").attr("method");
  if(method === "POST") {
    $("form").attr("method", "GET");
  } else {
    $("form").attr("method", "POST");
  }

  alert($("form").attr("method"));

  return false;
});

此代码有效地执行了切换并将 http 方法更改为，在这种情况下，与原来的相反。最后的return语句取消了表单的提交。

我想这就是你要问的？

【讨论】：

Mike，你确实为我提供了更好的选择，并且 dyagmin 对此进行了扩展。我认为他的回答会按照我需要的方式工作。希望我可以将您的两个答案都标记为正确。 ;)