javascript - why when i use div.load() of jquery, my whole page reload instead of just reload the div -

i use div.load(), instead div loaded, whole page reload. want refresh div#trial part when click submit without refresh whole page. here's code:

    <form  method="post">                 date <?php select_date();  ?>                  exercise                  <select name="exercise" style="font-size:15px; height:30px; line-height:30px;">                      <option value="-1">all</option>                     <option value="0">arm supination</option>                     <option value="1">arm pronation</option>                     <option value="2">elbow flexion</option>                     <option value="3">elbow raise</option>                     <option value="4">shoulder flexion</option>                     <option value="5">shoulder abduction</option>                 </select>                  <input type="submit" name="submit" value="submit" id="submit">             </form>      <div class="grid_5 mb_50 mt_50" id="trial" style="overflow:scroll; height:400px;}">         <?php display_ses(); ?>     </div>      <script type="text/javascript">    $(document).ready(function (){     $('#submit').click(function(){     $('div.#trial').load('patient_daily.php div.#trial');     });     });    </script> 

that's because clicking submit button submits form, causes browser leave current page. prevent natural action of button, use preventdefault.

$('#submit').click(function(event){   event.preventdefault();   $('div.#trial').load('patient_daily.php div.#trial'); });