1

Buenas tardes, estoy realizando un formulario que envío un correo y almacena los datos en una base de datos. Se ejecuta correctamente en Chrome, Firefox, Microsoft Edge y Safari (pero este ultimo solamente en la version de sobremesa, la inserción en la base de datos no se produce cuando se realiza el proceso desde un Ipad o un Iphone). Adjunto el fragmento que se encarga de la inserción en la base de datos.

function envioMensaje()
{


      $('#Formulario').on("click",'#solicitar', function(ev) {                    
      ev.preventDefault();


      var datos={
                  "nombre": $('#nombre').val(),
                  "telefono": $('#Telefono').val(),
                  "mail": $('#mail').val(),
                  "producto": $(':selected').val(),
                  "extraInfo": $('#otrosArticulos').val()
                  }
      var datosMensajes={
                  "nombre": $('#nombre').val(),
                  "telefono": $('#Telefono').val(),
                  "mail": $('#mail').val(),
                  "producto": $('#producto option:selected').text(),
                  "extraInfo": $('#otrosArticulos').val()
                  }


  var mensaje = "envioMensajes.php";                
  var urlEnvio = "Proceso que ejecuta la insercion, la he eliminado por cuestion de privacidad".
             $.ajax({
                type:"post",  
                url:urlEnvio, //Para registro sin mensaje
                jsonp: "callback",
                dataType: "jsonp",
                data:datos
                //success: mensaje
           });
           $.ajax({
                type:"post",  
                url:mensaje, //Para mensaje
                jsonp: "callback",
                dataType: "jsonp",
                data:datosMensajes,
                success: function(data){

                } 
           }); 
    }); window.location.href = "index_gracias.php#free-h";
};

Agradecería mucho la ayuda.

Añado la parte del codigo que recoge los datos.

<form id="Formulario" name="formucontacto">
              <div class="center">
              <div id="free-h">
                 <h3>Pide tu demo <strong>Gratuita!</strong></h3>
                <span><img src="images/icon-tlf.png" alt="Teléfono" width="24" height="34" align="absmiddle"/><a href="tel:+665458897">+665458897</a></span>
                <fieldset>
                    <input type="text" id='nombre' name="nombre" placeholder="Introduce tu nombre..." required>
                    <input id='mail' name="mail" type = 'email' placeholder="Introduce tu correo electrónico" required>
                    <input id='Telefono' name="telefono" type = 'text' placeholder="Introduce tu telefono" required>
                    <select id="producto" required>
                        <option value="" default>-- Selecciona tu producto --</option>
                        <option value="1">Producto1</option>
                        <option value="2">Producto2</option>
                        <option value="3">Producto3</option>
                        <option value="4">Producto4</option>
                        <option value="5">Producto5</option>
                        <option value="6">Otro...</option>
                    </select>
                    <span class="legal">
                        <input name="condiciones" id='Condiciones' type="checkbox" required>Acepto la
                            <a style="color:#aaa; overflow:auto; text-decoration:underline;" onclick="window.open(this.href, this.target, 'width=400,height=720'); return false;" target="_blank" href="nota.html">política de privacidad.</a>

                      <div class="g-recaptcha" data-sitekey="6LfM6h8UAAAAAAGzSXe_abDnV3slmQdVOsO2elXz" data-callback="enableBtn"></div> 

                    <!--      <div class="g-recaptcha" data-sitekey="Aqui va la clave de recaptcha Google" data-callback="enableBtn"></div> -->
                    </span>

                   <input type="submit" onClick = 'validarcontacto()' id="solicitar" value="SOLICITAR" disabled />                    
                </form>

Basicamente, al validar el Captcha es cuando el boton de SOLICITAR se habilita, y al pulsar sobre este se realiza la validacion de los campos, y posteriormente el envio de los datos.

10
  • Revisa si no tienes Javascript desactivado en el Safari que no está funcionando.
    – A. Cedano
    Commented el 8 may. 2017 a las 15:32
  • @A.Cedano lo he comprobado, tanto en el telefono como en el Ipad se encuentran activado. Commented el 8 may. 2017 a las 15:34
  • 1
    ¿Puedes probar si este fiddle funciona desde el iPad/iPhone?
    – A. Cedano
    Commented el 8 may. 2017 a las 15:49
  • 1
    He leído eso: que para hacerlo funcionar tienes que ponerle un identificador CSS al elemento o modificar la forma de llamar el on.click entonces tendrías que adaptar tu código a una de las dos formas que funcionan y funcionará. Más tarde podría quizá elaborar una respuesta ya que ahora estoy ocupado. En el fiddle tienes el ejemplo de cómo hacerlo.
    – A. Cedano
    Commented el 8 may. 2017 a las 15:56
  • 1
    @AlvaroMontoro he encontrado la doc de MDN que refiere en efecto que se trata de un bug de Safari (ver respuesta más abajo).
    – A. Cedano
    Commented el 8 may. 2017 a las 18:37

