Show Field if Radio Button is Selected

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>

Answers:

Answer

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

Answer

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.

Answer

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.

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.