Confirm.cshtml submit button position on bottom

Hi guys,

For some reason it is not possible to place the confirm button on the bottom of the page. When i do this the button is outside the <form> and works only on the top of the page. I have tried moving the BeginRouteForm and nesting it but no luck.

Can someone tell me what to do here?

I really need them on the bottom of the page?

@model CheckoutConfirmModel
@using Nop.Web.Models.Checkout;
@{
  Layout = "~/Views/Shared/_ColumnsOne.cshtml";

  //title
  Html.AddTitleParts(T("PageTitle.Checkout").Text);
  //page class
  Html.AppendPageCssClassParts("cart");
  Html.AppendPageCssClassParts("confirm");
}
<div id="confirm" class="confirm__page">
  <div class="wrap">
    <div class="row">
      <div class="col-lg-12">
        @Html.Action("CheckoutProgress", "Checkout", new { step = CheckoutProgressStep.Confirm })
        <h1 class="confirm__title">@T("Checkout.ConfirmYourOrder")</h1>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-sm-12 col-lg-12 flex__item">
        @Html.Widget("checkout_confirm_top")
        <div class="section confirm-order">
          @using (Html.BeginRouteForm("CheckoutConfirm", FormMethod.Post, new { id = "confirm-order-form" }))
          {
            <script type="text/javascript">
              $(document).ready(function () {
                $('.confirm-order-next-step-button').click(function () {
                  //terms of service
                  var termOfServiceOk = true;
                  if ($('#termsofservice').length > 0) {
                    //terms of service element exists
                    if (!$('#termsofservice').is(':checked')) {
                      $("#terms-of-service-warning-box").dialog();
                      termOfServiceOk = false;
                    } else {
                      termOfServiceOk = true;
                    }
                  }
                  if (termOfServiceOk) {
                    //$('#confirm-order-form').submit();
                    //$('.confirm-order-next-step-button').attr('disabled', 'disabled');
                    return true;
                  } else {
                    return false;
                  }
                });
              });
            </script>
            if (!String.IsNullOrEmpty(Model.MinOrderTotalWarning))
            {
            <span class="min-order-warning">@Model.MinOrderTotalWarning</span>
            }
            else
            {
              if (Model.TermsOfServiceOnOrderConfirmPage)
              {
                <div id="terms-of-service-warning-box" title="@T("Checkout.TermsOfService")" style="display: none;">
                  <p>@T("Checkout.TermsOfService.PleaseAccept")</p>
                </div>
                <div class="terms-of-service">
                  <input id="termsofservice" type="checkbox" name="termsofservice"/>
                  <label for="termsofservice">@T("Checkout.TermsOfService.IAccept")</label>
                  <a class="read" id="read-terms">@T("Checkout.TermsOfService.Read")</a>
                  <script>
                    $(document).ready(function() {
                      $('#read-terms').on('click', function(e) {
                        e.preventDefault();
                        displayPopupContentFromUrl('@Url.RouteUrl("TopicPopup", new {SystemName = "conditionsofuse"})', '@T("Checkout.TermsOfService")');
                      });
                    });
                  </script>
                </div>
              }

              <script>
                $('#confirm-order-form').on('submit', function () {
                  var button = $(this).find('input[type="submit"][name="nextstep"]');
                  setTimeout(function() {
                    button.attr('disabled', 'disabled');
                  }, 0);
                });
              </script>
            }
            if (Model.Warnings.Count > 0)
            {
            <div class="message-error">
              <ul>
                @foreach (var warning in Model.Warnings)
                {
                  <li>@warning</li>
                }
              </ul>
            </div>
            }
          }
        </div>
        @Html.Widget("checkout_confirm_bottom")
        <div class="section order-summary">
          @Html.Action("OrderSummary", "ShoppingCart", new { prepareAndDisplayOrderReviewData = true })
        </div>
        <div class="buttons">
          <input type="submit" name="nextstep" value="@T("Checkout.ConfirmButton")" class="btn btn--primary" />
        </div>
      </div>
    </div>
  </div>


</div>

You could add javascript similar to:

<script>

           $(document).on("click", "#outsideOfFormButtonId", function(){
                
                   $('#confirm-order-form').submit(); //this is based on what you posted
                  // ConfirmOrder.save() <- another possible option
           });

</script>