jQuery load a function after a form has been submitted once only

Question

I have 3 lists in HTML format in the same page. When ever an option is selected it is submitted and based on the selection in the first list, the second list is populated, then according to the selection of the second list the third list is populated.

Each time a choice is made the form is submitted. This is done using the following code which pertains to the HTML form:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" >
//Auto submit form
   $(document).ready(function() {
      $('#PrimaryCatForm, #SecondaryCatForm, #TertiaryCatForm').on('change', function() {
        $(this).submit();
      });
    });
</script>

Everytime a selection is made I have another jquery to centralise the selection similar to this - http://jsfiddle.net/BA39h/1/

I use the followin jQuery

<script type="text/javascript" >
$(document).ready(function() {
$('#primary_cat_select, #secondary_cat_select, #tertiary_cat_select').on('change', function(){
    var n = this.getAttribute('size'),
        i = this.selectedIndex,
        l = this.options.length;
    this.selectedIndex = Math.min(l-1,i+n/2|0);
    this.selectedIndex = Math.max(0,i+1-n/2|0);
    this.selectedIndex = i;
})
    });
</script>

When a selection is made, the selection is submitted. Unfortunately a few miliseconds after the selection is centred, the form is submitted and the selection looses it centralisation. I tried many methods to solve it but I didn't seem to manage.

The html options are populated using PHP and PDO.

Answer 1

I see 2 routes for you to go:

1. either submit the form (reloads the page), set the selected attribute in HTML on the item and trigger the center script again (what you would need to do on page load anyways)
2. or use jQuery's $.post() with $().serialize() on submit, to just save the result (sending it to a php script) and leave the selection intact (no page reload)

I would prefer the second option for submitting and the first needed if you show the page .

$(document).ready(function() {
  $('#PrimaryCatForm, #SecondaryCatForm, #TertiaryCatForm').on('change', function() {
    $.post(document.location.href, $(this).serialize()).success(function() {
       alert('saved');
    });
  });
});

Answer 2

You need to call the centre function on both element change and on page load :

$(document).ready(function () {

    // put it into a reusable function
    function centreSelected(el) {
        var n = this.getAttribute('size'),
            i = this.selectedIndex,
            l = this.options.length;
        this.selectedIndex = Math.min(l - 1, i + n / 2 | 0);
        this.selectedIndex = Math.max(0, i + 1 - n / 2 | 0);
        this.selectedIndex = i;
    }

    $('#primary_cat_select, #secondary_cat_select, #tertiary_cat_select')
        // bind the change event
        .on('change', centreSelected)
        // apply it to the element now
        .each(function () {
            centreSelected.apply(this);
        });

});

Updated fiddle

Answer 3

This jQuery fiddle will show you how: JS FIDDLE

Once document is ready it will select the first value of the list which is 1 in my example and automatically it will show the second list.

The 'getTheValueIntoPHPfile', use it to fetch data returned by your PHP file and you can use the .html() to populate the select html tags.

Once you re-select the first list it will hide the third list if it's visible and will automatically call the function 'getTheValueIntoPHPfile' to fetch the data and re-populate your second list.

$(document).ready(function(){    
    $('select.select').on('change', function(){
        var self = $(this),
            value = self.val(), // selected value
            dataType = self.data('type'); // Select type (1st, 2nd and 3rd)

        // Hide select third if change the first
        if (dataType == 1 && !$('.second').hasClass('hide') && !$('.third').hasClass('hide'))
        {
            $('.third').addClass('hide');
        // Show second select if hidden
        } else if (dataType == 1 && $('.second').hasClass('hide')) {
            $('.second').removeClass('hide');
        // Show third select if hidden
        } else if(dataType == 2 && $('.third').hasClass('hide')) {
            $('.third').removeClass('hide');
        }

        // function to call to get the values from php
        var valueText = getTheValueIntoPHPfile(value, dataType);
        $('p.result').html(valueText);
    })

    // On page load automatic select the first option value of the first select
    var f = $('select.first option:first-child');
    f.val(f.val()).trigger('change');
});

function getTheValueIntoPHPfile(value, dataType)
{
    return 'Value: ' + value + 
            '<br/>Select Type: ' + dataType;

    // Put your jquery request to PHP here and return the values to the next select
}