activar boton cuando casilla de verificacion esta "checked"

dryant · #1 (**permalink**) 14/05/2012, 05:24

Hola
Tengo un formulario de Mailchimp, en el cual se pide el nombre y el email y tiene un boton enviar. El caso es que necesito ponerle aparte una casilla de verificacion de que el que va a enviar el formulario, ha leido y acepta las condiciones de uso de mi sitio, y que solo pueda enviar el formulario si ha marcado la casilla de verificacion.

He buscado la opcion en Mailchimp, pero no la encuentro, asi que he pensado hacer lo siguiente:
En dremweaver, he copiado todo el formulario de mailchimp
He puesto el boton en un div
Le he puesto al div la propiedad de visibility:hidden; (que por cierto no me oculta el div¿?)
Y ahora en la ventana comportamientos de dreamweaver, quiero ponerle que al marcar la casilla, cambie el div a mostrar (aunque como he dicho antes y sin saber porque, ya se muestra)
El caso es que solo me acepta las opciones, onclick, onblur, ondblclick, onfocus.... y muchas mas pero no aparece la de Oncheck (no se siquiera si existe

)
Por otro lado tambien he visto que en la ventana comportamientos, hay otra pestaña que es la de atributos que si te da la opcion de poner la casilla "checked" pero ya no sé poner la accion que va a ejecutar cuando se marque......

Alguien tiene una sugerencia?

diamari · #2 (**permalink**) 14/05/2012, 06:05

Bueno no conozco sobre mailchimp y sin ver el código de lo que estas intentando lo que puedo decir es que visibility debería funcionar en todo los navegadores recientes. Verifique que no tenga un error ortográfico o de anidamiento.

Y lo que quieres utilizar es onChange ya ejecuta cada vez que detecta un cambio o sea en cuando es marcado o desmarcado.

emprear · #3 (**permalink**) 14/05/2012, 06:24

Un poco confusa tu explicación, no sé que es Mailchimp, y efectivamente el evento "oncheck se javascript no existe".
Perfectamente se puede validar con javascript si el elemento está chequeado o no, pero para hacer una validación seria, hay que hacerla del lado del servidor, en el siguiente ejemplo se combinna ambas.

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
/* script */
function validar(){
var elcbox = document.getElementById('terminos');
if(elcbox.checked == false){
alert('debe aceptar los términos');
return false;
}
}
//]]>
</script>
</head>
<body>
<div>
<?php
if(!isset($_POST['procesar'])){
?>
<form action="cboxjs.php" method="post" onsubmit="return validar();">
<p>
<input type="checkbox" name="terminos" id="terminos" value="ok" /><br />
<input type="submit" value="procesar" name="procesar"/>
</p>
</form>
<?php
}else{
if(isset($_POST['terminos'])){
$terminos = $_POST['terminos'];
if($terminos == 'ok'){
echo "<p>ejecuto otra acción - $terminos</p>";  
}
 
}else{
echo "<p>Debe aceptar los términos y condiciones</p>\n</div>\n</body>\n</html>";
exit();
}
 
}
?>
</div>
</body>
</html>

Saludos

dryant · #4 (**permalink**) 14/05/2012, 07:37

Hola
Antes que nada agradeceros las respuestas a los dos.
Mailchimp es un servicio autoresponder, el cual la gente rellena un formulario y luego manda los mesajes de forma automatizada. Algo parecido a Feedburner pero de pago.
Ya voy pillando algo...
Estaba intentando cambiar la propiedad css y de alli que no me apareceria la opcion onchange. O eso creo yo...
Por otro lado creo que en el codigo que me ha mandado emprear hay un pequeño error, ya que me sale esto en los dos navegadores que lo he usado
esto es lo que se ve en el navegador:

Cita:

ejecuto otra acción - $terminos

";} } else { echo "

Debe aceptar los términos y condiciones
\n
\n\n"; exit(); } } ?>

He estado mirando el codigo pero no he encontrado el error donde esta.. ya que no soy programador para mi pena

El codigo del formulario completo es este:

Código HTML:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Change the width below to just wider than your form's width
    to optimize its initial scale on Apple iOS  and Android devices -->
    <meta name = "viewport" content="width=640">

<title>Suscripcion</title>


