Evento onclick en jquery no funciona en chrome

Tengo un formulario con un menu desplegable en el que el navegante elije su tarjeta de crédito. Tengo una función de jquery que hace que si elije una tarjeta en particular me muestre dos campos ocultos que solo corresponden a una tarjeta específica.

Funciona perfecto en firefox. Pero no en chrome. Vi que el evento onclick en chrome tiene problemas. ¿Cómo puedo solucionarlo?

1 Respuesta

Respuesta
2

Hola Pablo Muggeri, es raro esto que comentas.. ¿podrías poner el código javascript que lanza el onclick para poder revisarlo y hacer alguna prueba?

Sí. Voy a pedírselo al programador y ya te lo paso. Si querés ver la página mientras tengo el javascript en concreto, es www.manosporhermanos.org.

Allí tenés que hacer clic en "Doná Ahora" en el menú principal o ir directamente a www.manosporhermanos.org/donar.html y, haciendo clic, en "Hacé Clic y Doná Ahora", se te abre el formulario en un popup. Si elegís tarjeta de crédito como método de ayuda, se te abrirá el formulario de tarjetas de crédito. Si lo abres en firefox, cuando elegís American Express en el menú desplegable de tarjetas de crédito, te aparecen dos campos ocultos (porque no son necesarios para otras tarjetas): "fecha de vencimiento" y "código".
Eso ocurre en firefox. Pero si hacés lo mismo en Chrome, esos campos no se muestran.

Gracias. En cuanto pueda subo el código

el archivo donate.js tiene el siguiente código

var donate={initialize:function(){this.initializeForm()},initializeForm:function(){var e=this;$("[data-subscribe]").click(function(e){$(".donate-overlay").show(),$(".donate-form[data-form="+$(this).data("subscribe")+"]").show(),e.preventDefault()}),$(".donate-form [data-action=close]").click(function(t){var n=$(this).closest("form"),r=confirm("Si cierra el formulario de donación se perderán los datos ingresados, ¿Está seguro de que desea cerrar?");t.preventDefault(),r&&e.closeForm(n)});var t=$(".donate-form");t.submit(function(){return e.sendForm(this),!1}).css("left",($(window).width()-t.first().outerWidth())/2);var n=function(){var t=$(".donate-form").get(0);e.switchCard(t)};$("[name=tarjeta]").change(n).click(n).keypress(n)},closeForm:function(e){e.hide().get(0).reset(),$("#amex-fields").hide(),$(".donate-overlay").hide()},validateForm:function(e){var t=$(e).data("form")=="credit-card"?"validateCreditCard":"validateCBU";return this[t](e)},validateCBU:function(e){var t=0,n=e;if(n.mailname.value==""||n.nacimiento.value==""||n.nombre.value==""||n.telefono.value==""||n.numero_cbu.value==""||n.importe.value=="")return alert("Por favor complete todos los datos"),t=0,!1;var r=0;return n.numero_cbu2.value!=n.numero_cbu.value?(n.numero_cbu2.value=" ",n.numero_cbu.value=" ",alert("El número de CBU ingresado no coincide con el anterior, por favor ingrese nuevamente ambos números"),correct01=0,!1):!0},validateCreditCard:function(e){var t=0,n=e;if(n.mailname.value==""||n.nacimiento.value==""||n.nombre.value==""||n.telefono.value==""||n.numero_tar.value==""||n.importe.value==""||n.tarjeta.value=="seleccion"||n.tarjeta.value=="amex"&&(n.fecha_ven.value==""||n.codigo.value==""))return alert("Por favor complete todos los datos"),t=0,!1;var r=0;return n.numero_tar2.value!=n.numero_tar.value?(n.numero_tar2.value="",n.numero_tar.value="",alert("El número de tarjeta ingresado no coincide con el anterior, por favor ingrese nuevamente ambos números"),correct01=0,!1):!0},sendForm:function(e){var t=this,n=$(e),r=this.validateForm(e);return r&&($(".donate-loading").show(),$.post(n.attr("action"),n.serialize(),function(){alert("Gracias por colaborar!"),t.closeForm(n)}).complete(function(){$(".donate-loading").hide()}).fail(function(){alert("Ocurrió un error al enviar el formulario.\nPor favor, intente nuevamente más tarde.")})),r},switchCard:function(e){var t=e;t.tarjeta.value=="amex"?(t.fecha_ven.disabled=!1,t.fecha_ven.value="",t.codigo.disabled=!1,t.codigo.value="",$("#amex-fields").show()):(t.fecha_ven.disabled=!0,t.fecha_ven.value="",t.codigo.disabled=!0,t.codigo.value="",$("#amex-fields").hide())}};$(function(){donate.initialize()});

