JQuery форма отправки поведения не понятно

Я пишу код для небольшого веб-проекта с помощью js и jquery. В нем, в какой-то момент, нажав кнопку, я создаю диалог. диалоговое окно имеет форму внутри него с полем имени и некоторыми полями. Я должен проверять пользовательские входы и отправлять их на сервер вместе с добавлением поля имени в список в браузере, для интимного пользователя, добавлен еще один элемент. Происходят две странные вещи:

1) После публикации формы диалоговое окно закрывается самостоятельно, если я не выдаю диалоговое окно ("закрыть") нигде в обработчике кнопки отправки.

2) Запись имени не добавляется в список. Как будто вся страница обновляется после отправки. С исходными записями по умолчанию списка имен.

У кого-нибудь есть идеи о том, почему это происходит? Поставил бы какой-то код для вашей помощи. Пожалуйста, не предлагайте вместо этого использовать Ajax. Я думаю, что это отражает некоторый фундаментальный недостаток в моем понимании путей JS и хотел бы сначала его очистить, чем просто переключиться на некоторые другие технологии.

    <div id='dialog' title='Define New Matrix'>
<form name='form1' id='form1'  method='post'>
<fieldset>
    <label for="Name">Name</label>
    <input type='text' name='nameofmatrix' id='Name' class='whitepanes'><br>
    <label for="a11">a11</label>
    <input type="text" name='a11' id='a11' class='whitepanes number-field'><br>
    <label for="a22">a22</label>
    <input type="text" name='a22' id='a22' class='whitepanes number-field'><br>
    <button id='submit_button'>Submit</button>
    <button id='cancel_button'>cancel</button>
</fieldset>
</form>
    <p id='tip' style='color:red;'><i>All fields are required</i></p>
</div>
<script>
    //#button_define is a button on whose clicking the dialog opens. 
            $('#button_define').click(function(){
        $('#dialog').dialog('open');
        $('#tip').html("<p style='color:red; font-size:small'>All fields are      mandatory</p>");
    });

    $('#submit_button,#cancel_button').button();

    $('#cancel_button').on('click',function(){
            $('#dialog').dialog('close');
    });

    $('#submit_button').click(function(event){
        event.preventDefault();
        var name=$('input[name=nameofmatrix]').val();
        //Validate is a function which returns a bool if validation proceeds     correctly
        var isCorrect = Validate();
        if(isCorrect){
        //if validated correctly then add to list

            $('#form1').submit();   
            //$('#dialog').dialog('close');
            $('#selectable').append("<li class='ui-widget-content'>",name,"</li>"); 
        } 

    });
</script>