Restart or reverse code in jQuery

Question

I have this code here:

Before reading, most of the code isn't relevant to the question but it might make it easier to understand what I'm trying to do, if it's possible or not.

    $(document).ready(function(){

        AnimateRotate(360, "#box", 0)
        $("#box").animate({   

            top: ((sheight/2)-282)+"px",
            left: ((swidth/2)-307)+"px",
            width: "350px",
            height: "200px"



        }, 2000, function(){

                $('<div>', { id: 'details' }).appendTo('#box').fadeIn(1500)

                $('<input />',{ "class" : "name" }).appendTo("#box").fadeIn(1500)
                $('.name').val($('.name').val() + 'Enter Name here');

                $('<input />',{ "class" : "numb" }).appendTo("#box").fadeIn(1500)
                $('.numb').val($('.numb').val() + 'Enter Age here');

                $('<input type="button" value="Submit">').fadeIn(1500).appendTo(this)   
            .click(function(){ 

                $(this).remove();

                num = $("#box").find(".numb").val();
                nam = $("#box").find(".name").val();

                $("#box").find(".numb").remove();
                $("#box").find(".name").remove();
                $("#details").remove();

                AnimateRotate(-360, "#box", 0)

                $("#box").animate({  

                    top: "150px",
                    left: "100px",
                    width:"0px",
                    height: "0px",
                    padding:"0px"


                    }, 2000, function(){


                        //AnimateRotate(360, "#box", 2000)

                        if (num>0 && num<110 && /^\D+$/.test(nam)) {



                            $("#box").delay(2000).animate({  

                                top: "0px",
                                left: "0px",
                                width: (swidth-100)+"px",
                                height: (sheight-100)+"px",
                                padding: "20px",
                                margin: "20px"



                            }, 2000, function(){


                                $("#box").append('<span class="title">BizAppliance</span>')
                                $('<div>', { id: 'info' }).appendTo('#box')
                                $("#info").append('<span class="num">' + nam + '</span>')
                                $("#info").append('<span class="num"> is </span>')
                                $("#info").append('<span class="num">' + num + '</span>')
                                $("#info").append('<span class="num"> years old</span>')



                            });

                        }else{

                            //GO BACK TO WHERE IT SAYS DOCUMENT.READY()

                        }


                    });


            });
        });


    });

At the bottom of my code you will see an else statement where I would like the code to restart if the input is incorrect. Is there any way of telling javascript to go back to where it says 'document.ready()'?

Thanks for any anhswers.

Answer 1

You can use a small extension to implement goto

// <label-name>
start: alert("aaa");
alert("bbb");
goto start;

Check this out if you want to have goto in your program: http://summerofgoto.com/

Answer 2

I just took out the handler as a separate function, it would work.

Use this code -

$(document).ready(run);

function run() {
    AnimateRotate(360, "#box", 0)
    $("#box")
            .animate(
                    {

                        top : ((sheight / 2) - 282) + "px",
                        left : ((swidth / 2) - 307) + "px",
                        width : "350px",
                        height : "200px"

                    },
                    2000,
                    function() {

                        $('<div>', {
                            id : 'details'
                        }).appendTo('#box').fadeIn(1500)

                        $('<input />', {
                            "class" : "name"
                        }).appendTo("#box").fadeIn(1500)
                        $('.name').val($('.name').val() + 'Enter Name here');

                        $('<input />', {
                            "class" : "numb"
                        }).appendTo("#box").fadeIn(1500)
                        $('.numb').val($('.numb').val() + 'Enter Age here');

                        $('<input type="button" value="Submit">')
                                .fadeIn(1500)
                                .appendTo(this)
                                .click(
                                        function() {

                                            $(this).remove();

                                            num = $("#box").find(".numb").val();
                                            nam = $("#box").find(".name").val();

                                            $("#box").find(".numb").remove();
                                            $("#box").find(".name").remove();
                                            $("#details").remove();

                                            AnimateRotate(-360, "#box", 0)

                                            $("#box")
                                                    .animate(
                                                            {

                                                                top : "150px",
                                                                left : "100px",
                                                                width : "0px",
                                                                height : "0px",
                                                                padding : "0px"

                                                            },
                                                            2000,
                                                            function() {

                                                                // AnimateRotate(360,
                                                                // "#box",
                                                                // 2000)

                                                                if (num > 0
                                                                        && num < 110
                                                                        && /^\D+$/
                                                                                .test(nam)) {

                                                                    $("#box")
                                                                            .delay(
                                                                                    2000)
                                                                            .animate(
                                                                                    {

                                                                                        top : "0px",
                                                                                        left : "0px",
                                                                                        width : (swidth - 100)
                                                                                                + "px",
                                                                                        height : (sheight - 100)
                                                                                                + "px",
                                                                                        padding : "20px",
                                                                                        margin : "20px"

                                                                                    },
                                                                                    2000,
                                                                                    function() {

                                                                                        $(
                                                                                                "#box")
                                                                                                .append(
                                                                                                        '<span class="title">BizAppliance</span>')
                                                                                        $(
                                                                                                '<div>',
                                                                                                {
                                                                                                    id : 'info'
                                                                                                })
                                                                                                .appendTo(
                                                                                                        '#box')
                                                                                        $(
                                                                                                "#info")
                                                                                                .append(
                                                                                                        '<span class="num">'
                                                                                                                + nam
                                                                                                                + '</span>')
                                                                                        $(
                                                                                                "#info")
                                                                                                .append(
                                                                                                        '<span class="num"> is </span>')
                                                                                        $(
                                                                                                "#info")
                                                                                                .append(
                                                                                                        '<span class="num">'
                                                                                                                + num
                                                                                                                + '</span>')
                                                                                        $(
                                                                                                "#info")
                                                                                                .append(
                                                                                                        '<span class="num"> years old</span>')

                                                                                    });

                                                                } else {
                                                                    run();
                                                                }
                                                            });
                                        });
                    });

}