Activar campos requeridos al pulsar link

franjgg · #1 (**permalink**) 27/06/2013, 03:19

Hola amigos como estais,

Vereis tengo un formulario en el que al pulsar un link se despliegan unos campos de texto, la cosa es que estos campos de texto solo pueden ser obligatorios si se pulsan este link.

Como podria hacer esto, conocen algun ejemplo o alguna guia para seguir?

Un saludo!!

Karmac · #2 (**permalink**) 27/06/2013, 05:34

Le añades el evento onclick al link y ejecutas una función que cambie el atributo required de los input.

Inténtalo y nos cuentas. Saludos.

andresgarciadev · #3 (**permalink**) 27/06/2013, 08:22

es tal y como dijo Karmac.... pero solo una cosa, el evento onclick ya no se deberia usar
hazlo segun un id o clase llamando a la funcion cuando de click en el ^^

franjgg · #4 (**permalink**) 01/07/2013, 02:32

Hola amigos,

Muchas gracias por vuestra atención.

Vereis no tengo mucha experiencia en javascript, he entendido el funcionamiento que me han comentado pero creo que no sabria llevarlo a practica, conocerian algun ejemplo de esta funcion para que pudiese modificarla?

Bueno muchas gracias de nuevo

Un saludo

Karmac · #5 (**permalink**) 01/07/2013, 03:44

Atento:

Código Javascript:

Ver originaldocument.getElementById('link').onclick = function() {
    return false;
}

Ahí, como puedes ver, seleccionamos el elemento #link y le atribuimos una función anónima a su atributo onclick.

Al pinchar en el enlace se ejecutará lo que haya en la función, en este caso, con ese return false; haremos que el enlace no nos lleve a ninguna página.

Para cambiar un atributo utilizas setAttribute:

Código Javascript:

Ver originaldocument.getElementById('input').setAttribute('required', 'required');

Solo tienes que juntar estas dos cosas para una implementación básica (muy básica). Te recomiendo que busques tutoriales de JavaSript, a mí se me daba de pena y ahora me defiendo bastante bien. No vas a perder nada de tiempo, estarás aprendiendo cosas nuevas.

Saludos.

franjgg · #6 (**permalink**) 01/07/2013, 07:53

Hola amigo tal,

Pues he hecho de este modo

Código HTML:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function CamposRequeridos (){
    document.getElementById('link').onclick = function () {
        return false;
    }
        }
        function Requeridos (){
        document.getElementById('input').setAttribute('required', 'required');
        }
</script>
 
</head>
 
<body><form >
<input type="text" name="s" />
 <a onclick="CamposRequeridos();" id="link" name="link" href="*">Campos Requeridos</a>
</body>
 
</form>
</html>

La cosa es que no funciona en que me equivocado?

Muchas gracias!!

Karmac · #7 (**permalink**) 02/07/2013, 08:05

Estas haciendo los veces los mismo. La cosa es asignar el atributo onclick, ya sea con JavaScript o con HTML, pero solo una vez.

Con HTML y una función:

Código HTML:

Ver original<script>
function camposRequeridos() {
    return false;
}
</script>
<a href="#" onclick="camposRequeridos()">Campos Requeridos</a>

O bien:

Código HTML:

Ver original<script>
document.getElementById('link').onclick = function() {
    return false;
}
</script>
<a href="#" id="link">Campos Requeridos</a>

Saludos.

Edito: los códigos de mi mensaje anterior son explicativos, no van a funcionar el tu página. getElementById('link') obtiene los elementos con ID link, al igual que getElementById('input') no obtiene los input, si no el primer elemento con ID "input". Busca una guía de JavaScript y HTML para saber como seleccionar otros elementos y poder adaptarlo.

Reedyseth · #8 (**permalink**) 02/07/2013, 10:00

Que tal @franjgg,

El trabajar con eventos de Javascript puede ser algo confuso al principio, de hecho si estas trabajando en una aplicación debes de considerar que tu aplicación funcione en todos, si no es que en todos los exploradores. Tu mayor problema va a ser Internet Explorer. Por lo tanto puedes tomar dos caminos:

1.- Hacer crossbrowser tu código javascript

2.- Utilizar un API llamado jQuery y que este se encargue de eso.

Para resolver tu duda te pongo un ejemplo con jQuery, utilizo la versión 1.7.2, si utilizas la versión mas nueva necesitaras cambiar el código que te comparto.

Código Javascript:

Ver originaljQuery(function($) {
 
    $('.hidden').hide();
 
    $('.link').click(function (e) {
        e.preventDefault();
        $('.hidden').toggle();
 
        return false;
    });
});

Basicamente lo que hace el código es ocultar los inputs y controlar el evento del click en tu link.

El código que puedes copiar y pegar para que lo pruebes es el siguiente:

Código HTML:

Ver original<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Jquery load with content and effect.</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(function($) {
 
                $('.hidden').hide
 
                $('.link').click(function (e) {
                    e.preventDefault();
                    $('.hidden').toggle();
 
                    return false;
                });
            });
        </script>
        <style type="text/css">
            body { font-family:Arial, Helvetica, Sans-Serif; font-size:1.2em;}
            table {font-size:1.2em;}
            td:nth-child(1) label {background-color: #E655C1;}
        </style>
    </head>
    <body>
        <form action="#" method="post">
            <label for="txt1">Input 1:</label>
            <input type="text" name="txt1" id="txt1" /><br><br>
 
            <a class="link" href="#">Link</a><br><br>
 
            <label class="hidden" for="txt2">Input 2:</label>
            <input class="hidden" type="text" name="txt2" id="txt2" /><br>
 
            <label class="hidden" for="txt3">Input 3:</label>
            <input class="hidden" type="text" name="txt3" id="txt3" /><br><br>
 
            <input type="submit" value="Submit" />
        </form>
    </body>
</html>

La funcionalidad es:

Al darle click controlamos el evento que se va realizar en el link, osea detenemos que se vaya a la dirección, aún cuando hayas puesto una anlca (#)
Si esta oculto los inputs se muestran, si no viceversa, esto lo hace la función toggle().
Regresamos un valor false para ayudar a evitar la propagación del evento disparado por el tag 'a'

No dudes en preguntar si batallas con algo.