Foros del Web » Programando para Internet » Javascript »

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

 Estas en el tema de Hacer formulario para añadir datos a un código HTML en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/02/2007, 18:18
eMx
 
Fecha de Ingreso: julio-2004
Mensajes: 54
Antigüedad: 19 años, 10 meses
Puntos: 1
Hacer formulario para añadir datos a un código HTML
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.
  #2 (permalink)  
Antiguo 19/02/2007, 00:41
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Hacer formulario para añadir datos a un código HTML
Hola:

Puedes poner en el action algo así como action="javascript:mostrar(this)"
...y esa función:

function mostrar(f) {
f.texto.value = "<table ... bordercolor='" + f.bordercolor.value + "' ... >\n";
f.texto.value += "\t<tr>\n";
// para añadir los datos sin machacar contenido se usa +=
...
}

O usando un botón que no sea submit (type="button") y poner onclick="mostrar(this.form)"

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 19/02/2007, 14:47
eMx
 
Fecha de Ingreso: julio-2004
Mensajes: 54
Antigüedad: 19 años, 10 meses
Puntos: 1
Re: Hacer formulario para añadir datos a un código HTML
Muchas gracias por tu ayuda caritatos. La cuestión es que de JS se muy muy poco.

Mira de una web saque este creador de código para modificar la barra de desplazamiento de una web:

Código HTML:
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Usa esta herramienta para personalizar el color de tus scrollbar</title>
<SCRIPT language=JavaScript>
			function build_it(form) {

			form.scrollbarWizard.value='';

			    if (form.input1.value != "") {
			      form.scrollbarWizard.value = "<\!\-\- www\.gamarod\.com\.ar\-\->\n"  +
			      form.scrollbarWizard.value + "<STYLE TYPE=\"text\/css\"><\!--\n"  +
			      form.scrollbarWizard.value + " BODY \{\n"  +
			      form.scrollbarWizard.value + "  scrollbar\-arrow\-color\:"  +
			      form.input1.value+"\;\n";
			    }
			    if (form.input2.value != "") {
			      form.scrollbarWizard.value += "  scrollbar\-track\-color\:"  +
			      form.input2.value+"\;\n";
			    }
			    if (form.input3.value != "") {
			      form.scrollbarWizard.value += "  scrollbar\-shadow\-color\:"  +
			      form.input3.value+"\;\n";
			    }
			    if (form.input4.value != "") {
			      form.scrollbarWizard.value += "  scrollbar\-face\-color\:"  +
			      form.input4.value+"\;\n";
			    }
			    if (form.input5.value != "") {
			      form.scrollbarWizard.value += "  scrollbar\-highlight\-color\:"  +
			      form.input5.value+"\;\n";
			    }
			    if (form.input6.value != "") {
			      form.scrollbarWizard.value += "  scrollbar\-darkshadow\-color\:"  +
			      form.input6.value+"\;\n";
			    }
			    if (form.input7.value != "") {
			      form.scrollbarWizard.value += "  scrollbar\-3dlight\-color\:"  +
			      form.input7.value+"\;\n";
			      form.scrollbarWizard.value += " }\n\/\/--><\/STYLE>";
			    }
			}

			</SCRIPT>

</head>

<body>
<TABLE cellSpacing=0 
                  cellPadding=0 width='88%' border=0 align='center'>
