Clicking 2 submit buttons in the same page

Question

I have a project in .Net Core with Razor Pages and I have the form bellow that contains some input fields and 2 submit buttons.

<form class="form-style" method="post" id="createForm">
  <div class="form-group button-position col-md4">
      <input type="submit" id="placeRequest" name="placeRequest" value="Place Request" class="btn btn-primary" />
  </div>

  <div class="form-group button-position col-md4">
      <input type="submit" value="GetHour" asp-page-handler="Hour" class="btn btn-primary btn-style" formnovalidate />
  </div>
</form>

I need to be able to click the first submit button (GetHour) and then click the second one (Placer Request)

In my Razor Page model I have

 public async Task<IActionResult> OnPost()
{
   //code that will be executed when the Place Request button is clicked
}

 public async Task OnPostGetHour()
 {         
    ////code that will be executed when the Get Hour button is clicked
 }

The problem is that I am not allowed to make the 2 submits. If I only do one of them, it works but the second one does nothing

Is there any way I could make both of the submits?

Answer 1

This is because once you click the first submit button, The page does a redirect and loads again.

This is the nature of form submission. If you want to click both the buttons. Change the button type from "submit" to "button".

Then create 2 click handlers and handle the form submitting using Ajax

<form class="form-style" method="post" id="createForm">
  <div class="form-group button-position col-md4">
      <input onclick="onBtn1Click()" type="button" id="placeRequest" name="placeRequest" value="Place Request" class="btn btn-primary" />
  </div>

  <div class="form-group button-position col-md4">
      <input onclick="onBtn2Click()" type="button" value="GetHour" asp-page-handler="Hour" class="btn btn-primary btn-style" formnovalidate />
  </div>
</form>

Then write 2 JavaScript functions

function onBtn1Click()
{
  //Submit code via Ajax here
}

function onBtn2Click()
{
  //Submit code via Ajax here
}