How to Use JavaScript to Change the Form Action

How to use JavaScript to change the form action

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 needs to have name in this case:

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

change forms action with javascript

Firstly, the value in your JavaScript should be quoted, as it is a string:

function submitForm(){
    document.getElementById('form1').action = '<?echo base_url().'index.php/folder/controller/controller_function/';?>';
    document.getElementById('form1').submit();
}

Secondly, you're triggering the function on the change event of a button, which probably won't work because buttons do not change. Try binding to the submit event instead, on the form itself:

<form id="form1" name="form1" action="" method="post" onsubmit='submitForm();'>

But I'd do it in the JavaScript, using an event listener:

document.getElementById('form1').addEventListener('submit', function(e) {
    e.preventDefault();
    this.action = '<?echo base_url().'index.php/folder/controller/controller_function/';?>';
    this.submit();
}, false);

How to change form action before form submits

You made few basic mistakes:

• you forgot some {, } in function
• you don't have id="mainform"

Working code.

from flask import Flask

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    return '''<script>
function formFunc(){
  if (document.getElementById("file").files.length == 0) {
    document.getElementById("mainform").action = "http://localhost:5000/nofiles";
  } else {
    document.getElementById("mainform").action = "http://localhost:5000/containsfiles";
  }
}
</script>

<form onclick="formFunc()" id="mainform" method="POST" action="" enctype="multipart/form-data">
   <input type="file" id="file" name="file" />
   <input type="submit" />
</form>'''

app.run()

How can I set the form action through JavaScript?

You cannot invoke JavaScript functions in standard HTML attributes other than onXXX. Just assign it during window onload.

<script type="text/javascript">
    window.onload = function() {
        document.myform.action = get_action();
    }

    function get_action() {
        return form_action;
    }
</script>

<form name="myform">
    ...
</form>

You see that I've given the form a name, so that it's easily accessible in document.

Alternatively, you can also do it during submit event:

<script type="text/javascript">
    function get_action(form) {
        form.action = form_action;
    }
</script>

<form onsubmit="get_action(this);">
    ...
</form>

How to change form action according to selected option?

1. You are using onsubmit and action both.Event handlers run before default actions. They can cancel default actions.

   Since the onsubmit handler always returns false if not admin or
   manager,the action='/login' never works.

   onsubmit and form action together

2. Spelling of location is wrong.

<script>function changeAction() {    const location = document.getElementById("category_id").value;    if (location == "manager") {        document.myform.formaction = "/manager/login";        console.log(document.myform.formaction )        return true;
    }    if (location == "admin") {        document.myform.formaction  = "/admin/login";        console.log(document.myform.formaction )        return true;    }
}</script><div class="container" style="border: solid black; padding-top: 25px; margin-top: 25px">    <div class="container-fliud d-flex justify-content-center">        <h1><strong>Login</strong></h1>    </div>    <hr>    <form id="form_id" action="/login" name="myform" method="POST" class="was-validated" onsubmit="return changeAction()">        <div class="form-group">            <label><strong>Category</strong></label>            <select class="form-control" id="category_id" name="sellist" required>                <option disabled selected value>select an option</option>                <option value="admin">Admin</option>                <option value="manager">Manager</option>                <option value="user">User</option>            </select>        </div>        <div class="form-group">            <label><strong>Email</strong></label>            <input type="email" class="form-control" id="fname" name="email" placeholder="enter your email name" required>        </div>        <div class="form-group">            <label for="password"><strong>Password</strong></label>            <input type="password" id="password" class="form-control" name="password" placeholder="enter your password" required>        </div>        <div class="form-group">            <button type="submit" id="login" class="btn btn-primary" style="width: 100%">Login</button>        </div>        <div class="form-group">            <h5>Don't have account ? <a href="/admin/register">Sign Up</a></h5>        </div>    </form></div>

Changing form action based on select value - with JavaScript

In order to do this you need to specify an onSubmit JavaScript event handler on the form that retrieves the value of the select list and updates the form action.

You can do this using the following code.

//Add onSubmit() event handler to form to call JavaScript method when the form is submitted.
<form name ="form1" onSubmit="actionOnSubmit()" method ="post" target="_blank">

<select id="formchoice" name="formchoice">

<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>

</select>
<input type="submit" value="Go" class="button">
</form>

<script>

function actionOnSubmit()
{

//Get the select select list and store in a variable
var e = document.getElementById("formchoice");

//Get the selected value of the select list
var formaction = e.options[e.selectedIndex].value;

//Update the form action
document.form1.action = formaction;

}
</script>

Note, for this to work you will need to make sure the select list has an id as you are using the document.getElementById[] JavaScript method to retrieve the value of the control.

You could also call the JavaScript in the OnChange() event of the control. The issue with this is that it implies that the value has changed before the form is submitted. If the user simply left the default select list value it is possible that the OnChange() event would never fire.

---

Related Topics