1 button 2 actions php

Every HTML form deals with the server-side with an action attribute. The HTML action Attribute is used to specify where the form data is to be sent to the server after submission of the form. As the destination of our data is stored in the action attribute each and every button will lead us to the same location. To overcome this difficulty we have to use the formaction attribute of HTML input and buttons.

Approach: The formaction attribute is used to specify where to send the data of the form. After submission of the form, the formaction attribute is called. The form data is to be sent to the server after the submission of the form. It overrides the feature of the action attribute of a <form> element. We are going to  implement our problem using this ‘formaction’ attribute

Let’s learn the steps of performing multiple actions with multiple buttons in a single HTML form:  

  • Create a form with method ‘post’ and set the value of the action attribute to a default URL where you want to send the form data.
  • Create the input fields inside the as per your concern.
  • Create a button with type submit. This button will trigger the default action attribute of the form and send our input data to that URL.
  • Create another button with type submit. Also add a ‘formaction‘ attribute to this button and give it the value of the secondary URL where you want to send the form-data when this button is clicked.
  • The formaction attribute will override the action attribute of the form and send the data to your desired location.

Syntax :

<form action="/DEFAULT_URL" method="post">
  <!-- Input fields here -->
  
  <!-- This button will post to the 
  /DEFAULT_URL of the form-->
  <button type="submit">BUTTON 1</button>
  
  <!-- This button will post to the custom 
  URL of the formaction attribute-->
  <button type="submit" formaction="/URL2">
    BUTTON 2
  </button>
</form>

Example :

HTML

<!DOCTYPE html>

<html lang="en">

<body>

        Username:<br>

        <input type="text" name="username">

        <br>

        Email id:<br>

        <input type="text" name="email_id">

        <br><br>

        <button type="submit" formaction="#">

            Submit 1

        </button>

        <button type="submit" formaction="#">

            Submit 2

        </button>

    </form>

</body>

</html>

Output :

1 button 2 actions php


This came up the other day. I forget where, but I jotted it down in my little notepad for blog post ideas. I wrote it down because what I was overhearing was way over-complicating things.

Say you have a form like this:

<form action="/submit">
  
  <!-- inputs and stuff -->

  <input type="submit" value="Submit">

</form>

When you submit that form, it’s going to go to the URL `/submit`. Say you need another submit button that submits to a different URL. It doesn’t matter why. There is always a reason for things. The web is a big place and all that.

I web searched around for other ways people have tried handling this.

One way was to give up on submitting to different URL’s, but give each submit button a shared name but different value, then check for that value when processing in order to do different things.

<input type="submit" name="action" value="Value-1">
<input type="submit" name="action" value="Value-2">

You could read that value during your processing and redirect if you desired. But that’s a workaround for the stated problem.

Another way was to use JavaScript to change the action of the <form> when the button was clicked. There are any number of ways to do that, but it boils down to:

<form name="form">

  <!-- inputs and stuff -->

  <input type="submit" onclick="javascript: form.action='/submit';">
  <input type="submit" onclick="javascript: form.action='/submit-2';"> 

</form>

Which of course relies on JavaScript to work, which isn’t a huge deal, but isn’t quite as progressive enhancement friendly as it could be.

The correct answer (if I may be so bold) is that HTML has this covered for you already. Perhaps it’s not as well-known as it should be. Hence the blog post here, I suppose.

It’s all about the formaction attribute, which you can put directly on submit buttons, which overrides the action on the form itself.

<form action="/submit">
  
  <input type="submit" value="Submit">
  
  <input type="submit" value="Go Elsewhere" formaction="/elsewhere">
  
</form>

That’s all. Carry on.

Can one form have two actions?

Let's learn the steps of performing multiple actions with multiple buttons in a single HTML form: Create a form with method 'post' and set the value of the action attribute to a default URL where you want to send the form data. Create the input fields inside the as per your concern. Create a button with type submit.

Can you have 2 submit buttons on form?

yes, multiple submit buttons can include in the html form. One simple example is given below.

Does button have action attribute?

Definition and Usage The formaction attribute specifies where to send the form-data when a form is submitted. This attribute overrides the form's action attribute. The formaction attribute is only used for buttons with type="submit" .

How to give an action to a button in HTML?

The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute. If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in above example, you can also use <button type="submit"> .