Sustituir palabras por contenido de inputs
Publicado por Isabel (1 intervención) el 07/02/2018 23:10:32
Hola Chicos, estoy con un tema para los nenes y se me a ocurrido hacer una 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
el botón de enviar no hace nada lo puse por si era necesario para insertar el texto.
Gracias anticipadas Isabel
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!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 </div>
</div>
<div class="opciones">
<div id="op1">
<form>
Como te llamas? <input class="input" id="entrada2" onkeyup="javascript:{UI=document.getElementById('entrada2').value;
document.getElementById('ejemplo2').innerHTML=' '+UI;}" />
<br>
<p>Donde Vives? <input type="text" size="30" name="ciudad" /><br>
Cuantos años tienes? <input type="text" size="10" name="niño" /><br>
Como se llama tu mascota? <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>
el botón de enviar no hace nada lo puse por si era necesario para insertar el texto.
Gracias anticipadas Isabel
Valora esta pregunta
1
