Hacer formulario para añadir datos a un código HTML

eMx · #1 (**permalink**) 18/02/2007, 18:02

Lo que quiero saber es cómo hacer un formulario pidiendo una serie de datos, y al hacer click en un botón, llamemosle, "Crear", salga un código HTML con los datos que el usuario ha añadido.

Por ejemplo: Digamos que quiero dar la posibilidad al usuario de crear un link mediante tabla.

En el formulario pediría en cuadros de texto los siguientes datos:

-URL de destino
-Texto del enlace
-Color del borde de la tabla
-Color de fondo predeterminado de la tabla
-Color para efecto OnMouseOver
-Color para efecto OnMouseOut

Código HTML:

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#color_borde" width="100%" id="AutoNumber1">
  <tr>
    <td background="#color_fondo" onmouseover = "this.style.background='#color_over" onmouseout = "this.style.background='#color_out'" onclick = "location='URL_destino'" style="cursor: hand;" width="100%">
    <table border="0" cellpadding="0" cellspacing="3" style="border-collapse: collapse" width="100%" id="AutoNumber2">
      <tr>
        <td width="100%">Texto del enlace</td>
      </tr>
    </table>
    </td>
  </tr>
</table>

¿Cómo hago para que cuando el usuario rellene los datos del formulario y le de al botón "Crear" aparezca en un área de texto este código pero con los datos que el usuario ha dado anteriormente?

Muchas gracias de antemano.

Cita:

Creo que el post debería estar en la sección "JavaScript" mas bien que en ésta. Cometí el error de publicarlo aquí y ahora no se puede mover ni eliminar personalmente.

jaquez · #2 (**permalink**) 18/02/2007, 22:40

es con PHP

Aimarejada · #3 (**permalink**) 19/02/2007, 13:27

No necesariamente aunque creo que igiual es mas comlicada mi idea. Podrias hacer mediante javascript que cogiera esos datos que el usuario da y meterlos en variables y luego formatear las partes del codigo html para sustituirlo por lo que el usuario ha dado.

Tendrias que tener almacenado el codigo a sustituir en un archivo pero seguramente si lo haces en php sea mas facil.

hgp147 · #4 (**permalink**) 19/02/2007, 14:57

Hola eMx, he hecho el siguiente codigo, espero que te sirva:

Código HTML:

<html>

<head>

<SCRIPT language=JavaScript>

			function build_it(form) {



			form.generar_codigo.value='';



			    if (form.input1.value != "") {

                                                  if (form.input2.value != "") {

                                                     if (form.input3.value != "") {

                                                        if (form.input4.value != "") {

                                                           if (form.input5.value != "") {

                                                              if (form.input6.value != "") {







                                                 form.generar_codigo.value = "<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse: collapse\" bordercolor=\""  +

			      form.input1.value+"\""  +

                                                 form.generar_codigo.value + " width=\"100%\">\n"  +

                                                 form.generar_codigo.value + "<tr>\n"  +

                                                 form.generar_codigo.value + "<td background=\""  +



			      form.input2.value+"\" onmouseover = \"this.style.background='"  +

                                                 form.input3.value+"'\" onmouseout = \"this.style.background='"  +

                                                 form.input4.value+"'\" onclick = \"location='" +

                                                 form.input5.value+"'\" style=\"cursor: hand;\" width=\"100%\">\n" +

                                                 form.generar_codigo.value + "<table border=\"0\" cellpadding=\"0\" cellspacing=\"3\" style=\"border-collapse: collapse\" width=\"100%\">\n<tr>\n<td width=\"100%\">"  +

                                                 form.input6.value+"<\/td>\n</tr>\n</table>\n</td>\n</tr>\n</table>\n" ;

            

}	

}

}

}

}

}		    

}



</SCRIPT>



</head>



<form name="generar_codigo">



<p>Color del borde de la tabla<input size=15 name=input1></p>



<p>Color de fondo predeterminado de la tabla<input size=15 name=input2></p>



<p>Color para efecto OnMouseOver<input size=15 name=input3></p>



<p>Color para efecto OnMouseOut<input size=15 name=input4></p>



<p>URL de destino<input size=15 name=input5></p>



<p>Texto del enlace<input size=15 name=input6></p>



