[SOLUCIONADO] Capturar valor de radio, dentro de una variable jquery

miguelalexep · #1 (**permalink**) 03/09/2014, 14:15

Buenas tardes, el problema que tengo es el siguiente, tengo dos radio button, uno con el value si y el otro con el value no. Lo que hago es usar la funcion change en jquery, para que al momento de escoger uno de los dos radio, guarde el value dentro de una variable, para despues meterla dentro de un if y segun la condicion, agregar nuevos elementos a otro div. Aqui el codigo

<div id="factura">¿Requiere factura?<input type="radio" name="radio" value"si">Si</input> <input type="radio" name="radio" value="no">No</input></div><br>
<div id="respuesta"></div>
{% endblock %}
<script>
$(document).ready(function(){
$("#factura").on('change', function(){
var respuesta = $(this).val();
if(respuesta == "si"){
$("#respuesta").html("algo")
}else
$("#respuesta").html("algo")
});
});
</script>

PHPeros · #2 (**permalink**) 03/09/2014, 14:51

El problema (aunque no nos lo hayas explicado) es sencillo: en los divs no existe el evento change... Lo haces como si se tratara de un select...

miguelalexep · #3 (**permalink**) 03/09/2014, 15:05

y como seria?

jvier · #4 (**permalink**) 03/09/2014, 15:09

Cita:

Iniciado por miguelalexep

Buenas tardes, el problema que tengo es el siguiente, tengo dos radio button, uno con el value si y el otro con el value no. Lo que hago es usar la funcion change en jquery, para que al momento de escoger uno de los dos radio, guarde el value dentro de una variable, para despues meterla dentro de un if y segun la condicion, agregar nuevos elementos a otro div. Aqui el codigo

<div id="factura">¿Requiere factura?<input type="radio" name="radio" value"si">Si</input> <input type="radio" name="radio" value="no">No</input></div><br>
<div id="respuesta"></div>
{% endblock %}
<script>
$(document).ready(function(){
$("#factura").on('change', function(){
var respuesta = $(this).val();
if(respuesta == "si"){
$("#respuesta").html("algo")
}else
$("#respuesta").html("algo")
});
});
</script>

Saludos.. estas cerca; solo falto algo

Código Javascript:

Ver original//CAMBIA ESTO
$("#factura").on('change', function(){
// POR ESTO
$("#factura input[type=radio]").on('change', function(){

jvier · #5 (**permalink**) 03/09/2014, 15:16

Por cierto te falta el = en el valor del radio "SI" tu tienes value"si" en vez de value="si"

miguelalexep · #6 (**permalink**) 03/09/2014, 16:06

mmmm, ya lo use asi y sigue sin agregarme los elementos que quiero al hacer click

jvier · #7 (**permalink**) 03/09/2014, 16:11

Basandome a lo que compartes funciona correctamente, puedes ver el ejemplo de lo que quieres en este link: http://jsfiddle.net/2t49ywq5/1/

en este ejemplo se detecta el cambio en los radios y se pueden realizar la acciones que quieras dentro de la condicion.

miguelalexep · #8 (**permalink**) 03/09/2014, 16:16

Gracias, pero ya lo puse exactamente igual y sigue sin funcionarme, no se que pueda ser

jvier · #9 (**permalink**) 03/09/2014, 16:18

Imagino que el error esta en otra parte del codigo que no conozco.. te importaria compartir el codigo completo de esta pagina para intentar ayudarte mejor?

miguelalexep · #10 (**permalink**) 03/09/2014, 17:22

{% extends 'base.html' %}
{% load url from future %}
{% load custom_tags %}
{% block contenido %}
<style>
input[type="checkbox"]{
height:50px;
width:100px;
}
.checkboxtext{
font-size: 28px;
}
#derecha{
position:relative;
margin-left:400px;
}
#espacio{
height:60px;
}
#factura{
margin-left:26px;
font-size:16px;
}
#espacio1{
height:10px;
}
#respuesta{
margin-left:26px;
font-size:16px;
}
<pre><code>.carousel{
width:100%;
}
.panes{
width:<mark>400</mark>%;
}
.panes > li{
width:<mark>25</mark>%;
}</code></pre>

