CODEWITHSUNDEEP
javascripthtml
pkm
pkm

Reputation: 67

show/hide fields on radio button

I have 2 radio buttons on my form which are cash and cheque. When I clicked cash it should display amount field and when I clicked cheque it should display cheque no. and bank name.

In my code suppose if I first click cash it display amount field but then if I click cheque without refreshing page it display other fields along with amount. How to I hide that field without refreshing? Please help. Thank You.Sorry for grammar.

HTML code:

<div>
        <label id="label">Payment Mode:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="mode" value="Cash" id="cash" onClick="check()" >Cash
            <input type="radio" name="mode" value="Cheque" id="cheque" onClick="ccheque()">Cheque
        </div>
        
        
        <div id="amnt">
        </br><label id="label">Amount:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
            <input id="amount" name="amount" placeholder="--" type="text" />
        </div>
        
        
        <div id="cno">
        </br><label id="label">Cheque No:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="cn" id="cn" placeholder="--" type="text" />
    
        </br></br><label id="label">Bank Name:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="bn" id="bn" placeholder="--" type="text" />
        </div>

JavaScript:

function check() {
            if (document.getElementById('cash').checked) {
            document.getElementById('amnt').style.display = 'block';
            }
            else document.getElementById('amnt').style.display = 'none';
        }
        
        function ccheque() {
            if (document.getElementById('cheque').checked) {
            document.getElementById('cno').style.display = 'block';
            }
            else document.getElementById('bnm').style.display = 'none';     
        }

Upvotes: 1

Views: 1243

Answers (4)

funcoding
funcoding

Reputation: 791

Here an answer using toggle:

$(function(){
	$("input[name=mode]").on('click', function(){
   $("#cno").toggle($("#cheque").is(":checked"))
  })
})
#cno{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <label id="label">Payment Mode:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="mode" value="Cash" id="cash" checked  >Cash
            <input type="radio" name="mode" value="Cheque" id="cheque" >Cheque
        </div>


        <div id="amnt">
        </br><label id="label">Amount:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
            <input id="amount" name="amount" placeholder="--" type="text" />
        </div>


        <div id="cno">
        </br><label id="label">Cheque No:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="cn" id="cn" placeholder="--" type="text" />

        </br></br><label id="label">Bank Name:</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="bn" id="bn" placeholder="--" type="text" />
        </div>

Upvotes: 1

alessandrio
alessandrio

Reputation: 4370

function check(self) {
  var elem = self.getAttribute("data-table");
  var toelem = (elem=="cno"?"amnt":"cno");
  if (self.checked) {
    document.getElementById(elem).style.display = 'table';
    document.getElementById(toelem).style.display = 'none';
  }
}
.select{
  background: red;
}
.table{
  width: 100%;
  display: table;
  table-layout: fixed;
  background: orange;
}
.select label,
.select input{
  display: table-cell;
}
.select > div{
  display: none;
}
<div>
  <label id="label">Payment Mode:</label>
  <input type="radio" name="mode" value="Cash" id="cash" onClick="check(this)" data-table="amnt">Cash
  <input type="radio" name="mode" value="Cheque" id="cheque" onClick="check(this)" data-table="cno">Cheque
</div>
<div class="select">
<div id="amnt" class="table">
  <label id="label">Amount:</label>
  <input id="amount" name="amount" placeholder="--" type="text" />
</div>
<div id="cno" class="cno">
  <div class="table">
    <label id="label">Cheque No:</label>
    <input name="cn" id="cn" placeholder="--" type="text" />
  </div>
  <div class="table">
    <label id="label">Bank Name:</label>
    <input name="bn" id="bn" placeholder="--" type="text" />
  </div>
</div>
</div>

Upvotes: 1

Dalin Huang
Dalin Huang

Reputation: 11342

You can just handle those in one function, I added a function called paymentCheck to check if cash checked hide cno and show amnt field. Else just show cno and hide amnt.

Also by default hide them all (init).

Note: </br> is not valid, use <br> or <br/>

Ref:

Differences Between HTML and XHTML

In HTML, the <br> tag has no end tag.

In XHTML, the <br> tag must be properly closed, like this: <br />

document.getElementById('amnt').style.display = 'none';
document.getElementById('cno').style.display = 'none';

function paymentCheck() {
  if (document.getElementById('cash').checked) {
    document.getElementById('amnt').style.display = 'block';
    document.getElementById('cno').style.display = 'none'
  } else {
    document.getElementById('amnt').style.display = 'none';
    document.getElementById('cno').style.display = 'block';
  }
}
<div>
  <label id="label">Payment Mode:</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="radio" name="mode" value="Cash" id="cash" onClick="paymentCheck()">Cash
  <input type="radio" name="mode" value="Cheque" id="cheque" onClick="paymentCheck()">Cheque
</div>

<div id="amnt">
  <br>
  <label id="label">Amount:</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input id="amount" name="amount" placeholder="--" type="text" />
</div>


<div id="cno">
  <br>
  <label id="label">Cheque No:</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input name="cn" id="cn" placeholder="--" type="text" />

  <br>
  <br>
  <label id="label">Bank Name:</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input name="bn" id="bn" placeholder="--" type="text" />
</div>

Upvotes: 1

Ishwar Patil
Ishwar Patil

Reputation: 1736

Check this out:

    function check() {
                if (document.getElementById('cash').checked) {
                document.getElementById('amnt').style.display = 'block';
                document.getElementById('cno').style.display = 'none';
                }
                else {
                                document.getElementById('amnt').style.display = 'none';
                document.getElementById('cno').style.display = 'block';
                }
            }
    <div>
            <label id="label">Payment Mode:</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="mode" value="Cash" id="cash" onClick="check()" >Cash
                <input type="radio" name="mode" value="Cheque" id="cheque" onClick="check()">Cheque
            </div>


            <div id="amnt" style="display:none">
            </br><label id="label">Amount:</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
                <input id="amount" name="amount" placeholder="--" type="text" />
            </div>


            <div id="cno" style="display:none">
            </br><label id="label">Cheque No:</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="cn" id="cn" placeholder="--" type="text" />

            </br></br><label id="label">Bank Name:</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="bn" id="bn" placeholder="--" type="text" />
            </div>

Upvotes: 0

Related Questions