<input onClick="build_it(this.form)" type="button" value="Generar Codigo" name="button">



<input type="reset" value="Limpiar" name="reset">



<textarea name="generar_codigo" rows=12 cols=45></textarea>



<input onClick=form.generar_codigo.focus();form.generar_codigo.select(); type=button value="Seleccionar Codigo" name=grab>



</form>

                  





</body>

</html>

Para que te aparezca el codigo generado tienen que estar completadas todos los input de texto, sino el codigo no se va a mostrar.

Si te queda alguna duda decime

eMx · #5 (**permalink**) 19/02/2007, 15:40

Buenas hgp174. Tanto el boton "Limpiar" como el "Seleccionar código" funcionan. Me falla a la hora de darle a "Generar código" ¿sabes? No se cual puede ser el problema. Relleno todos los datos le doy a Generar código pero no aparece nada en el área de texto :S.

Aimarejada · #6 (**permalink**) 19/02/2007, 15:42

Lo probe yo ahora y me funciona perfecto.

eMx · #7 (**permalink**) 19/02/2007, 15:57

Lo pongo tal cual el código, lo pruebo y nada :S

Aimarejada · #8 (**permalink**) 19/02/2007, 16:14

Yo lo probe con el pspad y me funciona todo bien.

Con que lo estas mirando?

hgp147 · #9 (**permalink**) 19/02/2007, 16:18

Entra aca http://hgp147.ifastnet.com/ejemplo.htm
y copia el codigo fuente. Este funciona bien

eMx · #10 (**permalink**) 19/02/2007, 17:59

Que extraño... :S Copiando el código fuente sí que me funciona. No me funcionaba cuando lo copie de ahí.

Pues tío, hgp147. No se como darte mis mas sinceras grácias. De programación poco pero de diseño gráfico si que se me da bien, si alguna vez te puedo ayudar para diseñarte cualquier cosa, un cartelillo, un logo o incluso una plantilla web, no dudes en decirmelo tio ;)

Gracias tambien al resto por su ayuda y aportación ;)

Una última duda, si solo quiero pedir el "URL de destino" y "Texto del enlace" y el resto que ya este puesto por mí, es decir que lo que es la tabla ya este entera diseñada, y solo tenga que poner el nombre del link y la url y ya le salga una tabla con enlace prediseñada por mí. ¿Qué quito o como lo modifico? Lo he intentado borrando los inputs pero me falla :S. Disculpen mi torpeza...

Salu2

hgp147 · #11 (**permalink**) 20/02/2007, 11:00

Hola eMx:
De nada, entra a esta pagina que ya tiene el codigo que necesitas http://hgp147.ifastnet.com/ejemplo2.htm

Quizas puedas ayudarme con el diseño del logo de mi pagina que nose como hacerlo, no se mucho de diseño

Si tenes que hacer otro codigo usa este ejemplo:

Código:

<SCRIPT language=JavaScript>

function build_it(form) {
form.nombreformulario.value='';

  if (form.input1.value != "") {
     if (form.input2.value != "") {

form.nombreformulario.value = "  PONE LO QUE QUERES QUE APAREZCA  "  +
form.input1.value + " PONE LO QUE QUERES QUE APAREZCA " +
form.input2.value + " PONE LO QUE QUERES QUE APAREZCA " ;      
    
    }   
  }
}
</SCRIPT>

Para crear un salto de linea pone \n
Antes de poner " o / tenes que poner \ , quedando asi "\ y asi \/
Solamente en la primera linea despues de form.nombreformulario.value tenes que poner =
En la ultima linea tenes que poner ;
Y para unir los valores utiliza +

Si te queda alguna duda de como hacerlo decime

eMx · #12 (**permalink**) 21/02/2007, 13:58

Creo que no tengo más dudas, las has solucionado todas :)

Pues encantado te hago el logo. Dime de que va la web para hacerlo de una forma u otra. También avisame si ya tienes la plantilla de la web echa para que me des el tamaño en el que querrías el logo en pixeles.

Salu2 y mil gracias!!

hgp147 · #13 (**permalink**) 23/02/2007, 11:11

Hola eMX
Te envie un mensaje privado con las caracteristicas que quiero para el logo.
Gracias