Avi Avi - 2 months ago 5
Javascript Question

Show specific options using radio buttons?

I know this question has been answered a few times and i found the answer as well. However the code doesn't seem to work the website I am trying to make. It is a static page and should work without internet. I think I am missing to define some function. please help!



<form>
<input id="id_radio1" type="radio" name="name_radio1" value="value_radio1">Option1</input>
<input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Option2</input>
<input id="id_radio3" type="radio" name="name_radio1" value="value_radio3">Option3</input>
<input id="id_radio4" type="radio" name="name_radio1" value="value_radio4">Option4</input>
<br>
<div id="ar_1" style="display:none;">
<p>info for option1</p>
</div>
<div id="ar_2" style="display:none;">
<p>info for option2</p>
</div>
<div id="ar_3" style="display:none;">
<p>info for option3</p>
</div>
<div id="ar_4" style="display:none;">
<p>info for option4</p>
</div>
</form>
<script>
$(document).ready(function () {
$('#id_radio1').click(function () {
$('#ar_1').show('fast');
$('#ar_2').hide('fast');
$('#ar_3').hide('fast');
$('#ar_4').hide('fast');
});
$('#id_radio2').click(function () {
$('#ar_1').hide('fast');
$('#ar_2').show('fast');
$('#ar_3').hide('fast');
$('#ar_4').hide('fast');
});
$('#id_radio3').click(function () {
$('#ar_1').hide('fast');
$('#ar_2').hide('fast');
$('#ar_3').show('fast');
$('#ar_4').hide('fast');
})
$('#id_radio4').click(function () {
$('#ar_1').hide('fast');
$('#ar_2').hide('fast');
$('#ar_3').hide('fast');
$('#ar_4').show('fast');
})
});
</script>




Answer

From your Code, you seem to be using JQuery Library. However, you have no import for that anywhere in your Code. For you code to thus work; you'd either have to include a Local Copy of JQuery (since you don't have Internet Access) or just load it from Hosted Servers (if you have Internet Access). Quick-Test it Here.

JAVASCRIPT:

<!-- LOCAL JQUERY INCLUDED IN SCRIPT TAG FIRST -->
<script type="text/javascript" src="assets/js/jquery.js"></script>

<!-- OR PULLED FROM HOSTED CDN: DELETE THIS OPTION IF YOU HAVE NO INTERNET ACCESS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<script type="text/javascript">
    (function($){
        $(document).ready(function(evt){
            $('#id_radio1').click(function () {
                $('#ar_1').show('fast');
                $('#ar_2').hide('fast');
                $('#ar_3').hide('fast');
                $('#ar_4').hide('fast');
            });

            $('#id_radio2').click(function () {
                $('#ar_1').hide('fast');
                $('#ar_2').show('fast');
                $('#ar_3').hide('fast');
                $('#ar_4').hide('fast');
            });

            $('#id_radio3').click(function () {
                $('#ar_1').hide('fast');
                $('#ar_2').hide('fast');
                $('#ar_3').show('fast');
                $('#ar_4').hide('fast');
            });

            $('#id_radio4').click(function () {
                $('#ar_1').hide('fast');
                $('#ar_2').hide('fast');
                $('#ar_3').hide('fast');
                $('#ar_4').show('fast');
            })

        });
    })(jQuery);

</script>

HTML:

    <form>
        <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1">Option1</input>
        <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Option2</input>
        <input id="id_radio3" type="radio" name="name_radio1" value="value_radio3">Option3</input>
        <input id="id_radio4" type="radio" name="name_radio1" value="value_radio4">Option4</input>
        <br>
        <div id="ar_1" style="display:none;">
            <p>info for option1</p>
        </div>
        <div id="ar_2" style="display:none;">
            <p>info for option2</p>
        </div>
        <div id="ar_3" style="display:none;">
            <p>info for option3</p>
        </div>
        <div id="ar_4" style="display:none;">
            <p>info for option4</p>
        </div>
    </form>