Как прикрутить ajax к форме

<script> 
			var files; 
			$('input[type=file]').change(function(){ 
			files = this.files; 
			}); 
			 
			$('.submit.button').click(function( event ){ 
    event.stopPropagation();  
    event.preventDefault();   
  
    var data = new FormData(); 
    $.each( files, function( key, value ){ 
        data.append( key, value ); 
    }); 
  
  
    $.ajax({ 
        url: './submit.php?uploadfiles', 
        type: 'POST', 
        data: data, 
        cache: false, 
        dataType: 'json', 
        processData: false,  
        contentType: false,  
        success: function( respond, textStatus, jqXHR ){ 
 
            if( typeof respond.error === 'undefined' ){ 
 
                var files_path = respond.files; 
                var html = ''; 
                $.each( files_path, function( key, val ){ html += val +'<br>'; } ) 
                $('.ajax-respond').html( html ); 
            } 
            else{ 
                console.log('ОШИБКИ ОТВЕТА сервера: ' + respond.error ); 
            } 
        }, 
        error: function( jqXHR, textStatus, errorThrown ){ 
            console.log('ОШИБКИ AJAX запроса: ' + textStatus ); 
        } 
    }); 
  
}); 
		</script>

2. Сама форма: 
 
<form id="myForm" action="userinfo.php" method="post"> 
<p>Фамилия: <input type="text" name="surname" placeholder="Фамилия" /><br /></p> 
<p>Имя : <input type="text" name="name" placeholder="Имя" /><br /></p> 
<p>Отчество : <input type="text" name="secondname" placeholder="Отчество" /><br /></p> 
<input type="file" accept=".txt,image/*"> 
<a href="#" class="submit button" id="imgs">Загрузить файлы</a> 
<div class="ajax-respond"></div> 
<button class="button" id="sub">Save</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>