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

Question

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>

Rino Raj · Accepted Answer · 2015-07-10 00:28:15Z

3

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');
    });
})

;

edited Jul 10, 2015 at 0:28

answered Jul 9, 2015 at 4:30

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Himesh Aadeshara · Accepted Answer · 2015-07-09 04:57:41Z

1

.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');
    });
});

edited Jul 9, 2015 at 4:57

answered Jul 9, 2015 at 4:51

Himesh Aadeshara

2,2281 gold badge18 silver badges31 bronze badges

Comments

Ryan Nghiem · Accepted Answer · 2015-07-09 04:12:56Z

0

You should code:

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

answered Jul 9, 2015 at 4:12

Ryan Nghiem

2,4482 gold badges21 silver badges31 bronze badges

2 Comments

Prajith A S Over a year ago

sorry, its not working. I have applied the above provided script, still on changing the value in the select field, the next two fields are not displaying.

Prajith A S Over a year ago

Thanks to all for the help.

Dmitriy · Accepted Answer · 2015-07-09 05:37:52Z

0

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

edited Jul 9, 2015 at 5:37

Dmitriy

3,9093 gold badges31 silver badges41 bronze badges

answered Jul 9, 2015 at 4:41

user3769661

12 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related