I'm attempting to get the Website URL field on this page to display only when the previous question has the radio button "Yes" selected. I've searched and tried a few code examples, but they aren't working. Does anyone have any suggestions for me?
Thanks in advance!
<div class="editfield">
<div class="radio">
<span class="label">Do you have your own website? (required)</span>
<div id="field_8"><label><input type="radio" name="field_8" id="option_9" value="Yes"> Yes</label><label><input type="radio" name="field_8" id="option_10" value="No"> No</label></div>
</div>
</div>
<div class="editfield">
<label for="field_19">Website URL </label>
<input type="text" name="field_19" id="field_19" value="" />
</div>
I noticed that you initally put the javascript I gave you at the top of the page. If you are going to do this then you need to encapsulate the code in a jquery $(document).ready(function(){ });. You only need to use a document ready when your html follows after the javascript.
$(function() {
// place code here
});
However, in this scenario I have created another alternative that will be better, but do not forget that you have to initially set the web url div as hidden. Also, I highly recommend that you set better control ids; it will make your javascript easier to understand.
$('input[name=field_8]').on("click", function(){
var $div_WebUrl = $('#field_19').closest('.editfield');
if($('input[name=field_8]').index(this) == 0)
$div_WebUrl.show();
else
$div_WebUrl.hide();
});
Live DEMO
I have created a little example:
<div class="editfield">
<div class="radio">
<span class="label">Do you have your own website? (required)</span>
<div id="field_8"><label><input type="radio" name="field_8" id="option_9" value="Yes" onclick="document.getElementById('divUrl').style.display='block'"> Yes</label><label><input type="radio" name="field_8" id="option_10" value="No" onclick="document.getElementById('divUrl').style.display='none'"> No</label></div>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label for="field_19">Website URL </label>
<input type="text" name="field_19" id="field_19" value="" />
</div>
jsFiddle: http://jsfiddle.net/EQkzE/
Note: I have updated the div to include a style, cause I do not know what your css class looks like. Good luck.
Here's a pure JS Solution:
document.getElementById("field_19").parentNode.style.display = "none";
document.getElementById("option_9").onclick = toggleURLInput;
document.getElementById("option_10").onclick = toggleURLInput;
function toggleURLInput(){
document.getElementById("field_19").parentNode.style.display = (document.getElementById("option_9").checked)? "block" : "none";
}
Not a very dynamic solution, but it works.
Something like this will bind the click event to a simple function to look at the radio button and show the other div.
$('#option_9').on('click', function() {
if ($('#option_9').is(':checked')) {
$('#field_19').closest('.editfield').show();
} else {
$('#field_19').closest('.editfield').hide();
}
});
Run sample code
Related
The following codes works with no problem if I am running the file locally on my drive. Unfortunately, I need to upload this form to a software called MasterControl. It does not work. I was wondering if there is another way of coding that is universal to local as well as upload to a server for MasterControl.
The purpose of this code is - once you click on Yes button on the first level question then the next level questions will appear. If you click on No button on the first level and if the questions from the next level questions showing then it will clear all the selected buttons and hide the section of the second level questions.
Here is the codes:
HTML Code:
<div id="divDeathOccurred" class="fieldRow">
<div class="leftLabel labelWidth22">
<label for="">A. Has a death occurred?</label>
</div>
<div class="leftField">
<div class="formField34">
<input id="rbDeathOccurred" name="rbDeathOccurred"
type="radio" class="radiobuttonfield" title="Death Occurred"
value="Yes" onclick="javascript:USAYesNoCheckDO();" />Yes
<input id="rbDeathOccurred" name="rbDeathOccurred"
type="radio" class="radiobuttonfield" title="Death Occurred"
value="No" onclick="javascript:USAYesNoCheckDO();" />No
</div>
</div>
<p> </p>
<div id="USADOYesNo" style="display:none">
<ol type="1" class="indentList">
<li>Is there a reasonable possibility that a device failure
or malfunction was a direct or indirect factor in the death?
<br>
<input id="rbDOYesNo" name="rbDOYesNo" type="radio"
class="USDO radiobuttonfield" title="Yes Reportable" value="Yes"
onclick="javascript:USDeviceFailure30Days();" />
<label for="rbDOYesNo" class="rptColor">Yes -
reportable</label>
<input id="rbDOYesNo" name="rbDOYesNo" type="radio"
class="USDO1 radiobuttonfield" title="No" value="No"
onclick="javascript:USDeviceFailure30Days();" />No - No
Report
<div id="calc" class="indentListCalc">
<input id="dt30Days3" type="text" class="textfieldCalc
labelWidth25" alt="Device Malfunction" />
</div>
<p></p>
</li>
<li>Is there a reasonable possiblity that a device design
defect was direct or indirect factor in the death?
<br>
<input id="rbDOYesNo1" name="rbDOYesNo1" type="radio"
class="USDO2 radiobuttonfield" title="Yes Reportable" value="Yes"
onclick="javascript:USDeviceDesign30Days();"/>
<label for="rbDOYesNo1" class="rptColor">Yes -
Reportable</label>
<input id="rbDOYesNo1" name="rbDOYesNo1" type="radio"
class="USDO3 radiobuttonfield" title="No" value="No"
onclick="javascript:USDeviceDesign30Days();" />No - No Report
<div id="calc1" class="indentListCalc">
<input id="dt30Days1" type="text" class="textfieldCalc
labelWidth25" alt="Device Design" />
</div>
<p></p>
</li>
<li>Is there a reasonable possiblity that the device
labeling was direct or indirect factor in the death?
<br>
<input id="rbDOYesNo2" name="rbDOYesNo2" type="radio"
class="USDO4 radiobuttonfield" title="Yes Reportable"
value="Yes" onclick="javascript:USDeviceLabeling30Days();"/>
<label for="rbDOYesNo2" class="rptColor">Yes -
Reportable</label>
<input id="rbDOYesNo2" name="rbDOYesNo2" type="radio"
class="USDO5 radiobuttonfield" title="No" value="No"
onclick="javascript:USDeviceLabeling30Days();"/>No - No Report
<div id="calc2" class="indentListCalc">
<input id="dt30Days2" type="text" class="textfieldCalc
labelWidth25" alt="Device Labeling" />
<p></p>
</div>
</li>
</ol>
</div>
</div> <!-- final section Death Occurred end -->
Javascript Code:
function USAYesNoCheckDO() {
if (document.getElementById('rbDeathOccurred').checked) {
document.getElementById('USADOYesNo').style.display = 'block';
} else {
document.getElementById('USADOYesNo').style.display = 'none';
document.getElementsByClassName('USDO')[0].checked = false;
document.getElementsByClassName('USDO1')[0].checked = false;
document.getElementById('calc').style.display = 'none';
document.getElementsByClassName('USDO2')[0].checked = false;
document.getElementsByClassName('USDO3')[0].checked = false;
document.getElementById('calc1').style.display = 'none';
document.getElementsByClassName('USDO4')[0].checked = false;
document.getElementsByClassName('USDO5')[0].checked = false;
document.getElementById('calc2').style.display = 'none';
}
}
I am still learning about all of this HTML, Javascript, and I am just getting into JQuery.
If you need me to put these codes in jsfiddle, please let me know.
Thank you so much,
IreneS
Update:
I forgot to add that the codes work on the server when you select the buttons and the show and hide - the one thing does not work is the clearing the selected buttons.
Thank you again.
Update 2:
After many hours of research and trying to learn Jquery, hoping that it will give me another way to get this issue resolved and get it to work on the server, unfortunately it did not. The reason I was trying Jquery, because I was looking at the other forms that were on the MasterControl server, and they were coded with Jquery. Unfortunately, being a beginner in Jquery, I am not able to get it to work on both sides - the local drive and the server. Please can someone check it and see what I am missing or doing wrong.
function getChecked(radioGroupName, index)
{
var oRadioList = document.getElementsByName(radioGroupName);
return oRadioList[index].checked;
}
function setChecked(radioGroupName, index, state)
{
var oRadioList = document.getElementsByName(radioGroupName);
oRadioList[index].checked = state;
}
function USAYesNoCheckDO()
{
if(getChecked("rbDeathOccured",0) == true)
{
$('#USADOYesNo').slideDown(1000);
}
else
{
$('#USADOYesNo').slideUp(1000);
setChecked("rbDOYesNo",0,false);
setChecked("rbDOYesNo",1,false);
setChecked("rbDOYesNo1",0,false);
setChecked("rbDOYesNo1",1,false);
setChecked("rbDOYesNo2",0,false);
setChecked("rbDOYesNo2",1,false);
}
}
Or if you have any idea how to get this issue fixed. As I mentioned before the buttons work and the show and hide of the questions work, the issue is when I want to reset and set it back to the original status - blank.
Thank you again and appreciate any help.
IreneS
Update 3:
Please anybody have any thoughts/ideas on how to fix this issue.
I really appreciate any help.
Thank you,
IreneS
Update 4:
Just incase someone have the same issue as I am and need a solution, I finally found a website after all this time of searching that gave me the answer and it works! Yeh! I just customized the coding to my needs and it works locally and on the server.
http://www.electrictoolbox.com/javascript-clear-form/
IreneS.
You use the same id attribute for multiple elements. id should be unique on the page, only name can be the same to group multiple input elements of the same type. I don't know if this is the main problem but it is a start.
I'm building a practice app. I've got a working filter system using checkboxes and radio buttons. I need a way to replace them with buttons that I can animate. For my plunk I'll use buttons with text, but then offline I'll replace them with images. Here's a sample of my work:
HTML
<h2>Type</h2>
<label class="btns">
<input type="radio" name="vegMeat" value="" ng-model="type.searchVeg" ng-checked="true">All
</label>
<label class="btns">
<input type="radio" name="vegMeat" value="veg" ng-model="type.searchVeg">Vegetarian
</label>
<label class="btns">
<input type="radio" name="vegMeat" value="meat" ng-model="type.searchVeg">Meat
</label>
</div>
JavaScript
.filter('searchType', function() {
return function(foods, search) {
var filtered = [];
if (!search) {
return foods;
}
angular.forEach(foods, function(food) {
if (angular.lowercase(food.type).indexOf(angular.lowercase(search)) != -1) {
filtered.push(food);
}
});
return filtered;
};
sample plunk
https://plnkr.co/edit/xk1VcCfAsVknyahux4fw?p=preview
PS I know mine is not the most efficient way of doing it, but I'm still a beginner. The buttons are my main concern but if anyone does have suggestions on how to improve the code itself, please feel free to provide an example. This is just a sample of my plunk. My full one has another 5 sets of buttons and many more recipes.
As you can see, I have used not one, but two instructions to select the button, but none of them works. What is wrong?
JS :
$(document).ready(function (){
document.getElementById('regent1pick').checked = true;
$('input:radio[id=regent1pick]').checked = true;
})
HTML :
<form name="COR" id="POC" >
<fieldset data-role="controlgroup" data-type="vertical">
<input type="radio" id="regent1pick" name="AKJA" onclick="regentchange()" />
<label class="option" for="regent1pick" style="text-align:center" >regentnik 1 </label>
</fieldset>
</form>
jsbin
With jQuery try:
$('input:radio[id=regent1pick]').attr('checked','true');
(or simple select by id if this is option)
$('#regent1pick').attr('checked','true');
But your plain vanilla JS looks correct and should work. As an alternative you can try:
document.getElementById('regent1pick').setAttribute('checked', 'true');
UPDATE:
For jQuery mobile you also need refresh UI via .checkboxradio("refresh") method. The full command would be:
$('#regent1pick').attr('checked','true').checkboxradio("refresh");
I have some html like this :
<p>a. Is there a skin and/or scar condition?
<br>
<input id="ucWSDBQ_CheckBox3" type="checkbox" name="ucWSDBQ$CheckBox3">
<label for="ucWSDBQ_CheckBox3"></label>Yes
<input id="ucWSDBQ_CheckBox5" type="checkbox" name="ucWSDBQ$CheckBox5">
<label for="ucWSDBQ_CheckBox5"></label>No
<br> If yes, check all that apply and complete the corresponding DBQ(s):
<br>
<input id="ucWSDBQ_CheckBox6" type="checkbox" name="ucWSDBQ$CheckBox6">
<label for="ucWSDBQ_CheckBox6"></label> <b>Skin Diseases DBQ<br> </b>
<input id="ucWSDBQ_CheckBox7" type="checkbox" name="ucWSDBQ$CheckBox7">
<label for="ucWSDBQ_CheckBox7"></label> <b> Scars DBQ</b>
</p>
I want to hide the text If yes, check all that apply and complete the corresponding when user clicks No, and show the text when user clicks Yes. I have tried different things but didn't work.
Fiddle
Look at this fiddle and see if it's what you're after.
$('form').on('click', function() {
if($('#ucWSDBQ_CheckBox3').is(':checked')) {
$('.hidden').css('display', 'block');
} else {
$('.hidden').css('display', 'none');
}
});
I've added a form and a wrapper-div to your HTML.
http://jsfiddle.net/yUu6q/10/
Handle the onClick event of the checkbox. In that you will have to write code for whatever you want to achieve
I have two radio buttons that are YES (value=1) and NO (value=0), I'm using the following code to show a hidden division when you click on YES:
$("#regaddress").change(function(){
if ($(this).val() == "1" ) {
$("#registeredaddress").slideDown("fast"); //Slide Down Effect
} else {
$("#registeredaddress").slideUp("fast"); //Slide Up Effect
}
});
Code for Radio Buttons:
<input name="regaddress" id="regaddress" type="radio" value="1">Yes
<input name="regaddress" id="regaddress" type="radio" value="0" checked> No
What I need is the code to hide that division when you click NO. Should be a simple answer for some of you, but personally feel like banging my head against a wall this afternoon trying to work out how to hide it!
That's easy enough, because you posted no id or name attributes in your original question, I've abstracted it out to the following:
html
<form action="" method="post">
<fieldset>
<input type="radio" value="0" name="state" id="no" />
<label for="no">No</label>
<input type="radio" value="1" name="state" id="yes" />
<label for="yes">Yes</label>
</fieldset>
</form>
<div id="hidden">This div is hidden</div>
jQuery
$(document).ready(
function(){
$('input:radio[name=state]').change(
function(){
if ($(this).val()==1) {
$('#hidden').show();
}
else {
$('#hidden').hide();
}
}
);
});
Demo of the above posted at JS Fiddle.
Amended slightly to take into account the slideUp() and slideDown() usage:
$(document).ready(
function(){
$('input:radio[name=state]').change(
function(){
if ($(this).val()==1) {
$('#hidden').slideDown(1000).text('This div is no longer hidden.');
}
else {
$('#hidden').slideUp(1000).text('This div is now hidden.');
}
}
);
});
Demo at JS Fiddle.
Final edit to take into account your id and name attributes:
$(document).ready(
function(){
$('input:radio[name=regaddress]').change(
function(){
if ($(this).val()==1) {
$('#registeredaddress').slideDown(1000).text('This div is no longer hidden.');
}
else {
$('#registeredaddress').slideUp(1000).text('This div is now hidden.');
}
}
);
});
Demo at JS Fiddle
Also, if you're interested, I did something similar that you can use for pretty much any type of checkbox or form element. Dynamic Show Hide. It may be a little overboard for what you're doing but it's handy if you do this thing a lot since you can stick it in it's on js file and call it whenever you need it.