Question

I am currently using js function to submit data without page refresh or button click. The input field is inside tab #2 that executes the js once the user stops typing. The problem is that the js is making the page refresh thus taking me back to tab#1. How can I prevent the page from refreshing? I thought i had included the necessary code in the JS function to stop this. EXAMPLE

<script>
$(document).ready(function() {
    var timer;
        $('#video-input1').on('keyup', function() {
            var value = this.value;

            clearTimeout(timer);

            timer = setTimeout(function() {

                //do your submit here
                $("#ytVideo").submit()


                //alert('submitted:' + value);
            }, 2000);
        });

    //submit definition once submit is executed
    $('#ytVideo').submit(function(e){
        e.preventDefault(); //prevent page refresh
        var form = $('#ytVideo').serialize();

        //submit.php is the page where you submit your form
        $.post('index.php#tab-2', form, function(data){ 
            var x = $(data);
            $("body").html(x);
        });
        return false;
    });
    return false;                                                         

});
</script>

Answer 1

try changing this line

//do your submit here
$("#ytVideo").submit()

to

$("#ytVideo").trigger("submit");

i believe the problem is that you define what submit should do after the form has been submitted this causes the page to reload.
Edited
try this change

$('#ytVideo').submit(function(event){
        event.preventDefault(); //prevent page refresh
        event.stopPropagation(); //+
        var form = $('#ytVideo').serialize();

        //submit.php is the page where you submit your form
        $.post('index.php#tab-2', form, function(data){ 
            var x = $(data);
            $("body").html(x);
        });
        //- return false;
    });
    //- return false;  

made some changes