3 textfield depend on radio button using jquery-Twitter bootstrap

FxCrypto
October 16, 2018
252 views
0 votes
2 Answers

I want to create 3 textfield which depend on radio button. When user click specific value of radio button , textfield appear depend on user choose and viceverse.

$(document).ready(function() {
  $("input:radio[name='article']").change(function() {
    if (this.value == '1' && this.checked) {
      $("#nmb").show();
    }
    
    else if(this.value == '2' && this.checked) {
      $("#nbc").show();
    }

    else if(this.value == '3' && this.checked) {
      $("#crdb").show();
    } else {
      $("#crdb").hide();
      $("#nmb").hide();
      $("#nbc").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<input type="radio" name="article" value="1"> NMB Bank <input type="radio" name="article" value="2">NBC Bank <input type="radio" name="article" value="3"> CRDB Bank <br/><br/>

<div id="nmb">Account Number: <input type="text" name="number" maxlength="11"><br><br> </div>
<div id="nbc">Account Number: <input type="text" name="number" maxlength="13"><br><br> </div>
<div id="crdb">Account Number: <input type="text" name="number" maxlength="14"><br><br> </div>

Tags: javascript jquery

Answers

First you need to add a class to all div for example account_number:

<div id="nmb" class="account_number">Account Number: <input type="text" name="number" maxlength="11"><br><br> </div>
<div id="nbc" class="account_number">Account Number: <input type="text" name="number" maxlength="13"><br><br> </div>
<div id="crdb" class="account_number">Account Number: <input type="text" name="number" maxlength="14"><br><br> </div>

then you need to hide this divs :

.account_number{
  display: none;
}

and when a radio button is checked you hide all divs and show the corresponding textfield :

$("input:radio[name='article']").change(function() { 

    $(".account_number").hide();

    if(this.value == '1' && this.checked){
        $("#nmb").show();
    }
    else if(this.value == '2' && this.checked){
        $("#nbc").show();
    }
    else if(this.value == '3' && this.checked){
        $("#crdb").show();
    }
 });

https://jsfiddle.net/b8pdao6L/1/

Is this what you looking for?

$(document).ready(function() {
  $("input[name='article']").change(function() {
    $(".AccountHolder").hide();
    if ($(this).val() == 1) {
      $("#nmb").show();
    } else if (this.value == 2) {
      $("#nbc").show();
    } else if (this.value == 3) {
      $("#crdb").show();
    }
  });
});

Note there is no reason to use this.checked.

Demo

$(document).ready(function() {
  $("input[name='article']").change(function() {
    $(".AccountHolder").hide();
    if ($(this).val() == 1) {
      $("#nmb").show();
    } else if (this.value == 2) {
      $("#nbc").show();
    } else if (this.value == 3) {
      $("#crdb").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<input type="radio" name="article" value="1"> NMB Bank <input type="radio" name="article" value="2">NBC Bank <input type="radio" name="article" value="3"> CRDB Bank <br/><br/>

<div id="nmb" class="AccountHolder">Account Number: <input type="text" name="number" maxlength="11"><br><br> </div>
<div id="nbc" class="AccountHolder">Account Number: <input type="text" name="number" maxlength="13"><br><br> </div>
<div id="crdb" class="AccountHolder">Account Number: <input type="text" name="number" maxlength="14"><br><br> </div>

Please signup or login to give your own answer.

Click here to cancel reply.