El archivo mediosdepago.js tiene el siguiente código:

  $(document).ready(function() {
             $("#donar").click(function() {
             $(".donate-overlay2").fadeIn("slow");  
             $("#mediospago").fadeIn("slow");})
             $(".amex").click(function() {
              $('select option:contains("AMERICAN EXPRESS")').prop('selected',true);
              $("#amex-fields").show();
              $("#amex-fields").prop("disabled", false);})
             $(".visa").click(function() {
              $('select option:contains("----")').prop('selected',true);})
              $(".visaelectron").click(function() {
              $('select option:contains("ELECTRON")').prop('selected',true);})
            $(".visadebito").click(function() {
              $('select option:contains("VISA DEBITO")').prop('selected',true);})
             $(".diners").click(function() { 
              $('select option:contains("DINERS")').prop('selected',true);})
              $(".cabal").click(function() {
              $('select option:contains("CABAL")').prop('selected',true);})
              $(".master").click(function() {
              $('select option:contains("MASTERCARD")').prop('selected',true);})
              $(".argencard").click(function() {
              $('select option:contains("ARGENCARD")').prop('selected',true);})
              $(".cordobesa").click(function() {
              $('select option:contains("CORDOBESA")').prop('selected',true);})
              $(".cerrar").click(function() {
                $("#mediospago").fadeOut("slow");
                $(".donate-overlay2").hide();})
            ;})
    

El código que tienes subido ahora no es el mismo que me acabas de pegar pero, sobre lo que tienes en la página web, estás comprobando que el valor del desplegable sea "AMERICAN EXPRESS" cuando es value del select es "amex".

