如何使用JavaScript更改表单操作

Question

我的当前代码如下：

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

现在我想编写一个函数，当满足条件时更改表单的action和method。我该如何编写这段代码？

例如，

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

- enjoylife

Answer 1

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

- bensiu

---

我想你的意思是document['search-theme-form']，document.search-theme-form实际上不起作用。 - gen_Eric

您可能需要在不使用连字符的情况下定义表单名称。 - hop

document.forms.search-theme-form.action 是有效的。 - zhuxiaoxi

Answer 2

尝试这样做：

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

- i100

Answer 3

如果您正在使用jQuery，那么这很简单：

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

- Tejs

---

请记住，这将更改页面上的所有表格。 - labue

如果我想使用jQuery，如何编写不更改其他表单的代码。 - enjoylife

$('#myFormId').attr('action', 'myNewActionTarget.html'); - Kashif Nazar

Answer 4

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

我还遇到了一个问题，就是使用Apache rewrite将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}

我很想知道为什么仅仅设置操作（action）不起作用，欢迎解释。

- Waz