CODEWITHSUNDEEP
javascripthtml
user3462511
user3462511

Reputation:

how to show and hide divs based on radio button click?

I am trying to do show and hide div base on radio button click but it can not work perfect. I am currently using javascript function to control the content display.

This is javascript code :

function udatabase() {
    document.getElementById('ifCSV').style.display = "none";
}
function ucsv() {
    document.getElementById('ifCSV').style.display = "block";
}

This is my radio button:

<input type="radio" name="data" onclick="udatabase()" id="udatabase"> Database
  <input type="radio" name="data" onclick="ucsv()" id="ucsv"> CSV <br/>
  <div id="ifCSV" style="display:none">
    <input name="csv" type="file" id="csv" accept=".csv" required/> <br/>
</div>

After click on csv, there is no response in html page.

This is what html displayed

Upvotes: 3

Views: 19845

Answers (2)

JACKOB MAJANA
JACKOB MAJANA

Reputation: 1

<script type="text/javascript">
window.onload = function() {
     document.getElementById('ifTSH').style.display = 'none';
     document.getElementById('ifUSD').style.display = 'none';
}

function yesnoCheck() {
    var testA=document.getElementById('testAmount').value;
    var dola=document.getElementById('fxd').value;

    if (document.getElementById('s').checked) {
        if(testA>50000){
        document.getElementById('ifTSH').style.display = 'block';
        document.getElementById('ifUSD').style.display = 'none';
        document.getElementById("ifUSD1").removeAttribute("required");
    }
    else{
         document.getElementById('ifTSH').style.display = 'none';
         document.getElementById('ifUSD').style.display = 'none';
         document.getElementById("ifUSD1").removeAttribute("required");
    }
    } 
    if (document.getElementById('d').checked) {
        if((testA*dola)>50000){
        document.getElementById('ifTSH').style.display = 'none';
        document.getElementById('ifUSD').style.display = 'block';
        document.getElementById('ifUSD1').setAttribute("required", "true");
       } 
       else {
           document.getElementById('ifTSH').style.display = 'none';
           document.getElementById('ifUSD').style.display = 'none';
           document.getElementById("ifUSD1").removeAttribute("required");
       }
  }
}

Upvotes: 0

user3454436
user3454436

Reputation: 231

Your javascript onclick function name cannot same with your id name inside input text. You should change one of the name.

Your html code here:

  <input type="radio" name="data" onclick="udatabase()" id="udatabase"> Database
  <input type="radio" name="data" onclick="ucsv()" id="ucsv"> CSV <br/>

After edited

  <input type="radio" name="data" onclick="udatabase()" id="tdatabase"> Database
  <input type="radio" name="data" onclick="ucsv()" id="tcsv"> CSV <br/>

This should be work properly after you change the name.

Upvotes: 4

Related Questions