如何使用 JavaScript 更改表单操作

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5361751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:51:52  来源:igfitidea点击:

How to use JavaScript to change the form action

javascripthtmlforms

提问by enjoylife

My current code is as follows:

我目前的代码如下:

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

Now I want to write a function to change the form action and method, when a condition is met. How do I write this code?

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

For example,

例如,

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

回答by bensiu

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

and your form need to have nameis this case

你的表格需要有name这种情况

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

回答by i100

Try this:

尝试这个:

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

回答by Tejs

If you're using jQuery, it's as simple as this:

如果您使用的是 jQuery,它就像这样简单:

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

回答by Waz

I wanted to use Javascript change a form's action, so I could have different submit inputs within the same form linking to different pages. I also had the added complication of using Apache rewrite to change example.com/page-nameinto example.com/index.pl?page=page-name. I found that changing the form's action caused example.com/index.pl(with no page parameter) to be rendered, even though the expected URL (example.com/page-name) was displayed in the address bar. To get around this, I used Javascript to insert a hidden field to set the page parameter. I still changed the form's action, just so the address bar displayed the correct URL.

我想使用 Javascript 更改表单的操作,因此我可以在链接到不同页面的同一表单中使用不同的提交输入。我还增加了使用 Apache 重写更改example.com/page-nameexample.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(); 
  }
} 

In the form:

在形式:

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

Here are my Apache rewrite rules:

这是我的 Apache 重写规则:

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

I'd be interested in any explaination as to why just setting the action didn't work.

我对任何关于为什么设置操作不起作用的解释感兴趣。

回答by ashraf mohammed

 // i assume that you want to change form action based on drop-down choice 
 function change_action(form1){
if(form1.mydropdown_name.selectedIndex===1){
    form1.action = "aaaa.php";
}else{
         form1.action = "bbbb.php";
    }
 }

 //how to use
 <select name='mydropdown_name' id='mydropdown_id' onchange="change_action(this.form)"><option value="1">first</option><option value="2">second</option></select>
 //this way you do not have to provide js function with form name.