CODEWITHSUNDEEP
javascriptjqueryhtml
Vamsi
Vamsi

Reputation: 13

Input Field change by changing Dropdown

I trying to change the form input field by changing the dropdown value.. Right now I found the solution for only one dropdown select.. i.e., if I select one dropdown value, some requested input value is getting.. but not understand how to get different input values for each dropdown value.. Here I have given the code what I am using.. 

  <script type="text/javascript">
    $(function () {
        $("#ddlPassport").change(function () {
            if ($(this).val() == "airtel") {
                $("#airtel").show();
            } else {
                $("#airtel").hide();
            } 
        });
    });

    $(function () {
        $("#ddlPassport").change(function () {  
            if ($(this).val() == "dishtv") {
                $("#dishtv").show();
            } else {
                $("#dishtv").hide();
            } 

        });
    });
</script>
<select id="ddlPassport">
    <option title="Airtel DTH" value="airtel" id="">Airtel DTH</option>
    <option title="Reliance" value="reliance" id="">Big TV/Reliance Digital TV</option>
    <option title="SUNTV" value="suntv">SUN TV</option>
    <option title="Videocon" value="videocon">Videocon D2H</option>
    <option title="DISHTV" value="dishtv">DISH TV</option>
    <option title="Tata Sky" value="tatasky">TATA SKY</option>

</select>         
<div class="form-group form-group-icon-left" id="airtel" style="display:none;">
         <i class="fa fa-pencil input-icon input-icon-highlight"></i>
             <label for="txtMobileNo"><span id="">Customer ID :</span></label>
                <input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Customer ID">
     </div>
     <div class="form-group form-group-icon-left" id="dishtv" style="display:none;">
         <i class="fa fa-pencil input-icon input-icon-highlight"></i>
             <label for="txtMobileNo"><span id="">Mobile No. or Card No. :</span></label>
                <input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Mobile No. or Card No.">
     </div>
     <div class="form-group form-group-icon-left" id="reliance-sun" style="display:none;">
         <i class="fa fa-pencil input-icon input-icon-highlight"></i>
              <label for="txtMobileNo"><span id="">Smart Card No :</span></label>
                <input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Smart Card No.">
     </div>

Upvotes: 1

Views: 714

Answers (2)

Sanjiv Jha
Sanjiv Jha

Reputation: 1

Try this

$(document).ready(function() {

$(".form-group").hide(); // Hide all form divs on page load

$("#ddlPassport").change(function () {

    var DTHname = $(this).val();

    $("#" + DTHname).show(500);

});
});

Upvotes: 0

Hunter
Hunter

Reputation: 410

Looking at your code, I noticed a couple of problems.

Problem 1

$("#ddlPassport").change()

Your select tag doesn't have the id dllPassport, it is empty.

Problem 2 You have multiple HTML ID's on the page.

From XHTML 1.0 Spec

In XML, fragment identifiers are of type ID, and there can only be a single attribute of type ID per element. Therefore, in XHTML 1.0 the id attribute is defined to be of type ID. In order to ensure that XHTML 1.0 documents are well-structured XML documents, XHTML 1.0 documents MUST use the id attribute when defining fragment identifiers on the elements listed above. See the HTML Compatibility Guidelines for information on ensuring such anchors are backward compatible when serving XHTML documents as media type text/html.

You are trying to show / hide the element with the id dishtv which applies to both

<option title="Reliance" value="reliance" id="dishtv">

and 

<div class="form-group form-group-icon-left" id="dishtv" style="display:none;">

Problem 3 After addressing Problem 1 and Problem 2, your div will show with the ID of dishtv, however this div is nested inside a parent div with also has display:none so you will need to call .show() on this div also: #airtel

Edit

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript">
    $(function () {
        $("#ddlPassport").change(function () {
            // Airtel
            if ($(this).val() == "airtel") {
                $("#airtel").show();
            } else {
                $("#airtel").hide();
            }
            
            //DishTV
            if ($(this).val() == "dishtv") {
                $("#dishtv").show();
            } else {
                $("#dishtv").hide();
            } 
        });
    });

</script>
<select id="ddlPassport">
    <option title="Airtel DTH" value="airtel" id="">Airtel DTH</option>
    <option title="Reliance" value="reliance" id="">Big TV/Reliance Digital TV</option>
    <option title="SUNTV" value="suntv">SUN TV</option>
    <option title="Videocon" value="videocon">Videocon D2H</option>
    <option title="DISHTV" value="dishtv">DISH TV</option>
    <option title="Tata Sky" value="tatasky">TATA SKY</option>

</select>         
<div class="form-group form-group-icon-left" id="airtel" style="display:none;">
         <i class="fa fa-pencil input-icon input-icon-highlight"></i>
             <label for="txtMobileNo"><span id="">Customer ID :</span></label>
                <input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Customer ID">
     </div>
     <div class="form-group form-group-icon-left" id="dishtv" style="display:none;">
         <i class="fa fa-pencil input-icon input-icon-highlight"></i>
             <label for="txtMobileNo"><span id="">Mobile No. or Card No. :</span></label>
                <input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Mobile No. or Card No.">
     </div>
     <div class="form-group form-group-icon-left" id="reliance-sun" style="display:none;">
         <i class="fa fa-pencil input-icon input-icon-highlight"></i>
              <label for="txtMobileNo"><span id="">Smart Card No :</span></label>
                <input type="text" class="form-control" name="txtMobileNo" id="" placeholder="Smart Card No.">
     </div>

Upvotes: 1

Related Questions