CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Sandeep
Sandeep

Reputation: 145

I am trying to show/hide a div based on the selection made using a radio button in html

I am trying to show/hide a div based on the selection made using a radio button in HTML.

HTML Code:

<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cheque

<div id="chequeContainer" class = "chequeContainer" style="display:none;">

    <tr>
        <td>Bank Name:</td><td><input type = "text" name = "bank"></td>
        <td>Branch:</td><td><input type = "text" name = "branch"></td>
        <td>Cheque No:</td><td><input type = "text" name = "chequeno"></td>
    </div>

Javascript Code:

function displayForm(c) {

    alert(c.value);

    if (c.value == "cheque") {
        document.getElementById("chequeContainer").style.display = 'inline';
    }
    else if (c.value == "cash") {
        document.getElementById("chequeContainer").style.display = 'none';  
    }
    else {}
}

Upvotes: 2

Views: 93

Answers (6)

vishu
vishu

Reputation: 231

<input value="cash" type="radio" name="selector" onClick="displayForm(1)"></input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(2)"></input>Cheque

function displayForm(val) {
    if (val == "2" || val == 2) {
        document.getElementById("chequeContainer").style.display = 'inline';
    }
    else {
        document.getElementById("chequeContainer").style.display = 'none';
    }
}

Upvotes: 0

kalai
kalai

Reputation: 186

Tyr this

<input value="cheque" type="radio" name="selector" onClick="displayForm(this.value)"/>Cash
<input value="cash" type="radio" name="selector" onClick="displayForm(this.value)"/>Cheque

<div id="chequeContainer" class="chequeContainer" style="display:none;">

    <tr>
        <td>Bank Name:</td>
        <td><input type="text" name="bank"></td>
        <td>Branch:</td>
        <td><input type="text" name="branch"></td>
        <td>Cheque No:</td>
        <td><input type="text" name="chequeno"></td>
        </tr>
</div>

javascript:

function displayForm(val) {

            alert(val);

            if (val == "cheque") {
                document.getElementById("chequeContainer").style.display = 'inline';
            }
            else if (val == "cash") {
                document.getElementById("chequeContainer").style.display = 'none';
            }
            else { }
        }

Upvotes: 0

Insanity Geek
Insanity Geek

Reputation: 157

Two input tag with same value : 

<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cheque

Change the as following : 

<input value="cash" type="radio" name="selector" onClick="displayForm(this)"></input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cheque

IT SHOULD WORK FINE

Full Code : 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>


<input value="cash" type="radio" name="selector" onClick="displayForm(this)">
</input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)">
</input>Cheque
<div id="chequeContainer" class = "chequeContainer" style="display:none;">  
    <tr>  
        <td>Bank Name:  
        </td>  
        <td>  
            <input type = "text" name = "bank">  
            </td>  
            <td>Branch:  
            </td>  
            <td>  
                <input type = "text" name = "branch">  
                </td>  
                <td>Cheque No:  
                </td>  
                <td>  
                    <input type = "text" name = "chequeno">  
                    </td>  
                </div>

<script>

function displayForm(c) {
    if (c.value == "cheque") {
        document.getElementById("chequeContainer").style.display = 'inline';
    }
    else if (c.value == "cash") {
        document.getElementById("chequeContainer").style.display = 'none';  
    }
    else {}
}
</script>

</body>
</html>

Upvotes: 2

Gerard
Gerard

Reputation: 15786

You could even do this without using javascript.

#cheque:not(:checked)~#chequeContainer {
  display: none;
}
#cheque:checked~#chequeContainer {
  display: inline;
}
<input id="cash" value="cash" type="radio" name="selector">
<label for="cash">Cash</label>
<input id="cheque" value="cheque" type="radio" name="selector">
<label for="cheque">Cheque</label>

<div id="chequeContainer" class="chequeContainer">
  <tr>
    <td>Bank Name:</td>
    <td><input type="text" name="bank"></td>
    <td>Branch:</td>
    <td><input type="text" name="branch"></td>
    <td>Cheque No:</td>
    <td><input type="text" name="chequeno"></td>
  </tr>
</div>

Upvotes: 0

Akhil Singh
Akhil Singh

Reputation: 730

    $(document).ready(function () {

            $('input:radio[name="selector"]').change(function () {
              
                if ($(this).val() == 'cheque') {
                  
                    document.getElementById("chequeContainer").style.display = 'inline';
                }
                
                else if ($(this).val() == "cash") {
                    document.getElementById("chequeContainer").style.display = 'none';
                }
            });

        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <input type="radio" name="selector"  value="cheque" /> Cheque<br>
       <input value="cash" type="radio" name="selector" />Cash<br><br>
       
        <div id="chequeContainer" class="chequeContainer" style="display: none;">
        <table>
            <tr>
                <td>
                    Bank Name:
                </td>
                <td>
                    <input type="text" name="bank">
                </td>
                <td>
                    Branch:
                </td>
                <td>
                    <input type="text" name="branch">
                </td>
                <td>
                    Cheque No:
                </td>
                <td>
                    <input type="text" name="chequeno">
                </td>
                </tr>
                </table>
        </div>
    </div>

Upvotes: 0

Alexis
Alexis

Reputation: 842

Hi you made a typo mistake in the element value. Instead of providing different value to the input field, values, you gave value="cheque" for both radio buttons. I hope this will help you.

function displayForm(c) {
    if (c.value == 'cheque') {
        document.getElementById("chequeContainer").style.display = 'inline';
    }
    else {
        document.getElementById("chequeContainer").style.display = 'none';  
    }
}
<input value="cash" type="radio" name="selector" onClick="displayForm(this)"></input>Cash
<input value="cheque" type="radio" name="selector" onClick="displayForm(this)"></input>Cheque

<div id="chequeContainer" class = "chequeContainer" style="display:none;">

    <tr>
        <td>Bank Name:</td><td><input type = "text" name = "bank"></td>
        <td>Branch:</td><td><input type = "text" name = "branch"></td>
        <td>Cheque No:</td><td><input type = "text" name = "chequeno"></td>
    </div>

Upvotes: 2

Related Questions