Delay submit, perform action and then submit

Question

I am currently working on a project in Umbraco that requires a multi-stage booking process.

During this process I have multiple models that act as each stage of the booking process. These all form part of an overall parent model which is used to drive the whole process.

When the first stage is submitted, the information on the page is passed to the controller, validated and processed. Once this has been done the user is directed back to the page and the second stage of the process is displayed.

I know this probably sounds a bit mental but trust me it is the way that you have to do in Umbraco with its custom routing.

The problem I have with this is my booking process is in the middle of the page and when the page reloads it scrolls to the top.

My idea was to capture the current scroll position of the page using Javascript and pass it into my model on form submit however to do this I would need to trigger the capture and injection of this data into my form when the user clicks the submit button.

Is there therefore a way in which I can disable the default behaviour of a button:

  e.preventDefault()

Perform some logic:

  var top = $('html').offset().top;

Then re-initialise the default behaviour of the submit button so that it submits after performing this logic.

  $(this).unbind('submit').submit();

I have tried the following but it just seems to submit the form as if nothing is happening.

    $(document).ready(function(){
        $('#BKG_Next').on("click",function(e){
            e.preventDefault();
            var top = $('html').offset().top;
            alert(top);
            $(this).unbind('submit').submit();
        })
    })

Any help would be greatly appreciated.

Answer 1

After some digging and further exploring I came up with the following:

var sleep = false;
        $('#BKG_Next').on("click",function(e){
            if(!sleep){
                e.preventDefault();
                var top = $(window).scrollTop();
                var $element = $(this);
                $('#position').value(top);
                setTimeout(function(){
                    slept = true;
                    $element.click();
                }, 100);
            }else{
                slept = false;
            }
        })