Cambia esto:

   if($(this).val() == "AMERICAN EXPRESS"){ 

por esto: 

   if($(this).val() == "amex"){

y te debería funcionar en cualquier navegador

Ok pero por cualquier cosa voy a ver si el programador me subió un donate.js y un mediosdepago.js nuevos o editados en el interregno y los vuelvo a pegar aquí para no hacer lío (...)

Aquí va el verdadero donar.js

var donate={initialize:function(){this.initializeForm()},initializeForm:function(){var e=this;$("[data-subscribe]").click(function(e){$(".donate-overlay").show(),$(".donate-form[data-form="+$(this).data("subscribe")+"]").show(),e.preventDefault()}),$(".donate-form [data-action=close]").click(function(t){var n=$(this).closest("form"),r=confirm("Si cierra el formulario de donación se perderán los datos ingresados, ¿Está seguro de que desea cerrar?");t.preventDefault(),r&&e.closeForm(n)});var t=$(".donate-form");t.submit(function(){return e.sendForm(this),!1}).css("left",($(window).width()-t.first().outerWidth())/2);var n=function(){var t=$(".donate-form").get(0);e.switchCard(t)};$("[name=tarjeta]").change(n).click(n).keypress(n)},closeForm:function(e){e.hide().get(0).reset(),$("#amex-fields").hide(),$(".donate-overlay").hide()},validateForm:function(e){var t=$(e).data("form")=="credit-card"?"validateCreditCard":"validateCBU";return this[t](e)},validateCBU:function(e){var t=0,n=e;if(n.mailname.value==""||n.nacimiento.value==""||n.nombre.value==""||n.telefono.value==""||n.numero_cbu.value==""||n.importe.value=="")return alert("Por favor complete todos los datos"),t=0,!1;var r=0;return n.numero_cbu2.value!=n.numero_cbu.value?(n.numero_cbu2.value=" ",n.numero_cbu.value=" ",alert("El número de CBU ingresado no coincide con el anterior, por favor ingrese nuevamente ambos números"),correct01=0,!1):!0},validateCreditCard:function(e){var t=0,n=e;if(n.mailname.value==""||n.nacimiento.value==""||n.nombre.value==""||n.telefono.value==""||n.numero_tar.value==""||n.importe.value==""||n.tarjeta.value=="seleccion"||n.tarjeta.value=="amex"&&(n.fecha_ven.value==""||n.codigo.value==""))return alert("Por favor complete todos los datos"),t=0,!1;var r=0;return n.numero_tar2.value!=n.numero_tar.value?(n.numero_tar2.value="",n.numero_tar.value="",alert("El número de tarjeta ingresado no coincide con el anterior, por favor ingrese nuevamente ambos números"),correct01=0,!1):!0},sendForm:function(e){var t=this,n=$(e),r=this.validateForm(e);return r&&($(".donate-loading").show(),$.post(n.attr("action"),n.serialize(),function(){alert("Gracias por colaborar!"),t.closeForm(n)}).complete(function(){$(".donate-loading").hide()}).fail(function(){alert("Ocurrió un error al enviar el formulario.\nPor favor, intente nuevamente más tarde.")})),r},switchCard:function(e){/*var t=e ; t.tarjeta.value=="amex"?(t.fecha_ven.disabled=!1,t.fecha_ven.value="",t.codigo.disabled=!1,t.codigo.value="",$("#amex-fields").show()):(t.fecha_ven.disabled=!0,t.fecha_ven.value="",t.codigo.disabled=!0,t.codigo.value="",$("#amex-fields").hide())*/}};$(function(){donate.initialize()});    $('select option:contains("AMERICAN EXPRESS")').click(function() {
              $("#amex-fields").show();
              $("#amex-fields").prop("disabled", false);})

Y aquí el mediosdepago.js

  $(document).ready(function() {
             $("#donar").click(function() {
             $(".donate-overlay2").fadeIn("slow");  
             $("#mediospago").fadeIn("slow");})
$('#pruebaza').change(function(){    
    if($(this).val() == "AMERICAN EXPRESS"){
              $("#amex-fields").show();
              $("#amex-fields").prop("disabled", false);} 
    else{
          $("#amex-fields").hide();
              $("#amex-fields").prop("disabled", false);}});
              $('select option:contains("AMERICAN EXPRESS")').click(function() {
              $("#amex-fields").show();
              $("#amex-fields").prop("disabled", false);})
              $('select option:contains("VISA")').click(function() {
              $("#amex-fields").hide();
              $("#amex-fields").prop("disabled", false);})
              $('select option:contains("MASTERCARD")').click(function() {
              $("#amex-fields").hide();
              $("#amex-fields").prop("disabled", false);})
              $('select option:contains("DINNERS")').click(function() {
              $("#amex-fields").hide();
              $("#amex-fields").prop("disabled", false);})
              $('select option:contains("ELECTRON")').click(function() {
              $("#amex-fields").hide();
              $("#amex-fields").prop("disabled", false);})
              $('select option:contains("VISA DEBITO")').click(function() {
              $("#amex-fields").hide();
              $("#amex-fields").prop("disabled", false);})
              $('select option:contains("ARGENCARD")').click(function() {
              $("#amex-fields").hide();
              $("#amex-fields").prop("disabled", false);})
               $('select option:contains("CORDOBESA")').click(function() {
              $("#amex-fields").hide();
              $("#amex-fields").prop("disabled", false);})
              $('select option:contains("CABAL")').click(function() {
              $("#amex-fields").hide();
              $("#amex-fields").prop("disabled", false);})
             $(".visa").click(function() {
              $('select option:contains("----")').prop('selected',true)
                    $("#amex-fields").hide();;})
              $(".visaelectron").click(function() {
              $('select option:contains("ELECTRON")').prop('selected',true);})
            $(".visadebito").click(function() {
              $('select option:contains("VISA DEBITO")').prop('selected',true);})
             $(".diners").click(function() { 
              $('select option:contains("DINERS")').prop('selected',true);})
              $(".cabal").click(function() {
              $('select option:contains("CABAL")').prop('selected',true);})
              $(".master").click(function() {
              $('select option:contains("MASTERCARD")').prop('selected',true);})
              $(".argencard").click(function() {
              $('select option:contains("ARGENCARD")').prop('selected',true);})
              $(".cordobesa").click(function() {
              $('select option:contains("CORDOBESA")').prop('selected',true);})
              $(".cerrar").click(function() {
                $("#mediospago").fadeOut("slow");
                $(".donate-overlay2").hide();})
            ;})
    

El problema no está en donar.js si no en mediosdepago.js

El javascript está mostrando los dos inputs extra cuando el valor del desplegable es AMERICAN EXPRESS pero realmente vale amex.

Cambia el HTML o el JS para que ambos coincidan y cuidado con las mayúsculas/minúsculas.

No lo puedo creer!!!! Muchísimas gracias!!!! No puedo creer que haya sido esa tontería.

Sabes por qué? Porque eso antes estaba así como tú la escribiste...  por eso no se me ocurrió que en las modificaciones que fuimos haciendo hayamos puesto mal eso que funcionaba bien.... y, aparte, viendo que si googleás onclick chrome jquery doesn't work aparecen millones de comentarios... nos complicacmos innecesariamente.
La verdad, no puedo creer que hayamos hecho eso. Te lo agradezco mucho

Como decimos por aquí "a veces el árbol no te deja ver el bosque".

Me alegro de haberte podido ayudar.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas