Member Avatar for gagan22

Hello everyone,

I want to use two radio button on a html page (buy.html) . I want that when we click on first radio button then it will show one form which have two or three text box on that page (buy.html) . When we click on second radio button then it will show another form in also buy.html page.

This form will show on that page (buy.html) which have these two radio button because i want to show these form below of radio buttons .

So how i can do this ,i dont know ...Please help me it is very urgent.

regards,
Gagan kumar

  • 3 Contributors
  • 4 Replies
  • 137 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mschroeder
Member Avatar for Luckychap

You just need javascript to do this job. Ajax is used to send asynchronous request to the server and get back response. As far as DOM manipulation is concerned only javascript is needed.

THis code will help you:

<html>
	<head>
		<title>test</title>
		<script type="text/javascript">
			
			function showForm() {
				var radio1 = document.getElementById('radio1');
				var radio2 = document.getElementById('radio2');
				
				if(radio1.checked == true) {
					hideForm2();
					showForm1();
					alert('1');
				} else {
					hideForm1();
					showForm2();
					alert('2');
				}
			}
			
			function showForm1() {
				var divForm = document.getElementById('divform1');
				divForm.style.visibility = "visible";
			}
			
			function hideForm1() {
				var divForm = document.getElementById('divform1');
				divForm.style.visibility = "hidden";
			}
			
			function showForm2() {
				var divForm = document.getElementById('divform2');
				divForm.style.visibility = "visible";
			}
			
			function hideForm2() {
				var divForm = document.getElementById('divform2');
				divForm.style.visibility = "hidden";
			}
		</script>
		
		<style>
			#formContainer {
				position: relative;
				top: 100px;
			}
			
			#divform1 {
				position: absolute;
				top: 0px;
				left: 0px;
				visibility: hidden;
			}
			
			#divform2 {
				position: absolute;
				top: 0px;
				left: 0px;
				visibility: hidden;
			}
			
		</style>		
	</head>
	
	<body >
		<form id='myform'>
			<input type='radio' id='radio1' name='formSel' value='1' onClick="showForm();">Form-1</input>
			<input type='radio' id='radio2' name='formSel' value='2' onClick="showForm();">Form-2</input>
		</form>
		
		<div id="formContainer" style="border: 1px solid #000;">
			<div id="divform1">
				<form id="form1">
					<h1>Form1</h1>
				</form>
			</div>
			
			<div id="divform2">
				<form id="form2">
					<h1>Form2</h1>
				</form>
			</div>
		</div>
	</body>
</html>
Member Avatar for gagan22

Thanx for giving solution for that,


But i want to initially when we will not click any radio button means by default it will not show any form . so how it i can do pls tell me.

Member Avatar for Luckychap 
<body onload="showForm();">

Simple

Member Avatar for mschroeder

how about using some jQuery to simplify the code even further.

<html>
<head>
<title>test</title>
<!-- Let GOOGLE serve the ajax library via their CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//Run the hideall() function to hide all divs that have an id of divform
        //and are children of the node with id formContainer
	hideall();

	//Listen for a click event on ANY input with an id of formRadio
	$("input[id='formRadio']").click(function () { 
		//capture the value of the radio the click occurred on
		var value = $(this).val();
		
		//Run the hideall function again to make sure everything is collapsed
		hideall();
		
		//toogle the visibility of the div the click occurred on by its index value
		//index values start at 0 and increment by 1
		//first divform has index of 0 second has index of 1 etc etc
		$("div[id='divform']:eq(" + value + ")").toggle();  
	});	
	
	function hideall()
	{
		$("#formContainer > div[id='divform']").hide();
	}
});
</script>
<style>
#formContainer {
	position: relative;
	top: 100px;
}
</style>
</head>
<body >
<form id='myform'>
  <input type='radio' id='formRadio' name='formSel' value='0'>
  Form-1
  </input>
  <input type='radio' id='formRadio' name='formSel' value='1'>
  Form-2
  </input>
</form>
<div id="formContainer" style="border: 1px solid #000;">
  <div id="divform">
    <form id="form1">
      <h1>Form1</h1>
    </form>
  </div>
  <div id="divform">
    <form id="form2">
      <h1>Form2</h1>
    </form>
  </div>
</div>
</body>
</html>

In this example you can now add an infinite amount of forms and as long as a radio button exists they will all expand and contract on click without having to write any additional javascript.

There are some minor changes to the form as provided above.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.