0

si quiero cambiar el botón de ENVIAR (submit). por una imagen. se puede Hacer? intente poner la imagen pero no me funciono. alli les deje el código abajo.

y otra cosita colegas. para que el botón no se active hasta colocar el nombre. como hago? me refiero a que si la persona no coloca el nombre. el botón no te permita irte a whatsapp y te diga que tienes que colocar el nombre. introducir la descripción de la imagen aquí

<head>
<script>
			function setNombre() {
				var miUrl = " https://api.whatsapp.com/send?phone=584144416340&text=%21Hola%21%20Quiero%20Informacion%20de%20el%20Curso%20Whastapp.%20Soy%20" + document.getElementById('txtNombre').value;
				window.open(miUrl);
               
			}
		</script>
    </head>
    
    <body>
    
    <input id="txtNombre" type="text" name="fname" required placeholder="Tu Nombre" size="30" maxlength="10" /><br>
		
		<button id="btnWAPP" type="image" src="https://marketingcongabrielguzman.ga/wp-content/uploads/2019/01/WPSOL-1.png" onclick="setNombre()">Pedir mi curso por Whastapp</button>

Gracias a Todos de antemano.

la idea es agregar una comprobació JS asi:

if(txtNombre === ""){alert("Debes Colocar Tu Nombre"); return false;}

2 respuestas 2

1

Cesar, bienvenido a la comunidad, intenta con este código.

<!DOCTYPE html>
<html>
<body>

<input id="txtNombre" type="text" name="fname" required placeholder="Tu Nombre" size="30" maxlength="10" onchange="activateButton(this.value)"/><br>

<input id="btnWhatsApp" type="image" src="https://marketingcongabrielguzman.ga/wp-content/uploads/2019/01/WPSOL-1.png" onclick="setNombre()" disabled=true/>
<script>

function activateButton(val){
    if(val !== null && val !== ''){
        //Activar botón
        document.getElementById("btnWAPP").disabled = false;
    }
};
function setNombre(val) {
  var miUrl = " https://api.whatsapp.com/send?phone=584144416340&text=%21Hola%21%20Quiero%20Informacion%20de%20el%20Curso%20Whastapp.%20Soy%20" + document.getElementById('txtNombre').value;
  window.open(miUrl);
}
</script>

</body>
</html>

Después de llenar el nombre en el campo txtNombre, debes hacer click fuera del campo y el botón estará activo para enviar el mensaje mediante WhatsApp.

Espero que te sirva.

14
  • hola amigo ValVert gracias por ayudarme. use tu cogigo. pero al colocar el nombre el boton no se activa. te dejo aqui la pagina web donde estoy probando el codigo q crees que este fallando colega? el 17 ene. 2019 a las 13:05
  • Estimado, verifica el nombre del input y la corroboración del mismo. El nombre en ambos debiese ser btnWAPP
    – dixoen
    el 17 ene. 2019 a las 18:28
  • amigo valvert lo que esta bloquando el boton es el . disabled="true" sera alli el error mi amigo? y por eso no se activa el boton el 18 ene. 2019 a las 13:29
  • @CesarGabrielGuzman lo que solicitaste es que cuando el texto contenga un nombre se active el botón de Whatsapp. Por lo tanto el botón parte deshabilitado (es por eso que disabled="true"), cuando el usuario llena el nombre hay una función que lo activa (document.getElementById("btnWAPP").disabled = false;).
    – dixoen
    el 18 ene. 2019 a las 13:36
  • mi hermano lo coloque todo como me dices pero el boton no se activa. que crees que este faltando? sera mi pagina web? el 18 ene. 2019 a las 14:44
0

Para el boton con la imagen puedes crear una etiqueta de link <a> y le agregas la imagen

<a href="#"><img src="https://marketingcongabrielguzman.ga/wp-content/uploads/2019/01/WPSOL-1.png"></a>

Luego le das los estilos con css.

1

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.