CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Prajith A S
Prajith A S

Reputation: 477

remove css class on change, irrespective of the value in the select field using javascript

In the below select filed populating values from mysqlDB. By default i am hiding the next two read only fields. I need to show the hided 2 fields when the value changes in the select field(irrespective of the value). I am not familiar with java script, i have tried with one script, but it is not working. Please support.

<select id ="name" name="name" class="form-control" required>
    <option value="" disabled selected>Choose Wallet</option>

    <?php
    //my query       
    echo '<option value="' . $row['group'] . '">' . $row['group'] . '</option>';//qry output to the select field

    ?>

</select>
<div  id ="hide" class="form-group hide">
    <div class="col-md-3 col-xs-12">
        <input id ="od" value="<?php echo $od ?>" class="form-control" readonly/>
        <input id="bal" value="<?php echo $bal ?>" class="form-control" readonly/>
    </div>
</div>
<script type="text/javascript">
$("#name").change(function () {
$("#hide").removeClass('hide');
});
</script>

Upvotes: 1

Views: 1163

Answers (4)

Rino Raj
Rino Raj

Reputation: 6264

Please try this

<select id ="name" name="name" class="form-control" required onChange="showTextBox()">

and add this function

function showTextBox(){
    $("#hide").removeClass('hide');
}

OR

$(document).ready(function(){
    $("#name").change(function () {
        $("#hide").removeClass('hide');
    });
})

;

Upvotes: 3

user3769661
user3769661

Reputation: 1

you can use $(".hide").show(); instead of $("#hide").removeClass('hide');

Upvotes: 0

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

.show() and .hide() method to hide and and show particular elements as per their name suggests

and you can use the " on " event so that it can work on even you dynamically add the options to the select tag by using jquery or javascript.

// or want to use by adding and removing class so you can use as below.
 
$(document).ready(function(){
    $("#name").on('change',(function () {
        $("#hide").removeClass('hide');
    });
});

Upvotes: 1

Ryan Nghiem
Ryan Nghiem

Reputation: 2438

You should code:

<script type="text/javascript">
$(function(){
    $("#name").change(function () {
      $("#hide").removeClass('hide');
    });
});
</script>

Upvotes: 0

Related Questions