0

i ran into a weird problem that i don't know where to start debugging

I have a Form in a php page with 2 select boxes. The first one is visible at all times, the other gets displayed and populated after the first one is changed.

  $(document).ready(function() {
  $("#year").on("change",function(){
    //Getting Value
    var selValue = $("#year :selected").val();

    $.ajax({
            url:'/allsites-monthly/'+selValue,
            type: "GET",
            dataType: "json",
            beforeSend: function(){
                $('#loader').css("visibility", "visible");
            },

            success:function(data) {

                $('#month').css("display", "inline");   

                $('select[name="month"]').empty().append('<option   value="0"> Chose month</option>');
                $.each(data, function(key, value){
                    $('select[name="month"]').append('<option value="'+   value + '">'+ value +'</option>');

                });  
                $('#submit').css("display", "inline");                  
            },
            complete: function() {                    
                $('#loader').css("visibility", "hidden");

            }

        });
   }); 
});

The code works, but after i submit the form and the page is refreshed nothing happens when i try to change the first select box. I have to manually refresh the page to get the on change event triggered. Nothing is displayed in the console. After form is submitted i would like to be able to select another year with out having to manually refresh the page. Any ideas where i went wrong? Thank you for your time!

Here is a sample of the html

<form id="period" class="form-inline" method="get" action="/allsites-monthly/">
                <div class="form-group" id="year">
                    <select name="year" class="form-control">
                        <option value="0">Chose year</option>
                        <option value="2018">2018</option>
                        <option value="2019">2019</option>                               
                    </select>
                </div><!-- /.form-group -->

                <div class="form-group" id="month">                   
                    <select name="month" class="form-control">
                        <option value="0">Chose month</option>

                    </select>
                </div><!-- /.form-group -->

                <button id="submit" type="submit" class="btn btn-primary btn-sm">Submit</button>                
            </form>

The code works the first time, the problem is when i wan't to change the year again i have to manually refresh the page

B Robert
  • 3
  • 4
  • How do you submit the form, with an ajax call? – Ass3mbler Jan 06 '19 at 23:42
  • 1
    It is imperative that you show us the html code as well. Judging how you are getting the value for the year select, #year is not a – Amjo Jan 07 '19 at 00:00
  • Read https://stackoverflow.com/a/42805055/1866538 for more information on how to track dom content change – Amjo Jan 07 '19 at 00:03
  • @Ass3mbler the form is submitted by a submit button. – B Robert Jan 07 '19 at 00:15
  • @Amjo you can see a sample of the html now – B Robert Jan 07 '19 at 00:15
  • @BRobert after submitting, you regenerate the same page ex-novo? – Ass3mbler Jan 07 '19 at 00:16
  • @Ass3mbler after submiting my page is loaded with some content, but the form will show only 1 select box – B Robert Jan 07 '19 at 00:18
  • There should be some other problem in the page interfering with the JS then. It's hard to judge without having the **whole** page and code, as @Amjo suggested – Ass3mbler Jan 07 '19 at 00:20
  • @Ass3mbler than you very much for your type, you gave me the idea that fixed the issue. On reload some of the js wasn't loading – B Robert Jan 07 '19 at 00:25
  • @BRobert you are welcome, glad you resolved the issue, have a nice day!! – Ass3mbler Jan 07 '19 at 00:26

0 Answers0