@keyframes carousel{
0% { left:0; }
11% { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25% { left:-200%; }
36% { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50% { left:-400%; }
61% { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75% { left:-200%; }
86% { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100% { left:0; }
}
</style>
<h1 style="text-align:center;">Bienvenido</h1>
<input type="checkbox" name="optiona" id="opta" value="Ventas" />
<span class="checkboxtext">
Ventas
</span><br>
<div id="espacio1"></div>
<input type="checkbox" name="optionb" id="optb" value="Devoluciones"/>
<span class="checkboxtext">
Devoluciones
</span><br>
<div id="espacio1"></div>
<input type="checkbox" name="optionc" id="optc" value="Garantias"/>
<span class="checkboxtext">
Garantias
</span></br>
<div id="espacio"></div>
<div id="factura">¿Requiere factura?
<input type="radio" name="radio" value="si">Si</input>
<input type="radio" name="radio" value="no">No</input>
</div>
<div id="respuesta"></div>
<div id="derecha">
<div class=carousel>

<ul class=panes>

<li>
<img src="{{ STATIC_URL }}/img/documentacion/oferta.jpg" height="350px">

</li>



</ul>
</div>
</div>
{% endblock %}
<script>
$(document).ready(function () {
$("#factura input[type=radio]").on('change', function () {
var respuesta = $(this).val();
if (respuesta == "si") {
$("#respuesta").html("algo si");
} else{
$("#respuesta").html("algo no");
}
});
});
</script>

jvier · #11 (**permalink**) 03/09/2014, 17:30

ya veo lo que ocurre...

necesitas enlazar a jquery ya que es requerido para su funcionamiento..

hazlo asi:

Código Javascript:

Ver original//PON ESTO ARRIBA DE TU SCRIPT ASI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
 
</script>
 
<script>
$(document).ready(function () {
$("#factura input[type=radio]").on('change', function () {
var respuesta = $(this).val();
if (respuesta == "si") {
$("#respuesta").html("algo si");
} else{
$("#respuesta").html("algo no");
}
});
});
</script>

miguelalexep · #12 (**permalink**) 03/09/2014, 17:38

mmm gracias, pero sigue sin funcionar

jvier · #13 (**permalink**) 03/09/2014, 17:43

Que raro... ami me funciona, incluir jquery es lo único que faltaba para que en el div respuesta aparezcan los elementos que necesitas.

miguelalexep · #14 (**permalink**) 03/09/2014, 17:56

mmmm si me puedes pasar el codigo, como te quedo ya final por favor

jvier · #15 (**permalink**) 03/09/2014, 17:58

{% extends 'base.html' %}
{% load url from future %}
{% load custom_tags %}
{% block contenido %}
<style>
input[type="checkbox"]{
height:50px;
width:100px;
}
.checkboxtext{
font-size: 28px;
}
#derecha{
position:relative;
margin-left:400px;
}
#espacio{
height:60px;
}
#factura{
margin-left:26px;
font-size:16px;
}
#espacio1{
height:10px;
}
#respuesta{
margin-left:26px;
font-size:16px;
}
<pre><code>.carousel{
width:100%;
}
.panes{
width:<mark>400</mark>%;
}
.panes > li{
width:<mark>25</mark>%;
}</code></pre>

@keyframes carousel{
0% { left:0; }
11% { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25% { left:-200%; }
36% { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50% { left:-400%; }
61% { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75% { left:-200%; }
86% { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100% { left:0; }
}
</style>
<h1 style="text-align:center;">Bienvenido</h1>
<input type="checkbox" name="optiona" id="opta" value="Ventas" />
<span class="checkboxtext">
Ventas
</span><br>
<div id="espacio1"></div>
<input type="checkbox" name="optionb" id="optb" value="Devoluciones"/>
<span class="checkboxtext">
Devoluciones
</span><br>
<div id="espacio1"></div>
<input type="checkbox" name="optionc" id="optc" value="Garantias"/>
<span class="checkboxtext">
Garantias
</span></br>
<div id="espacio"></div>
<div id="factura">¿Requiere factura?
<input type="radio" name="radio" value="si">Si</input>
<input type="radio" name="radio" value="no">No</input>
</div>
<div id="respuesta"></div>
<div id="derecha">
<div class=carousel>

<ul class=panes>

<li>
<img src="{{ STATIC_URL }}/img/documentacion/oferta.jpg" height="350px">

</li>



</ul>
</div>
</div>
{% endblock %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#factura input[type=radio]").on('change', function () {
var respuesta = $(this).val();
if (respuesta == "si") {
$("#respuesta").html("algo si");
} else{
$("#respuesta").html("algo no");
}
});
});
</script>

miguelalexep · #16 (**permalink**) 03/09/2014, 18:00

a ok, ya me salio :), muchas gracias, una ultima duda, si quiero poner un place holder en el input, dentro del .html, como seria?

PHPeros · #17 (**permalink**) 04/09/2014, 05:55

¿Por qué no cambias el onchange por onclick? Vamos, es lo lógico.

jvier · #18 (**permalink**) 04/09/2014, 08:18

Cita:

Iniciado por miguelalexep

a ok, ya me salio :), muchas gracias, una ultima duda, si quiero poner un place holder en el input, dentro del .html, como seria?

miguelalexep · #19 (**permalink**) 04/09/2014, 10:19

Si me funcion asi normal el placeholder, pero en jquery al ponerlo en el .html solo me agrega la primer palabra. no me agrega lo demas. Lo tengo asi

$("#respuesta").html("<input type=text placeholder=Nombre de la empresa></input>");

Solo me agrego la palabra Nombre

jvier · #20 (**permalink**) 04/09/2014, 11:15

Cita:

Iniciado por miguelalexep

Si me funcion asi normal el placeholder, pero en jquery al ponerlo en el .html solo me agrega la primer palabra. no me agrega lo demas. Lo tengo asi

$("#respuesta").html("<input type=text placeholder=Nombre de la empresa></input>");

Solo me agrego la palabra Nombre

te faltan las comillas. usalo asi:

Código Javascript:

Ver original$("#respuesta").html("<input type='text' placeholder='Nombre de la empresa'></input>");