<form name=scrollbarWizard>
                      <TBODY> 
                      <TR> 
                      <TD colspan="2" class=texto>Usa esta herramienta para personalizar 
                        el color de tus scrollbar. Ten en cuenta que este script funciona sólo en 
                        IE 5.5 o superior.<br>
                        <br>
                        Los colores pueden ser hexadecimal o el nombre del color: 
                        <br>
                        Si quieres aquí puedes ver una lista completa de colores. <a href="colores.asp" 
                  target=_blank class=articulos>[ Lista de colores ]</a> <br>
                        </TD>
                    </TR>
                    <TR> 
                      <TD width="61%"> 
                        <table cellspacing=2 
                  cellpadding=0 bgcolor=#ffffff border=0 align="center">
                          <tbody> 
                          <tr> 
                            <td align=right bgcolor=#f3f3f3 class=texto>Scrollbar-Arrow-Color:</td>
                            <td bgcolor=#f3f3f3> 
                              <input size=15 name=input1 style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #000000 1px solid; COLOR: black; TEXT-INDENT: 0pt; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #FFFFFF">
                            </td>
                          </tr>
                          <tr> 
                            <td align=right bgcolor=#f7f7f7 class=texto>Scrollbar-Track-Color:</td>
                            <td bgcolor=#f7f7f7> 
                              <input size=15 name=input2 style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #000000 1px solid; COLOR: black; TEXT-INDENT: 0pt; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #FFFFFF">
                            </td>
                          </tr>
                          <tr> 
                            <td align=right bgcolor=#f3f3f3 class=texto>Scrollbar-Shadow-Color:</td>
                            <td bgcolor=#f3f3f3> 
                              <input size=15 name=input3 style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #000000 1px solid; COLOR: black; TEXT-INDENT: 0pt; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #FFFFFF">
                            </td>
                          </tr>
                          <tr> 
                            <td align=right bgcolor=#f7f7f7 class=texto>Scrollbar-Face-Color:</td>
                            <td bgcolor=#f7f7f7> 
                              <input size=15 name=input4 style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #000000 1px solid; COLOR: black; TEXT-INDENT: 0pt; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #FFFFFF">
                            </td>
                          </tr>
                          <tr> 
                            <td align=right bgcolor=#f3f3f3 class=texto>Scrollbar-Highlight-Color:</font></td>
                            <td bgcolor=#f3f3f3> 
                              <input size=15 name=input5 style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #000000 1px solid; COLOR: black; TEXT-INDENT: 0pt; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #FFFFFF">
                            </td>
                          </tr>
                          <tr> 
                            <td align=right bgcolor=#f7f7f7 class=texto>Scrollbar-DarkShadow-Color:</td>
                            <td bgcolor=#dfdfdf> 
                              <input size=15 name=input6 style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #000000 1px solid; COLOR: black; TEXT-INDENT: 0pt; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #FFFFFF">
                            </td>
                          </tr>
                          <tr> 
                            <td align=right bgcolor=#f3f3f3 class=texto>Scrollbar-3DLight-Color:</td>
                            <td bgcolor=#f3f3f3> 
                              <input size=15 
                    name=input7 style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #000000 1px solid; COLOR: black; TEXT-INDENT: 0pt; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #FFFFFF">
                            </td>
                          </tr>
                          </tbody> 
                        </table>
                      </TD>
                      <TD width="39%">&nbsp;</TD>
                    </TR>
                    <TR> 
                      <TD width="61%"> 
                        <table cellspacing=0 cellpadding=2 border=0>
                          <tbody> 
                          <tr> 
                            <td> 
                              <input onClick=build_it(this.form) type=button value="Crear Codigo" name=button style="BORDER-RIGHT: rgb(128,128,128) 1px solid; BORDER-TOP: rgb(128,128,128) 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: rgb(128,128,128) 1px solid; COLOR: rgb(0,0,0); BORDER-BOTTOM: rgb(128,128,128) 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: rgb(233,233,233)">
                            </td>
                            <td> 
                              <input type=reset value=Limpiar name=reset style="BORDER-RIGHT: rgb(128,128,128) 1px solid; BORDER-TOP: rgb(128,128,128) 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: rgb(128,128,128) 1px solid; COLOR: rgb(0,0,0); BORDER-BOTTOM: rgb(128,128,128) 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: rgb(233,233,233)">
                            </td>
                          </tr>
                          </tbody> 
                        </table>
                      </TD>
                      <TD width="39%">&nbsp;</TD>
                    </TR>
                    <TR> 
                      <TD colspan="2" class=texto>Copia y pega el codigo dentro 
                        del HEAD tags de tus paginas:<br>
                        <br>
                        <input onClick=form.scrollbarWizard.focus();form.scrollbarWizard.select() type=button value="Grabar Texto" name=grab style="BORDER-RIGHT: rgb(128,128,128) 1px solid; BORDER-TOP: rgb(128,128,128) 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: rgb(128,128,128) 1px solid; COLOR: rgb(0,0,0); BORDER-BOTTOM: rgb(128,128,128) 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: rgb(233,233,233)">
                         <font size=1>Solo usa Control-C para copiar el 
                        texto y pegar en tu web. </font></TD>
                    </TR>
                    <TR>
                      <TD colspan="2">
                        <textarea name=scrollbarWizard rows=15 cols=45 style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #000000 1px solid; COLOR: black; TEXT-INDENT: 0pt; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #FFFFFF"></textarea>
                      </TD>
                    </TR>
                    </TBODY> 
                  </form></TABLE>

</body>

</html>
Sin embargo cuando quiero modificar dentro de la etiqueta <script> las etiquetas de la scroll por la de las tablas da error. ¿Me puedes explicar cómo hacer para ponerlo para que dé resultado?
  #4 (permalink)  
Antiguo 19/02/2007, 15:05
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 980
Antigüedad: 17 años, 4 meses
Puntos: 36
Re: Hacer formulario para añadir datos a un código HTML
Hola eMx, te cree el codigo, espero que te sirva.
Entra en este post http://www.forosdelweb.com/f4/hacer-formulario-para-anadir-datos-codigo-html-466115/
  #5 (permalink)  
Antiguo 19/02/2007, 15:57
eMx
 
Fecha de Ingreso: julio-2004
Mensajes: 54
Antigüedad: 19 años, 10 meses
Puntos: 1
Re: Hacer formulario para añadir datos a un código HTML


Lo pongo tal cual el código, lo pruebo y nada :S
  #6 (permalink)  
Antiguo 19/02/2007, 16:30
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 980
Antigüedad: 17 años, 4 meses
Puntos: 36
De acuerdo Re: Hacer formulario para añadir datos a un código HTML
Entra aca http://hgp147.ifastnet.com/ejemplo.htm y copia el codigo fuente de la pagina. Ya me fije y funciona bien , el otro funcionaba mal
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:07.