javascript - Jquery form submit behavior not understandable -

i writing code small webproject using js , jquery. in it, @ point, onclicking button, create dialog. dialog has form within name field , number fields. supposed check user inputs , send them server, along appending name field list in browser, intimate user, 1 more item has been added. 2 strange things happening -

1) after posting form, dialog box closes on own without me issuing dialog('close') anywhere in submit button handler.

2) name entry doesn't appended list. if whole page refreshes after submit. original default entries of list of names.

anyone has ideas on why happening? post code aid.please don't suggest use ajax instead. think reflects fundamental flaw in understanding of js ways , clear first switching other technology.

    <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 required</i></p> </div> <script>     //#button_define button on clicking dialog opens.              $('#button_define').click(function(){         $('#dialog').dialog('open');         $('#tip').html("<p style='color:red; font-size:small'>all fields      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 function returns bool if validation proceeds     correctly         var iscorrect = validate();         if(iscorrect){         //if validated correctly add list              $('#form1').submit();                //$('#dialog').dialog('close');             $('#selectable').append("<li class='ui-widget-content'>",name,"</li>");          }       }); </script> 

its if whole page refreshes after post. original entries.

that's precisely happens. though i'm not sure you're submitting post request to since there's no action attribute on form. standard non-ajax request triggered form sends request server , renders response server. if response same page again, same page rendered again.

javascript isn't going remember state of previous page when loads new response. if they're same page, they're 2 separate responses server. so...

1) after posting form, dialog box closes on own without me issuing dialog('close') anywhere in submit button handler.

the dialog isn't closing. after page refreshes you're in entirely new page context. didn't close, hasn't been opened yet in context.

2) name entry doesn't appended list.

there's nothing cause happen when page loads, in new page context doesn't happen. server-side code need include content in response post request.

i think reflects fundamental flaw in understanding of js ways , clear first switching other technology.

included in misunderstanding fact ajax is part of javascript. (the "j" in "ajax" stands "javascript.") it's not "switching other technology." it's taking advantage of capabilities of technology you're using. ajax does, really, send requests , receive responses to/from server without refreshing page context.