How to use JavaScript to change the form action

Question

My current code is as follows    lt div class  fr search  gt        lt form action      accept-charset  UTF-8  method  post  id  search-theme-form  gt               lt  form gt   lt  div gt    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

User · Answer

I wanted to use JavaScript to 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-name into 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.

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:

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

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

User · Answer

Try this   var frm   document getElementById  search-theme-form      null  if frm       frm action    whatever you need ext

User · Answer

function chgAction  action name         if  action name   quot aaa quot              document search-theme-form action    quot  AAA quot             else if  action name   quot bbb quot              document search-theme-form action    quot  BBB quot             else if  action name   quot ccc quot              document search-theme-form action    quot  CCC quot            And your form needs to have name in this case   lt form action  quot   quot   accept-charset  quot UTF-8 quot  method  quot post quot  name  quot search-theme-form quot  id  quot search-theme-form quot  gt

User · Answer

If you re using jQuery  it s as simple as this      form   attr  action    myNewActionTarget html

[javascript] How to use JavaScript to change the form action

Examples related to javascript

Examples related to html

Examples related to forms