0

I am very new to jquery and ajax. What I am trying to do is have cascading select fields in a form. The first dependent select field that uses an ajax call works properly however the second one does nothing. Can anyone explain why that would be? I assume it has to do with a lack of basic understanding and apologize for the ignorance.

Thanks Erin

<script type='text/javascript'>
  jQuery(document).ready(function(){                
    // when any option from country list is selected

    jQuery("select[name='market']").change(function(){    

        // path of ajax-loader gif image
        var ajaxLoader = "<img src='ajax-loader.gif' alt='loading...' />";

        // get the selected option value of country
        var optionValue = jQuery("select[name='market']").val();        

        jQuery("#dateAjax")
            .html(ajaxLoader)
            .load('data.php', "market="+optionValue+"&status=1", function(response){
                if(response) {
                    jQuery("#dateAjax").css('display', '');
                } else {
                    jQuery("#dateAjax").css('display', 'none');
                }
        });            
    });
    jQuery("select[name='marketdate']").change(function(){    

        // path of ajax-loader gif image
        var ajaxLoader = "<img src='ajax-loader.gif' alt='loading...' />";

        // get the selected option value of country
        var optionValue = jQuery("select[name='marketdate']").val();        

        jQuery("#timeAjax")
            .html(ajaxLoader)
            .load('datedata.php', "marketdate="+optionValue+"&status=1", function(response){
                if(response) {
                    jQuery("#timeAjax").css('display', '');
                } else {
                    jQuery("#timeAjax").css('display', 'none');
                }
            });            
        });

        jQuery(document.body).on('change','#marketdate',function(){
            // path of ajax-loader gif image
            var ajaxLoader = "<img src='ajax-loader.gif' alt='loading...' />";

            // get the selected option value of country
            var optionValue = jQuery("select[name='marketdate']").val();        

            jQuery("#timeAjax")
                .html(ajaxLoader)
                .load('datedata.php', "marketdate="+optionValue+"&status=1", function(response){
                    if(response) {
                        jQuery("#timeAjax").css('display', '');
                    } else {
                        jQuery("#timeAjax").css('display', 'none');
                    }
                });
        });
  });
</script>
ErinR
  • 1
  • Can you make a reproducible jsfiddle? It may be easier to debug it in action. Are there any console errors? – Sterling Archer Sep 21 '16 at 23:13
  • Are you creating the select menus dynamically? Then see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar Sep 21 '16 at 23:26

0 Answers0