javascript - onChange not working to show/hide a div

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

<select name="paytype" id="paytype" onchange="insProviderTable()">
            <option value="Cash">Cash</option>
            <option value="Credit" selected>Credit</option>
        </select>
<div id="insuranceDetails" style="">
and JavaScript code is 
function insProviderTable() {   
        if ($('#paytype').val() == 'Credit') {
            $('#insuranceDetails').show(1000);
        else {
            $('#insuranceDetails').hide(1000);
$(insProviderTable);
The issue is on page load the div insuranceDetails is appearing but if I change the value of paytype to Cash, nothing happens.
Please let me know where I am mistaken.
jsfiddle link https://jsfiddle.net/5bjfxdq4/
                @DhavalMarthak, @Rakesh_Kumar you both have removed the onLoad function $(insProviderTable); I want that also to run this function on page load.
– abbas
                Mar 3, 2015 at 13:41
$("#paytype").on("change",function(){
      if ($(this).val() == 'Credit') {
            $('#insuranceDetails').show(1000);
        else {
            $('#insuranceDetails').hide(1000);
}).change();
function insProviderTable() {
    if ($('#paytype').val() == 'Credit') {
        $('#insuranceDetails').show(1000);
    } else {
        $('#insuranceDetails').hide(1000);
$(document).ready(function(){
    $('#paytype').on('change', function () {
        insProviderTable();
    insProviderTable();      
Simply add this to the bottom of your existing script
$("#paytype").bind('change', function(){
$(insProviderTable);    
Add between main body and 
$(insProviderTable);
Hope this helps, let me know how you get on!
                What is the point to write $(insProviderTable); instead of insProviderTable(); inside event handler? And also: It's not an issue: there is outdated inline JS onchange="" in original code. Moreover, $("#paytype").bind might not work, if script is in <head>.
– Regent
                Mar 3, 2015 at 13:39
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.