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.

The form submitting is an ajax call ? If yes did you check this : http://stackoverflow.com/a/11543243/3727942 — Spoke44, Jan 07 '15 at 14:56
@Spoke44 Hi, I tried that solution but it didn't work either. — user3758251, Jan 07 '15 at 14:58
_Is_ it submitted using ajax? it just looks like a normal form submit to me which will reload the entire page, so of course any javascript run after the submit has started is going to be wiped out. If you want to centre the selected option when the page has reloaded, you will need to run your centering script on document ready not just change — Rhumborl, Jan 07 '15 at 14:59

BananaAcid · Answer 1 · 2015-01-07T15:11:47.323

I see 2 routes for you to go:

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

score 0 · Answer 2 · answered Jan 07 '15 at 15:10

0

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

answered Jan 07 '15 at 15:10

Rhumborl

15,251
4
32
42

Thank you but unfortunately it does not populate my second form. I think that centreSelected must be replaced somehow by `$('#primary_cat_select, #secondary_cat_select, #tertiary_cat_select')` The selection in the first form builds the contents of the 2nd form, etc... – user3758251 Jan 07 '15 at 15:16
Obviously the fiddle cannot show that, it's only javascript. I assumed your php code is already correctly populating the second list based on what they selected in the first list? – Rhumborl Jan 07 '15 at 15:17
It is already correctly population what I mean above is that it `centreSelected` must be replaced somehow by `#PrimaryCatForm, #SecondaryCatForm, #TertiaryCatForm` – user3758251 Jan 07 '15 at 15:19

score 0 · Answer 3 · answered Jan 07 '15 at 15:33

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
}

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

3 Answers3