Two Buttons type Submit in the same form

Asked

Viewed 313 times

1

I have the following situation:

a form and two buttons (Submit), and the button (Register new point of sale) will register the data in the database and re-load the registration page so that the user fills the data of a new point of sale, the other button (Finish registration) will register the data in the database and should be directed to the registration completion screen.

The problem is that I can not make the moment that the button (Finish the registration) is clicked it make the record of the data in the database.

I am developing in pure Javascript and am starting....

Follow the codes:

  <form method="post"> 

    <!-- BOTÕES DE CADASTRO-->
    <div class="button">
      <input type="submit" value="Cadastrar novo ponto de venda" name="send" value="new-register" id="Cadastrar novo ponto de venda" class="new-register" onclick="sendform(this.id)"/>

      <input type="submit" value="Finalizar o cadastro" name="send" value="register" id="Finalizar o cadastro" class="register" onclick="sendform(this.id)" />         
    </div>

  </form>
function sendform(idButton) {
    let form = document.forms[0];
    if (idButton == "Cadastrar novo ponto de venda") {
        form.action = "/register-pdv";
    }
    if (idButton == "Finalizar o cadastro") {
        form.action = "/registered-pdv";
    }
}

Thanks for your help.

Abs

  • 1

    Is there any reason 2 input type submit? Why not just use the html tag button

  • In the form, I need two buttons one to register only one store and another to register more stores. When I came across the problem I researched and saw that they used two inputs instead of the button. As I’m starting out, it may not be the best option. Feel free to suggest, as I’m learning...

1 answer

1

There are some different ways to solve your problem:

Using HTML5

The formaction attribute does exactly what you want, it replaced the standard form action for the button.

<input type="submit" formaction="/register-pdv">
<input type="submit" formaction="/registered-pdv">

Using Javascript

With javascript you need to create an event that when the user clicks it changes the form action. For the case of two buttons the simplest way to do would be to place a click event on one of the buttons that changes the form action:

function changeFormAction() {
    form = document.getElementById("my-form");
    form.action = "/registered-pdv"
}

<form id="my-form" action="/register-pdv">
    <input  type="submit">
    <input onclick="changeFormAction()" type="submit">
</form>
  • Thank you!! The two forms direct to the page I want, however when I click on the button that has the event the data is not recorded in the database. Everything is working, except the question of data registration in the database when I click on the button to finish the registration.

  • I got it!!! I had not created the route to save the data to the database when I finished the record. THANK YOU SO MUCH FOR THE HELP!!!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.