HTML.form.guide

Setting the Form Action with a JavaScript Function

form action javascript

In an HTML form, the action attribute is used to indicate where the form’s data is sent to when it is submitted. The value of this can be set when the form is created, but at times you might want to set it dynamically. In this tutorial, we’ll look at ways in which a form’s action attribute can be set dynamically by JavaScript.

To get started, create an HTML file and paste the following form to its body.

<form onsubmit="return setAction(this)">
  <div>
    <label>Name:</label>
    <input id="name" name="name" type="text">
  </div>
  <div>
    <label>Email:</label>
    <input id="email" name="email" type="email">
  </div>
  <div>
    <input id="submit" type="submit">
  </div>
</form>

The above markup is for a simple form with two fields and a submit button. We’ve set an onsubmit listener which will be called when the form is submitted. This will, in turn, make a call to the setAction() function that we’ll soon define. In the function call, the form passes a reference to itself (this).

Add the following CSS styling:

form label {
  display: inline-block;
  width: 100px;
}

form div {
  margin-bottom: 10px;
}

Add the following JavaScript to the file.

function setAction(form) {
  form.action = "register.html";
  alert(form.action);
  return false;
}

In the above, we assign the passed in form reference to the form variable. Then we set its action attribute with form.action = "register.html". This will result in the form’s action getting set to BASE_URL/register.html. The BASE_URL will be the URL the HTML file is running on. To test that the action was set, we display its value in an alert box. The function then returns false to prevent the form from getting submitted. This is included in the demo code since the /register.html page doesn’t exist, but in a real application, you would want the form to be submitted.

Next, we’ll look at another example where the form action will be set depending on the button used to submit the form.

You can add the following to the HTML file.

<form name="user_form">
  <div>
    <label>Email:</label>
    <input id="user_email" name="user_email" type="email">
  </div>
  <div>
    <label>Password:</label>
    <input id="user_password" name="user_password" type="password">
  </div>
  <div>
    <input id="login" type="submit" value="Login" onclick="return loginUser()">
  </div>
  <div>
    <input id="register" type="submit" value="Register" onclick="return registerUser()">
  </div>
</form>

The above form has two buttons that have been set up withonclick listeners. Each listener makes a call to a different button when clicked.

Add the following JavaScript to the file.

function loginUser() {
  document.user_form.action = "login.html";
  alert(document.user_form.action);
  return false;
}

function registerUser() {
  document.user_form.action = "register.html";
  alert(document.user_form.action);
  return false;
}

loginUser() gets called when the Login button is clicked. The function sets /login.html as the value of the form’s action attribute. In this example, we get a reference to the form with document.user_form. For this to work, the name attribute of the form has to be set to user_form. After setting the action attribute, we alert the value and return false thus preventing form submission.

registerUser is called when the Register button is clicked and it sets ./register.html as the form’s action.

See the code in action below:

Also see:

See Also

Categories