javascript - validacion - ¿Por qué estoy enviando el formulario dos veces? jQuery submit() con el botón de opción

validacion de formularios con javascript ejemplos

Question

Estoy usando jQuery para enviar un formulario en una aplicación MVC. Tengo un punto de interrupción dentro del controlador y veo que está siendo golpeado dos veces. ¿Qué estoy haciendo mal?

Aquí está mi jQuery

 (function ($) {
$(document).ready(function () {
$('':radio'').change(function () {
$(''#frmMDR'').submit();
});
});
})(jQuery);

y aquí está la forma html

<form action="/Module/ModuleIndex" id="frmMDR" method="get">
<input id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
<input id="hdnVehicle" name="hdnVehicle" type="hidden" value="" />
</form>

Supongo que no debería estar usando el evento de cambio. Si alguien sabe cómo corregir el problema, me encantaría escuchar cualquier idea. Muchas gracias por cualquier consejo.

Aclamaciones,
~ ck en San Diego

Answer 1

Obtendrá dos visitas porque dos botones de opción están cambiando de estado. Los botones de opción solo permiten seleccionar un elemento de un grupo, de modo que cuando hace clic en un botón de opción, ocurren dos eventos:

1. Se selecciona un nuevo botón de opción
2. El botón de opción seleccionado anteriormente no está seleccionado

Esto es dos eventos y la razón por la cual su código está siendo golpeado dos veces. Para resolverlo, podría asignar una clase a sus botones de opción y luego manejar el evento al hacer clic usando la clase como selector.

<input class="radio" id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input class="radio" id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input class="radio" id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>

Y tu jQuery podría ser:

$(''.radio'').click(function () {
$(''#frmMDR'').submit();
});

Answer 2

Probablemente solo deba verificar por seleccionado dentro de la función de cambio para la cual está seleccionado. De esta forma, solo se activará para el botón de opción seleccionado, y no tendrá que preocuparse por vincular o desvincular ningún evento, y debería funcionar independientemente del método de entrada que lo haya cambiado.

Aquí hay un artículo sobre el manejo de eventos de casillas de verificación y botones de opción en JQuery .