How to redirect a page after validation is done?

Question

I have a login form and I am validating this form using jQuery/Ajax and get json response.

This form is calling a php page called add-data.php

So when all validation is done then I want to redirect to another page. After Successfully logged! text :

if($msg['error'] === false) {           
    $msg[] = '<b>Successfully logged!.</b>';             
} 

I used

setTimeout(function() {
    window.location = <?php echo "\"{$site_url}\""; ?>                         
}, 1000);

but it's not redirecting !

Full redirecting code (Not Working):

if($msg['error'] === false) {           
     $msg[] = '<b>Successfully logged!.</b>';            
     ?>
     <script type="text/javascript">
     setTimeout(function() {
              window.location = <?php echo "\"{$site_url}\""; ?>                         
          }, 1000); 
    </script>
    <?php
}

Update :

$("#add_data").submit(function(e) {        
    e.preventDefault();
    var button_name = $("#button_name").val();
    var formData = new FormData(this);
    $.ajax({
        url : url+'add-data',
        data : formData,
        dataType : 'json',
        type : 'POST',
        cache:false,
        contentType: false,
        processData: false,
        beforeSend : function () {
            $("#submit_button").val("Loading...");
            $("#submit_button").prop('disabled', true);
            $('#form_result').show();
        },
        success : function ( result ) {
            $("#submit_button").val(button_name);
            $('#form_result').html('');                    
            $("#submit_button").prop('disabled', false);
            $.each( result, function( key, value ) { 
                if( key !== 'error' && result.error == true  ) {
                    $('#form_result').append('<div class="alert alert-danger">'+value+'</alert>');
                } else if ( key !== 'error' && result.error == false ) {
                    $('#form_result').append('<div class="alert alert-success">'+value+'</p>');
                    $('#form_result').delay(3000).hide('slow');   
                    $("#submit_button").val(button_name);                       
                    $("#submit_button").prop('disabled', true);
                }                         
            });                  
        },
        error: function(xhr, textStatus, errorThrown) {
            $('#form_result').append('<p class="alert alert-danger">Somethig is wrong!</p>');
            return false;
        },
    });
});

Answer 1

Considering that your logic in the success: part works, you should handle it like this:

} else if ( key !== 'error' && result.error == false ) {
                $('#form_result').append('<div class="alert alert-success">'+value+'</p>');
                $('#form_result').delay(3000).hide('slow');   
                $("#submit_button").val(button_name);                       
                $("#submit_button").prop('disabled', true);
                window.location.replace("http://theredirectpage.com");
            }    

if you need to redirect to an url generated by the php file you should return it in your result array and then insert the value into the redirect call, something like this:

 window.location.replace(result.redirectUrl);

Hope that helps