Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 1 de 1

Tema: Sustituir palabras por contenido de inputs

Ver Modo Hilado

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    14 mar, 17
    Mensajes
    5
    Poder de Reputación
    0

    Talking Sustituir palabras por contenido de inputs

    Hola Chicos, sigo con mis temas para los nenes y se me a ocurrido hacer otra cosita para ellos pero ya estoy bloqueada llevo dos semanas con ello y estoy estancada apunto de tirar la toalla :(

    necesito sustituir palabras de un cuento por el contenido de los input que rellenen los niños.

    he conseguido, con unos ejemplos, encontrar algo ,que con lo poco que yo se, puedo modificar para la primera parte.

    tengo un combo en el que selecciono un cuento y me aparece el formulario a cubrir y el texto del cuento, pero no consigo meter en medio del texto los contenidos de los input.

    Solo valiéndome de un ejemplo, consigo que se meta el texto según voy escribiendo pero me hace salto de línea y me desmonta el texto.

    Seguro que estoy matando moscas a cañonazos, y que seguro que hay alguna otra manera de insertar un texto de un input en un párrafo de otra manera.

    Adjunto el código a ver si alguien se le ocurre algo y me puede echar una mano

    Código HTML:
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    	<meta charset="UTF-8">
    	<title>Combo con campos condicionales</title>
    	<style type="text/css">
    		* { padding:0px; margin:0px; }
    		body { font-family: arial, sans-serif; }
    		.container { max-width:500px; margin:auto; }
    		.comboSelector { background-color:#f44336; padding:30px; }
    		select#tipo { padding:5px 10px; }
    		.opcionesWrapper { background-color:#311b92; padding:20px 30px; color:#FFF; }
    		.opciones { display:none; }
    		.btn { border:none; padding:10px 20px; color:#FFF; background-color:#f44336; margin-top:20px; cursor:pointer; }
    		.btn:hover { background-color:#b71c1c; }
    	</style>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
    	<div class="container">
    		<div class="comboSelector">
    		<select name="tipo" id="tipo" onchange="elegir_opcion(this);" style="width: 219px; height: 30px">
    			<option value="">Elije un Cuento</option>
    			<option value="op1">Caperucita Roja</option>
    			<option value="op2">Pulgarcito</option>
    			<option value="op3">Tipo 3</option>
    		</select>
    		</div>
    		<div class="opcionesWrapper">
    			Ahora cubre los datos que se te piden abajo&nbsp; 
    		</div>
    	</div>
    	
    	
    	<div class="opciones">
    		<div id="op1">
    			<form>
    			Como te llamas?&nbsp; <input  class="input"  id="entrada2" onkeyup="javascript:{UI=document.getElementById('entrada2').value;
       document.getElementById('ejemplo2').innerHTML=' '+UI;}" />
    <br>
    			<p>Donde Vives?&nbsp; <input type="text" size="30" name="ciudad" /><br>
    			Cuantos años tienes? &nbsp; <input type="text" size="10" name="niño" /><br>
    			Como se llama tu mascota?&nbsp;&nbsp;<input type="text" size="10" name="mascota" /><br>
    			<br><br />
    			</p>
    			<p>Era se , una vez, un niño que se llamaba<div style="color:white;font-size:16px;" id='ejemplo2'></div>, este niño vivia 
    			en una ciudad muy bonita, esta ciudad era #ciudad#. Todavia era muy 
    			pequeño solo tenia #años# y por eso tenia mucho miedo a los lobos, 
    			una vez, la madre de una niña de #ciudad# la mando a casa de su 
    			abuelita ........... etc etc.</p>
    			<input type="submit" name="submit" value="ENVIAR" class="btn" />
    			</form>
    		</div>
    		<div id="op2">
    			<form>
    <table style="width: 465px; height: 144px;">
    				<tr>
    					<td style="width: 177px; height: 140px;" valign="top">
    					<p class="style2" style="height: 140px">Como te llamas?<br>
    					Donde vives?<br>
    					Cuantos años tienes?<br>
    					Como se llama Papa?<br>
    					Como se llama Mama?</p>
    					</td>
    					<td style="height: 140px" valign="top">
    					<p class="style2" style="height: 140px">
    					<input type="text" size="30" name="niño" required="required" /><br />
    					<input type="text" size="30" name="ciudad" required="required" /><br />
    					<input type="text" size="10" name="años" required="required" /><br />
    					<input type="text" size="10" name="papa" required="required" /><br />
    					<input type="text" size="20" name="mama" required="required" /></p>
    					</td>
    				</tr>
    			</table>
    
    			<br><br />
                <p>texto del cuento pulgarcito....</p>
    			<input type="submit" name="submit" value="ENVIAR" class="btn" />
    			</form>
    		</div>
    
    	</div>
    	
    	<script type="text/javascript">
    		function elegir_opcion(combo) {
    			$tipo = jQuery(combo).val();
    			$campos = jQuery("#"+$tipo).html();
    			jQuery(".opcionesWrapper").html($campos);
    		}
    	</script>
    		
    </body>
    </html>

    y el resultado que consigo al insertar el texto es este:
    1.jpg

    Por cierto el "enviar" no hace nada lo puse por si lo necesitaba para insertar el texto

    Gracias anticipadas Isabel
    Última edición por Isabel_Var; 07/02/2018 a las 22:31 Razón: error en el codigo

Temas Similares

  1. Problema al sustituir la index.html
    Por nadinita en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 5
    Último Mensaje: 01/11/2010, 01:19
  2. sustituir imagen desde la propia web
    Por Angel en el foro Foro General
    Respuestas: 6
    Último Mensaje: 12/10/2008, 10:35
  3. Sustituir los frames por tablas en una pagina Web
    Por chisco29 en el foro Foro General
    Respuestas: 0
    Último Mensaje: 05/08/2008, 15:31

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •