Jquery function to disable submit button after submit is not triggering

Question

I took it from here: How do I prevent multiple form submission in .NET MVC without using Javascript?

This is the function not triggering:

<script>
    $(document).ready(function () {
        $('#frmEnvio').submit(function () {
            $(this).find(':submit').attr('disabled', 'disabled');
        });
    });
</script>

This is the form, it's a confirmation form. As you can see I have a form-horizontal that contains details and another Form called frmEnvio that contains the submit button.

@model PedidosInstitucionales.ViewModels.PedidoViewModel
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h3><b>Enviar Pedido</b></h3>

<div class="input-group">
    <div class="col-md-offset-2 col-md-4" style="text-align: left; width: 100%;">
        <a href='@Url.Action("Index", "Pedidos")'><i class="fas fa-backward"></i> Volver al Listado</a>
    </div>
    <div class="col-md-offset-2 col-md-4" style="text-align: center; width: 100%;">
        <h3>¿Confirma el Envío de este Pedido? Asegúrese de que los datos sean correctos.</h3>
    </div>
</div>

<br>
<div class="input-group">
    <div class="col-md-12" style="text-align: center; width: 100%;">
        <h4><b>Observaciones</b></h4>
        @Html.DisplayFor(Model => Model.Observaciones)
    </div>
</div>
<div>
    <table id="Header" class="table table-striped table-bordered table-hover" style="width:100%">
        <thead>
            <tr>
                <th>Pedido Nro.</th>
                <th>Cliente</th>
                <th>Fecha de Alta</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    @Html.DisplayFor(Model => Model.NumPedido)
                </td>

                <td>
                    @Html.DisplayFor(Model => Model.cliente.Descripcion)
                </td>

                <td>
                    @Html.DisplayFor(Model => Model.sFechaAlta)
                </td>
            </tr>
        </tbody>
    </table>
</div>
<h3>Detalle de Productos</h3>
<div class="form-horizontal bg-light" name="frmEnvio" id="frmEnvio">
    <table id="tblPedidosDet" class="display compact table-striped table-bordered table-hover" style="font-size: 12px; color:black; width:100%">
        <thead>
            <tr>
                <th>Producto</th>
                <th>Ean</th>
                <th>Cod. Elea Phoenix</th>
                <th>Droga</th>
                <th>Cantidad por Unidad</th>
            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model.LstPedidoDetViewModel)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Descripcion)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.Ean)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.CodProducto)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.Droga)
                    </td>

                    <td>@Html.DisplayFor(modelItem => item.Cantidad)</td>
                </tr>
            }
        </tbody>
    </table>
</div>
<br>
<div class="col-md-12">
    <div class="alert alert-danger d-none" role="alert" id="ddlalert">

    </div>
</div>
<br>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-actions no-color">
        <input type="submit" id="btnEnviarPedido" name="btnEnviarPedido" class="btn btn-default"  value="Enviar Pedido" />
    </div>
}

This is the controller, this triggers ok.

[AuthorizeCliente]
[HttpPost, ActionName("Envio")]
[ValidateAntiForgeryToken]
public ActionResult EnvioConfirmed(int id)
{
    bool bPedidoEnviado = false;
        using (var dbContextTransaction = db.Database.BeginTransaction())
        {
            Pedido pedido = db.Pedido.Find(id);
            try
            {

                if (pedido.PedidoDet.Count == 0)
                    throw new Exception("El Pedido no contiene productos o válidos o se encuentra vacío.");

                pedido.FechaEnvio = DateTime.Now;
                GenerarXML(pedido);
                pedido.Enviado = (short) 1;

                db.SaveChanges();

                dbContextTransaction.Commit();
                bPedidoEnviado = true;

                CrearArchivoExcel(pedido);

                if (pedido.Cliente.PedidosControlados == 1)
                {
                    EnviarMailControlador(pedido);
                }

                EnviarMailAdministradores(pedido);

                return RedirectToAction("Index");
            }
            catch (Exception ex)
            {
                if (!bPedidoEnviado) dbContextTransaction.Rollback();
                PedidoViewModel oPedidoViewModel = CargarDetallePedido(pedido);
                oPedidoViewModel.msgError = ex.Message;
                return View(oPedidoViewModel);
            }
        }
    }

But the element you’re calling submit on is not a form element, but a div element: so I’m not even sure how the form is submitted. Also, even if form submission works—the page is probably reloaded on submit so you do not persist the disabled state of the submit button. — Terry, Mar 05 '20 at 21:38
Even if I use "frmEnvio" as the name for the main Form it doesn't work. But i'm not sure where to put the submit button then, is it ok there inside that DIV or should be inside the Form itself? I Edited my post and changed the name frmEnvio back to the main Form, i had changed it when testing different things. — JCIsola, Mar 05 '20 at 21:50

JCIsola · Accepted Answer · 2020-03-05T22:31:16.960

0

Looks like the problem is I used the form name, using just form (and without #) it's working fine.

        $('form').submit(function () {
            $(this).find(':submit').attr('disabled', 'disabled');
        });

edited Mar 05 '20 at 22:31

answered Mar 05 '20 at 22:25

JCIsola

110
1
11

score 0 · Answer 2 · answered Mar 05 '20 at 22:58

<script>
    $(document).ready(function () {
        $('#frmEnvio').submit(function () {
            $(this).find(':submit').attr('disabled', 'disabled');
        });
    });
</script>

change this line

  $(this).find(':submit').attr('disabled', 'disabled');

to

  $(this).find(':submit').attr('disabled', true);

you need to pass a boolean value as 2nd parameter for attr function, you are passing a string with the name of the attribute.

Also your form does not have an Id, and you are rendering it using Html tag helpers

Jquery function to disable submit button after submit is not triggering

2 Answers2