We Keep Coding

Show / hide div on page load depending on radio button value - Jquery and Ruby on Rails Simple Form

Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.
jQuery(document).ready(function() {
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
UPDATE - HTML OUTPUT OF RADIO BUTTONS:
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: block;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>

Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.
Note: To prevent flickering, give the element an initial style of display: none.
jQuery(document).ready(function() {
if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) {
jQuery('#denied-quote-one').show();
}
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: none;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>

HTML FORMS - Passing values to two different forms on the same page

I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I’ve turned into boxes for display reasons) and they all hold a value (e.g. 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having
both forms cover the whole page but still didn't have any luck.
I’ll post some code below to help you understand.
PS. If you need more code to understand, I can post it to pastebin.
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>
<div id="content">
<div id="container">
<div id="table">
<div id="tr1">
<div id="td1">
<input type="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</div>
<div id="td2">
<input type="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</div>
<div id="td3">
<input type="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</div>
<div id="td4">
<input type="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</div>

To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:
var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
valueSelected will contain the value of the selected radio.
If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.
The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:
<input type="radio" class="myRadio">
and in JS: var inputs = document.getElementsByClassName('myRadio');

Alter DIV on Checkboxes

i want to have a series of yes/no questions, & depending on the RADIO BUTTON, the answer / text appears on the appropriate DIV.
I have found one answer - here and this does what i am after.
My question is, how easy is it to alter this so I can have MULTIPLE sets of radio buttons.
Ie
<input type="radio" name="type" value="tuser1" id="tuser1" /> (question 1)
<input type="radio" name="type" value="tuser2" id="tuser2" /> (question 2)
<input type="radio" name="type" value="tuser3" id="tuser3" /> (question 3) etc.
is it easy to alter the function, to accept numeric references & to alter the approriate DIV set ?
PS - i assume i can have text of multiple lines/paragraphs in each DIV.
PPS: my ultimate aim is to combine the "visable" divs, into a master div underneath (with a blank line in each div reply).
IE,
Q1 (yes/no), (show answer to q1 "yes")/(show answer to q1 "no")
master div:-
show Q1 result.
show Q2 result.
show Q3 result.
etc...
i'll put the master div inside a TEXTAREA form - to send to another website for processing - on my server.
i want the master div to preserve any new-lines / formattng of the answers (if the answer is on several lines).

Wrap your each question set in div. By this you can easily group your question. You can use class and data attributes.
Try this code,
HTML :
<div id="Qset1">
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type" checked />
<input type="radio" name="type" data-id="No" value="tuser" id="tuser" />
<div id='optuser' class="yes">//some input fields1</div>
<div id='optdeliverer' class="no">//some other input fields1</div>
</div>
<div id="Qset2">
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type2" checked />
<input type="radio" name="type2" data-id="No" value="tuser" id="tuser" />
<div id='optuser' class="yes">//some input fields2</div>
<div id='optdeliverer' class="no">//some other input fields2</div>
</div>
<div id="Qset3">
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type3" checked />
<input type="radio" name="type3" data-id="No" value="tuser" id="tuser" />
<div id='optuser' class="yes">//some input fields3</div>
<div id='optdeliverer' class="no">//some other input fields3</div>
</div>
JS :
$(document).ready(function () {
$('input[type=radio]').change(function () {
if ($(this).attr('data-id', 'yes').is(':checked')) $(this).closest('div').find('.yes').toggle();
if ($(this).attr('data-id', 'no').is(':checked')) $(this).closest('div').find('.no').toggle();
});
});
SEE THIS FIDDLE DEMO

Demo find here
Remove checked property from radio buttons
I have add parent div for wrap questions called questions
Named textarea id as answers
HTML
<div id="questions">
<div id="Qset1">Question number 1
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type" />Yes
<input type="radio" name="type" data-id="No" value="tuser" id="tuser" />No
</div>
<div id="Qset2">Question number 2
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type2" />Yes
<input type="radio" name="type2" data-id="No" value="tuser" id="tuser" />No
</div>
<div id="Qset3">Question number 3
<input type="radio" id="deliverer" data-id="yes" value="deliverer" name="type3" />Yes
<input type="radio" name="type3" data-id="No" value="tuser" id="tuser" />No
</div>
</div>
<textarea id="answers"></textarea>
Added some css
#questions,#answers{
width:200px;
display: inline-block;
vertical-align: top;
}
#answers{
border:1px soied #000;
height:200px;
width:300px;
}
Here is the Jquery
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
$(document).ready(function () {
$('input[type=radio]').click(function () {
var ans="";
$('input[type=radio]').each(function(){
if($(this).attr("checked"))
{
var question=$(this).parent().contents().get(0).nodeValue;
ans=ans + question + $(this).val() + "\r" ;
}
$("#answers").html(ans);
});
});
});

How to make radio buttons horizontal inside fieldset

Inside form I have two radio buttons like
<fieldset data-role="controlgroup">
<legend>
Choose a pet:
</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1"><img src="../static/images/Dog.png" />Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2"><img src="../static/images/Cat.png" />Cat</label>
</fieldset>
(I am using jquery mobile). How to make that those two buttons be horizontal and not vertical ( at the moment dog button is above cat and I need to be in one row ). How to make horizontal ?

try this in fieldset
<fieldset data-role="controlgroup" data-type="horizontal" >
Source http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-radiobuttons.html
form this site verify the section Horizontal radio button sets

Javascript - formular - nested dynamic appendchild functions

I have a form which changes the inputfields depending on a radio-button.
for text there appears a textbox
for textarea there appear additional 2 fields for cols And rows
for select, checkbox and radio there appear additional fields with appendchild
have a look here:
http://joomla.byethost16.com/php.php
Now what i want is to let the user add more params, param2, param3, etc.
Unfortunately i made the js functions that trigger the fields according to the radio-button like this
function textarea(){
if (document.getElementById('option2').checked = true){
document.getElementById('feld').style.display = '';
document.getElementById('feld2').style.display = '';
document.getElementById('feld4').style.display = 'none';
}}
So that means i have no dynamics in my form since the id in this function is not yet dynamic and onclick will trigger anything or only always the first param1.
all params should be like this but somehow increasing numbers and the Js-function for the radio should take them too
<td>Param_1</td>
<td><p>
<input type="radio" onclick='text()' name="option0" id="option0" value="text" checked="yes">text
<input type="radio" onclick='spacer()' name="option0" id="option1" value="spacer">spacer
<input type="radio" onclick='textarea()' name="option0" id="option2" value="textarea">textarea
<input type="radio" onclick='selecta()' name="option0" id="option3" value="select">select
<input type="radio" onclick='radio()' name="option0" id="option4" value="radio">radio
<input type="radio" onclick='checkbox()' name="option0" id="option5" value="checkbox">checkbox</br>
<input type="hidden" name="fields" value="1" id="fields" />
<div id="feld">
Name <input type="text" name="param1" id="param1" size="40" maxlength="40">
Default<input type="text" name="paramdef1" id="paramdef1" size="40" maxlength="40">
<div id="feld4" style="display:none;">
<input type="text" name="param11" size="40" value="value1" style="display: inline">
<a href=# onclick='add(1)'>add</a> <a href=# onclick='reset()'>reset</a></div>
</div>
<div id="feld2" style="display:none;">
Columns<input type="text" name="cols1" size="20" maxlength="40">Rows<input type="text" name="rows1" size="20" maxlength="40"></div>
</td>
</tr>
How do i do that my form gets dynamically (like i did the "add/reset" at checkboxes) and people can add more params?
For the complete code please go here and view source:
http://joomla.byethost16.com/php.php
thx so much for help on this

i solved it by using $(this) with a "click" bind to each class which sits on the buttons.
another solution would be to use a plugin, for example http://www.mdelrosso.com/sheepit/index.php?lng=en_GB which is very good but relys on a certain structure (you have to define an index at the form, which has to be resorted in processing under most cases since some index_vars can be skipped userwise.)