Menu
I know this is a repeated question, but I cannot make it run. I tried all the solutions I found here in SO and googling...
I have this radio button form in my page. What I want is that when the user selects the 'only one attendee' option a text field appears ONLY for this option. If the user selects another one it dissapears.
Once the user selects only one option, the text box appears.
I've been trying doing with javascript. I use this piece of code
<script>
$(document).ready(function()
$("#send_to_one").hide();
$("input:radio[name="people"]").change(function(){
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show()
}else{
$("#send_to_one").hide();
}
}
}
});
</script>
The form's code is
<div id="send_to">
<input type="radio" id="send_poll" name="people" value="all" checked="checked">all the attendees</br>
<input type="radio" id="send_poll" name="people" value="one" >only one attendee<br/>
<div id="send_to_one">
<label>Write the attendee's name: </label><input type="text" id="attendeename"><br/><br/>
</div>
<input type="radio" id="send_poll" name="people" value="group">a group of attendees</br>
</div>
I've checked that the javascript files are loaded. I also tried putting the javascript code inside the html.erb file where the form is, in a separated .js file and in application.htm.erb's <head></head> section, but no luck. Where do I need to put each part of code exactly in order to work?
Using Rails 3.0.4, Ruby 1.8.9. I'm also using JQuery
989
To show or hide an element when a radio button is selected: Add a click event handler to all input elements of type radio . Each time a radio button is selected, check if it is the button that should show the element. If it is, set the display property of the hidden element to block .
Add Radio Buttons Dynamically In order to create a radio button, we need to define the input element and assign it to a variable called input. Then, change its input type to radio. Finally, append the input element to the label element.
As per my understanding you want to group the radio buttons such that one is selected at a time you can do it by adding name attribute in each radio button and give same name to all of them. So at time of submit you can get the value of selected variable in submit function call.
LIVE DEMO
HTML:
<div id="send_to">
<input type="radio" id="send_poll" name="people" value="all" checked="checked" />all the attendees<br/>
<input type="radio" id="send_poll" name="people" value="one" />only one attendee<br/>
<div id="send_to_one">
<label>Write the attendee's name: </label><input type="text" id="attendeename" /><br/><br/>
</div>
<input type="radio" id="send_poll" name="people" value="group" />a group of attendees<br/>
</div>
jQ:
$(document).ready(function(){
$("#send_to_one").hide();
$("input:radio[name='people']").change(function(){
if(this.value == 'one' && this.checked){
$("#send_to_one").show();
}else{
$("#send_to_one").hide();
}
});
});
$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='people']").change(function(){
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show()
}else{
$("#send_to_one").hide();
}
}
});
});
Your code was right, but a few missing braces, brackets, and unescaped quotes. Are you using any form of smart javascript editor? Because you really should...
http://jsfiddle.net/7yt2A/
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
