如何使用 JavaScript 更改表单操作 [重复]答案

【问题标题】：How to use JavaScript to change the form action [duplicate]如何使用 JavaScript 更改表单操作 [重复]
【发布时间】：2011-07-18 17:15:38
【问题描述】：

我目前的代码如下：

<div class="fr_search">   
  <form action="/"  accept-charset="UTF-8" method="post" id="search-theme-form">
  .......
  </form>
</div>

现在我想编写一个函数来在满足条件时更改表单操作和方法。这段代码怎么写？

例如，

function test() {
   if (selectedIndex === 1)....
} // How do I write this code?

【问题讨论】：

标签： javascript html forms

【解决方案1】：

如果你使用 jQuery，就这么简单：

$('form').attr('action', 'myNewActionTarget.html');

【讨论】：

请记住，这将更改页面上的所有表单。
如果我想使用jquery，如何编写不改变其他形式的代码。
@enjoylife $('#myFormId').attr('action', 'myNewActionTarget.html');

【解决方案2】：

试试这个：

var frm = document.getElementById('search-theme-form') || null;
if(frm) {
   frm.action = 'whatever_you_need.ext' 
}

【讨论】：

【解决方案3】：

function chgAction( action_name )
{
    if( action_name=="aaa" ) {
        document.search-theme-form.action = "/AAA";
    }
    else if( action_name=="bbb" ) {
        document.search-theme-form.action = "/BBB";
    }
    else if( action_name=="ccc" ) {
        document.search-theme-form.action = "/CCC";
    }
}

在这种情况下，您的表单需要有name：

<form action="/"  accept-charset="UTF-8" method="post" name="search-theme-form" id="search-theme-form">

【讨论】：

我认为你的意思是document['search-theme-form']，document.search-theme-form 实际上不起作用。
您可能需要定义不带连字符的表单名称
document.forms.search-theme-form.action 工作

【解决方案4】：

我想使用 JavaScript 来更改表单的操作，因此我可以在同一个表单中使用不同的提交输入链接到不同的页面。

使用 Apache 重写将 example.com/page-name 更改为 example.com/index.pl?page=page-name 时，我还遇到了额外的复杂情况。我发现更改表单的操作会导致 example.com/index.pl（没有页面参数）被呈现，即使预期的 URL (example.com/page-name) 显示在地址栏中。

为了解决这个问题，我使用 JavaScript 插入一个隐藏字段来设置页面参数。我仍然更改了表单的操作，只是地址栏显示了正确的 URL。

function setAction (element, page)
{
  if(checkCondition(page))
  {
    /* Insert a hidden input into the form to set the page as a parameter.
     */
    var input = document.createElement("input");
    input.setAttribute("type","hidden");
    input.setAttribute("name","page");
    input.setAttribute("value",page);
    element.form.appendChild(input);

    /* Change the form's action. This doesn't chage which page is displayed,
     * it just make the URL look right.
     */
    element.form.action = '/' + page;
    element.form.submit();
  }
}

形式：

<input type="submit" onclick='setAction(this,"my-page")' value="Click Me!" />

这是我的 Apache 重写规则：

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteRule ^/(.*)$ %{DOCUMENT_ROOT}/index.pl?page=$1&%{QUERY_STRING}

我有兴趣解释为什么只是设置操作不起作用。

【讨论】：