Question

How to use javascript and CSS for my rule ?

Forms

Updated April 16, 2014

asked on April 16, 2014

Hi everybody !

I created:
A radio button (#q1)
and 2 fields one below the other (#q2 for "Nom" and #q3 for "Prénom(s)").

For two fields, I created a "side by side" using CSS with:
#q2, #q3 {display: inline-block;}

When my "Personne physique" radio button is checked and the side by side is disable, #q2 and #q3 are show (picture 1)
When my "Personne morale" radio button is checked and the side by side is disable, #q2 and #q3 are hide (picture 2)

When my "Personne physique" radio button is checked and the side by side is enable, #q2 and #q3 are show (picture 3)
When my "Personne morale" radio button is checked and the side by side is enable, #q2 and #q3 are show but disabled (picture 4)

I know that we must act with javascript but I do not know how. Does anyone have some code to offer me?

Thank you in advance.
Regards,

Picture 1.jpg (6.96 KB)

| Download

Picture 2.jpg (3.29 KB)

| Download

Picture 3.jpg (6.73 KB)

| Download

Picture 4.jpg (6.77 KB)

| Download

Replies

replied on April 16, 2014

I'm not sure what your desired outcome is, but here's some JavaScript that may give you a start:

        //Hiding
        $("#q1").change(function () {
            if ($("#q1").prop("checked")) {
                $("#q2").hide();
                $("#q3").hide();
            }
            else {
                $("#q2").show();
                $("#q3").show();
            }
        });

        //Disabling
        $("#q1").change(function () {
            if ($("#q1").prop("checked")) {
                $("#q2").prop("disabled", true);
                $("#q3").prop("disabled", true);
            }
            else {
                $("#q2").prop("disabled", false);
                $("#q3").prop("disabled", false);
            }
        });

replied on April 16, 2014

Hi Devin Goble,

Thanks you for your help.

I try your first solution but without success

01	        //Hiding
02	        $("#q1").change(function () {
03	            if ($("#q1").prop("checked")) {
04	                $("#q2").hide();
05	                $("#q3").hide();
06	            }
07	            else {
08	                $("#q2").show();
09	                $("#q3").show();
10	            }
11	        });

I'm going to modify the code for try it.

Regard,

Olivier

replied on April 16, 2014

Ok, i changed all my code.

I deleted the javascript and i only used the CSS for do what i want at the beginning.

I just want to use side by side with the rule hide/show.

And all is good now.

Thanks for all.

Regards

You are not allowed to follow up in this post.