Jquery функция, чтобы отключить кнопку отправки после отправки не запускается

Question

Я взял это отсюда: Как предотвратить многократную отправку формы в. NET MVC без использования Javascript?

Эта функция не запускается:

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

Это форма, форма подтверждения. Как вы можете видеть, у меня есть горизонтальная форма, которая содержит детали, и другая форма с именем frmEnvio, которая содержит кнопку отправки.

@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>
}

Это контроллер, с этим триггером все в порядке.

[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);
            }
        }
    }

Answer 1

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

изменить эту строку

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

на

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

вам необходимо передать логическое значение в качестве второго параметра для функции attr, вы передаете строку с именем атрибута.

Также ваша форма не имеет идентификатора, и вы отображаете ее с помощью Html помощников по тегам

Answer 2

Похоже, проблема в том, что я использовал имя формы, просто форма (и без #) все работает нормально.

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