JavaScript - Enviar variable a ventana modal Foundation 5

   
Vista:

Enviar variable a ventana modal Foundation 5

Publicado por Rumbo (1 intervención) el 23/05/2016 01:21:06
Hola, tengo un inconveniente al transmitir el valor de una variable js a una ventana modal, usando Foundation 5.

Necesito llamar a un mismo formulario en una ventana modal desde varios botones (diversos productos) y transmitir el nombre del producto a un campo Input text "producto" del formulario.

Esto no está funcionando! Gracias de antemano.

Script
1
2
3
4
5
6
7
8
<script>
	var consultando = "-" ;
 
	function asignar(valor) {
		consultando = valor;
		return consultando;
	}
</script>

Varias llamadas como esta, una para cada producto:
1
2
3
<a href="#" data-reveal-id="myModal" onClick="asignar('Nombre producto A');">
    <p class=" button">Consulte por<br>este producto</p>
</a>

En el mismo código HTML la ventana modal:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- FORMULARIOS -->
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Consúltenos ahora mismo!</h2>
<form action="enviar-consulta.php" method="post" id="formulario" accept-charset="UTF-8" data-abide>
	<fieldset>
	...... otros campos ......
		<label>Consulta por:
			<script>
			document.write('<input name="producto"  type="text" id="producto" value="' + consultando + '" readonly >');
			</script>
		</label>
 
		<label>Su Consulta <small>Requerido</small>
			<textarea name="consulta" rows="3" required id="consulta" title="Su Consulta"></textarea>
		</label>
 
		<button type="submit" class="alert text-center" id="boton-consultar">Consultar</button>
 
	</fieldset>
</form>
<a class="close-reveal-modal">&#215;</a> </div>

Todo forma parte del mismo archivo HTML.
Muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Juan Diego

Enviar variable a ventana modal Foundation 5

Publicado por Juan Diego (37 intervenciones) el 28/05/2016 08:11:20
Hola Rumbo,

Cuando llamas a la función y quieres recuperar el valor del mismo, no puedes usar el return para insertarlo en el elemento HTML, para ello deberás usar las funciones del HTML DOM.

Una de estas funciones es el document.getElementById, así:

1
2
3
4
5
function asignar(valor) {
              var mostrar = document.getElementById('contenedor');
		consultando = valor;
	       mostrar.innerHTML = consultando;
}

En este caso, contenedor es el nombre del id del elemento donde se mostrará el valor. La propiedad innerHTML hace referencia al interior del contenedor.

Si no conoces el valor del id, puedes hacer uso de this, así:

1
2
3
<a href="#" data-reveal-id="myModal" onClick="asignar('Nombre producto A', this);">
    <p class=" button">Consulte por<br>este producto</p>
</a>

Esto en tu código HTML, en tu JavaScript así:

1
2
3
4
function asignar(valor, mostrar) {
	       consultando = valor;
	       mostrar.innerHTML = consultando;
}

Cualquier duda, estaré atento.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar