1

I have this html

<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Credit Card</label>

<input type="radio" id="radio2" name="radios"value="false">
<label for="radio2">Debit Card</label>

<input type="radio" id="radio3" name="radios"value="false">
<label for="radio3">Internet Banking</label>

<form id="frm1">
    <input type="text" placeholder="1"/>
</form>
<form id="frm2">
    <input type="text" placeholder="2"/>
</form>

which has 3 radio buttons and two forms.A css class

.hide
{
    display:none;
}

which can hide the form.

I know how to manually hide a form by just adding the class to form element.But I want to create a javascript which will hide any form on radio button selection.

I know this is a little bit of javascript,but Im new to javascript and css.Could someone get me a sytax on how to achieve this?I have made a fiddle as well

Please find it here

http://jsfiddle.net/cT3dF/

Idrizi.A
  • 9,819
  • 11
  • 47
  • 88
  • [How can I check whether a radio button is selected in javascript?](http://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-in-javascript) and [Is it valid to have a html form inside another html form?](http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form) – Givi Dec 08 '13 at 20:12

2 Answers2

1

The code I think you are looking for:

function hideForm(){
    //its good that ids start with a character a to z
    //add another line with form name if you need
    frm1.className="hide";
    frm2.className="hide";
}
function onClickHide(element){
    document.getElementById(element).onclick=function(){
        hideForm();
    }
}

//write here a line like this with the id of every checkbox 
//that onclick will hide the form's defined at hideForm()
onClickHide('radio1');
onClickHide('radio2');
onClickHide('radio3');

http://jsfiddle.net/jY6gY/1/

Tip: Never start your id with a number

Idrizi.A
  • 9,819
  • 11
  • 47
  • 88
0

Are you looking for this?

I added some javascript, specifically jQuery:

$("input[type=radio]").click(function(){$("form").hide();});

To add a class, you can use

$("input[type=radio]").click(function(){$("form").addClass("hide");});

Usually, you wouldn't necessarily want this behavior for all radio buttons on page, so you can give them a class of their own, or wrap them in another element and refer to them that way, i.e. put radios in a <div id="wrap">, then

$("#wrap input[type=radio]").click(function(){$("form").hide();});

UPDATE

You can use HTML5 attributes to specify which form to hide see fiddle

I put data-form="#1" to show that when clicking this button I want to hide <form id="1". The javascript is:

$($(this).data("form")).addClass("hide");

The fiddle has a bit more functionality

JNF
  • 3,696
  • 3
  • 31
  • 64