2 respuestas 2

3

Esto ocurre debido a un bug de que ha sido reportado por MDN:

Safari Mobile 7.0+ (y probablemente versiones anteriores también) sufre de un error en el que los eventos de clic no se disparan en elementos que no son típicamente interactivos (por ejemplo, ) y que tampoco tienen oidores de eventos directamente conectados a los elementos (Es decir, se está utilizando la delegación de eventos). Vea este ejemplo en vivo para una demostración. Consulte también Documentos de Safari para hacer que los elementos se puedan hacer clic y la definición de "elemento que se puede hacer clic".


Soluciones conocidas para este error:

  • Establecer cursor: pointer; En el elemento o cualquiera de sus ancestros.
  • Agregue un atributo dummy onclick="void (0)" al elemento o cualquiera de sus ancestros de más arriba, pero sin incluir <body>.
  • Utilice un elemento típicamente interactivo (por ejemplo, <a>) en lugar de uno que no sea típicamente interactivo (por ejemplo, <div>).
  • Deje de usar la delegación de eventos de clic.

Safari Mobile considera que los siguientes elementos son típicamente interactivos (y por lo tanto no se ven afectados por este error):

  • <a> (pero debe tener un href)
  • <area> (pero debe tener un href)
  • <button>
  • <img>
  • <input>
  • <label> (pero debe estar asociado con un control de formulario)
  • <textarea>

Esta lista es incompleta; Usted puede ayudar a MDN haciendo más pruebas / investigación y expandiéndolo.


Propuesta de solución

En base a lo dicho anteriormente, te muestro una posible solución. No obstante, puedes optar por otra de las mencionadas más arriba si así lo prefieres.

Cambia tu función de llamada de esta manera:

  • Agregando un nombre de clase al input que quieres escuchar desde jQuery, aquí la he llamado ios
  • Lanzando el evento on.click en base a esa clase y no al id del elemento

Nota: He tomado sólo algunas partes del formulario y quitado las condiciones required... he obviado también lo del CAPTCHA. Lo único importante es que se ha agregado el elemento class al input en cuestión y que se cambia la forma del on.click

Pruébalo en todas las terminales y dime si funciona.

$(function() {

  function validarContacto() {
    alert("click válido para todos, iOS incluido");
  }
  $("input.ios").on("click", validarContacto);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Formulario" name="formucontacto">
  <div class="center">
    <div id="free-h">
      <h3>Pide tu demo <strong>Gratuita!</strong></h3>
      <span><img src="images/icon-tlf.png" alt="Teléfono" width="24" height="34" align="absmiddle"/><a href="tel:+665458897">+665458897</a></span>
      <fieldset>
        <input type="text" id='nombre' name="nombre" placeholder="Introduce tu nombre...">
        <input id='mail' name="mail" type='email' placeholder="Introduce tu correo electrónico">
        <input id='Telefono' name="telefono" type='text' placeholder="Introduce tu telefono">


        <input type="submit" onClick='validarcontacto()' id="solicitar" value="SOLICITAR" class='ios' />
</form>

PD: Probado en iPad y en Desktop y funciona en ambos.

4
  • muchas gracias por la explicacion, ahora mismo no puedo probarlo porque todos los dispositivos ipad que hay son de la empresa donde trabajo y ya he salido, pero mañana nada mas llegar lo pruebo y te comento, y ante todo, muchas gracias por el ejemplo y la explicación tan detallada que me has dado. Commented el 8 may. 2017 a las 18:30
  • @AntonioMP87 De nada. Lo he probado en iPad y funciona. Saludos y espero que te sea de utilidad.
    – A. Cedano
    Commented el 8 may. 2017 a las 18:36
  • @AntonioMP87 ¿qué pasó finalmente con esto?
    – A. Cedano
    Commented el 13 mar. 2018 a las 0:45
  • 1
    Esta respuesta esta brutal, merece mas puntos, +1.
    – Layer
    Commented el 13 jun. 2020 a las 7:37
0

En mi caso no me funciona - en ipad y me imagino que safari en general. Dentro de la función uso ajax:

$.ajax({
            type : "POST",
            url : $(this).attr('data-order'),
            success:function(response){
                $('#cookies').html(response);
            }
        }) 

La llamada se hace a través de un button.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.