<style type="text/css">
<!--
body {background-color:#FFFFFF; font-family:verdana; font-size:12px; text-align:center; min-width: 500px; margin:50 0 0 0;}
p {line-height:18px;}
.container {background-color:#FFFFFF; width:400px; border:1px solid #999999; padding:5 5 15 5; margin-left:auto; margin-right:auto;}
.pageTitle {background-color:#DDDDDD; padding:8px; font-size:16px; font-weight:bold; color:#000000; text-align:left;}
.pageTitleAlert {background-color:#FF0000; padding:8px; font-size:16px; font-weight:bold; color:#FFFFFF; text-align:left;}
.pageTitleSuccess {background-color:#33CC00; padding:8px; font-size:16px; font-weight:bold; color:#FFFFFF; text-align:left;}
.formLabel {font-size:13px;}
.error {color:#FF0000; font-weight:bold; font-size:11px;}
.small {font-size:11px;}
-->
</style>
</head>
<body>

<div class="container">
<div class="pageTitle">Formulario</div>
<p>Required fields are <b>bold...</b></p>
<form action="http://misitio.us1.list-manage.com/subscribe/post" method="post">
<input type="hidden" name="u" value="b2cb498sd9399d9cd858">
<input type="hidden" name="id" value="67073a2ff4">
<table cellpadding="5" cellspacing="0" border="0" align="center">

<tr>
<td align="right" class="formLabel"><strong>Email Address</strong> <span class="asterisk">*</span>:</td>
<td align="left">
    <input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="*|MERGE0|*">
<br><span class="error">*|HTML:EMAILERROR|*</span></td>
</tr>

<tr>
<td align="right" class="formLabel"><strong>First Name</strong> <span class="asterisk">*</span>:</td>
<td align="left">
    <input type="text" name="MERGE1" id="MERGE1" size="25" value="*|MERGE1|*">
<br><span class="error">*|HTML:FNAMEERROR|*</span></td>
</tr>




<tr>
<td align="right">&nbsp;</td>
<td align="left">
<!--
IF you want this to work with our Facebook app, your submit button *must* start with this:
    <input type="submit"
and end with a >. You can have whatever else you'd like in the rest of the tag, and we'll maintain any custom "value" you set.
-->
<input type="submit" value="Subscribe">
</td>
</tr>
</table>
</form>
</div>


</body>
</html>

Necesitaria incluir alli la casilla de verificacion y que a la vez la etiqueta de la casilla de verificacion tuviera el enlace a "politica de privacidad"

Muchas gracias de nuevo

emprear · #5 (**permalink**) 14/05/2012, 07:41

Es que mi código es php, necesita ser ejecutado en un servidor, de todas maneras está el javascript, que si se ejecutará de manera local, simplemente remove el php y renombralo como html
Saludos

dryant · #6 (**permalink**) 14/05/2012, 07:59

Uy!!! Claro es verdad!!! Que fallo he tenido

El caso es que el formulario esta incluido en wordpress.... funcionara entonces?
Un saludo

dryant · #7 (**permalink**) 14/05/2012, 08:08

Buenas de nuevo.
Acabo de probarlo con un servidor local y funciona perfecto! :)
Como puedo implementarlo en Wordpress??
He intentado añadiendo esto

Código HTML:

<script type="text/javascript">
//<![CDATA[
/* script */
function validar(){
var elcbox = document.getElementById('terminos');
if(elcbox.checked == false){
alert('debe aceptar los términos');
return false;
}
}
//]]>
</script>

en el archivo functions.php pero al guardarlo me da el siguiente error:

Código HTML:

Parse error: syntax error, unexpected '<' in /homepages/44/g4524356893/htdocs/misitio/wp-content/themes/mitema/functions.php on line 93

Asi que creo que no voy bien por ahi no?

dryant · #8 (**permalink**) 14/05/2012, 11:49

Bueno... Yo mismo me contesto para que sirva a otros usuarios.
He implementado todo el codigo mezclandolo con el mio del formulario, y he creado una pagina php con el formulario correcto.
Para unirlo con wordpress, en vez de complicarme mas la vida, he cogido un plugin llamado "Advanced iframe" y he puesto en la pagina wordpress el iframe con la pagina que habia creado anteriormente. Podeis verlo funcionando a la perfeccion aqui:
http://www.qustodian.com.es/ebook-gratis/
Muchas gracias emprear por la ayuda prestada!

Ya no te doy mas puntos porque ya no me deja darte mas!

Un saludo