Forum:

HTML Pages with CSS and JavaScript

Please help me regarding the forms selection

Greenhorn

Posts: 7

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello Guys,

I am just registered here.Thank you one and all for the support.

I have a html form which has many radio buttons and each radio button has some checkboxes.I have to display a particular form based on the radio button selection and checkboxes of that radio button. How can I do this? Can this be done using JavaScript.? Please help me

Thanks a lot!

Bear Bibeault

Sheriff

Posts: 67643

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Certainly JavaScript would be useful for this.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Ravi kumark

Greenhorn

Posts: 7

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thank you very much.Will start learning

Bear Bibeault

Sheriff

Posts: 67643

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Be sure to include CSS in your studies. It's easy to use CSS to hide and show elements on the page under JavaScript control.

[Asking smart questions] [About Bear] [Books by Bear]

Ravi kumark

Greenhorn

Posts: 7

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sure Bibeault .Thank you so much!

Bear Bibeault

Sheriff

Posts: 67643

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You're welcome.

A bit of etiquette: in Western cultures it is considered rude to call someone by just their last name. It would be proper to call me "Bear" informally, or "Mr. Bibeault" to be more formal. Here on the Ranch, the informal greeting is OK.

[Asking smart questions] [About Bear] [Books by Bear]

Ravi kumark

Greenhorn

Posts: 7

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

oh my god..I am really sorry Mr.Bibeault .I donot know that.Thank you very much for letting me know this.Please dont mind.

Bear Bibeault

Sheriff

Posts: 67643

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ravi kumark wrote:oh my god..I am really sorry Mr.Bibeault .I donot know that.Thank you very much for letting me know this.Please dont mind.

No problem. The Ranch is a learning site. We're all here to learn about things -- even if it's just about other cultures.

[Asking smart questions] [About Bear] [Books by Bear]

Ravi kumark

Greenhorn

Posts: 7

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

thank you!

Ravi kumark

Greenhorn

Posts: 7

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello bear,

Here is my code.I have 3 radio buttons.Whenever I clicked on one of them, remaining should hide or not visible.But I am not able to do that.
I am not understanding where I have done wrong.Please help me.

<body bgcolor="green">
	<center>
		<form action="CreditCardForm.jsp">
			<table width="100" height="500">
				<tbody>
					<tr>
						<td>Industry:</td>
					</tr>
					<tr>
						<td align="justify"><br>
							<div id="R">
								<input type="radio" name="group1" value="Retail"
									align="middle" onselect="display();">Retail<br>
								<pre>
	           <input type="checkbox" name="group1" value="cr"
										align="right">P <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">C <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">C <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">Retail <br>
           </pre>
							</div>
							<div id="F">
								<input type="radio" name="group1" value="restaurant"
									align="middle" onclick="display();">Restaurant<br>
								<pre>
	           <input type="checkbox" name="group1" value="cr"
										align="right">Retail <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">Retail <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">Retail <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">Retail <br>
           </pre>
							</div>
							<div id="D">
								<input type="radio" name="group1" value="crr" align="middle"
									onclick="display();">DMarketing<br>
								<pre>
	           <input type="checkbox" name="group1" value="cr"
										align="right">C <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">R <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">I <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">B <br>
           </pre>
							</div>
							<div id="E">
								<input type="radio" name="group1" value="cr" align="middle"
									onclick="display();">Ecommerce<br>
								<pre>
	           <input type="checkbox" name="group1" value="cr"
										align="right">C <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">R <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">I <br>
	           <input type="checkbox" name="group1" value="cr"
										align="right">B <br>
           </pre>
							</div></td>

</tr>
				</tbody>
			</table>
			<input type="submit">
		</form>
	</center>
</body>
</html>

Bear Bibeault

Sheriff

Posts: 67643

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

First of all, forget the visibility property. All you need to do is to switch the display property between none and block. Refactor the code to do that and then we can look at it again.

[Asking smart questions] [About Bear] [Books by Bear]

Ravi kumark

Greenhorn

Posts: 7

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Bear ,

Sorry for the bad indentation.I have tried by doing those changes.But still I am not able to get what I wanted .

<html>  
<script type="text/javascript" language=javascript>  
    function display() {  
        if (document.getElementById('R').checked == true) {  
            document.getElementById('F').style.display = "none";   
            document.getElementById('D').style.display = "none";  
            document.getElementById('E').style.display = "none";  
        } else if (document.getElementById('F').checked == true) {  
            document.getElementById('R').style.display = "none";  
            document.getElementById('E').style.display = "none";  
            document.getElementById('D').style.display = "none";  
        } else if (document.getElementById('E').checked == true) {  
            document.getElementById('F').style.display = "none";  
            document.getElementById('R').style.display = "none";  
            document.getElementById('D').style.display = "none";  
        } else if (document.getElementById('D').checked == true) {  
            document.getElementById('F').style.display = "none";  
            document.getElementById('R').style.display = "none";  
            document.getElementById('E').style.display = "none";  
        }  
    }  
</script>  
  
<body bgcolor="green">  
    <center>  
        <form action="CreditCardForm.jsp">  
            <table width="100" height="500">  
                <tbody>  
                    <tr>  
                        <td>Industry:</td>  
                    </tr>  
                    <tr>  
                        <td align="justify"><br>  
                            <div id="R">  
                                <input type="radio" name="group1" value="Retail"  
                                    align="middle" onselect="display();">Retail<br>  
                                <pre>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">P <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">C <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">C <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">Retail <br>  
           </pre>  
                            </div>  
                            <div id="F">  
                                <input type="radio" name="group1" value="restaurant"  
                                    align="middle" onclick="display();">Restaurant<br>  
                                <pre>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">Retail <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">Retail <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">Retail <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">Retail <br>  
           </pre>  
                            </div>  
                            <div id="D">  
                                <input type="radio" name="group1" value="crr" align="middle"  
                                    onclick="display();">DMarketing<br>  
                                <pre>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">C <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">R <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">I <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">B <br>  
           </pre>  
                            </div>  
                            <div id="E">  
                                <input type="radio" name="group1" value="cr" align="middle"  
                                    onclick="display();">Ecommerce<br>  
                                <pre>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">C <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">R <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">I <br>  
               <input type="checkbox" name="group1" value="cr"  
                                        align="right">B <br>  
           </pre>  
                            </div></td>  
  
                    </tr>  
                </tbody>  
            </table>  
            <input type="submit">  
        </form>  
    </center>  
</body>  
</html>

Bear Bibeault

Sheriff

Posts: 67643

173

I like...

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

What have you done to debug the problem? Just looking at the code and scratching your head isn't going to help.

Have you even determined if the event handlers are firing? (Hint: they're likely not)

[Asking smart questions] [About Bear] [Books by Bear]