title: How can I avoid an undesired URL address change after a form submission?
body: <p>I am working on a bootsrap3 template, which is Ajax based.
  My index file has a leftside menu and a conent block middle of the page, every time I click on a subelement of this left menu, an Ajax laod will put the page content in this block(ajax-content).* </p>
  
  <p><em>Any time I call any page,</em> <strong>my URL normally looks something like this /index.php#page-one.php</strong>, <em>except when the page contains form submission</em>.</p>
  
  <p><strong>The Problem happens when I add an action attribute (acion="page-one.php") to my form tag. 
  After the form submission my URL turns to /page-one.php ;</strong>
  consequently I get a white page containing the page-one.php elements whitout any CSS styling and of course no index-file's elements. </p>
  
  <p>What is the correct and best way to come a cross this issue?</p>
  
  <p>index.php:</p>
  
  <pre><code> &lt;body&gt;
      &lt;!--Start Container--&gt;
      &lt;div id="main" class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div id="sidebar-left" class="col-xs-2 col-sm-2"&gt;
                  &lt;ul class="nav main-menu"&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a id="configuration" href="#" class="dropdown-toggle"&gt;
                              &lt;i class="fa fa-gears"&gt;&lt;/i&gt;
                              &lt;span class="hidden-xs"&gt;Menu-element&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a class="ajax-link" href="page-one.php"&gt;Menu-Subelement-one&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a class="ajax-link" href="page-wo.php"&gt;Menu-Subelement-two&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt; &lt;!-- end of main-menu--&gt;
              &lt;/div&gt;  
              &lt;!--Start Content--&gt;
              &lt;div id="content" class="col-xs-12 col-sm-10"&gt;
                  &lt;div class="preloader"&gt;
                      &lt;img src="img.gif" class="loader" alt="preloader"/&gt;
                  &lt;/div&gt;
                  &lt;!--inside this div a short description/introduction(simple text inside a &lt;p&gt; tag) about the Menu-element will be shown--&gt;
                  &lt;div id="content-header"&gt;&lt;/div&gt;
                  &lt;!--inside this div the page content of the Menu-subelement will be shown--&gt;
                  &lt;div id="ajax-content"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;!--End Content--&gt;      
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--End Container--&gt;
      &lt;script src="plugins/jquery/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="plugins/jquery-ui/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="plugin/jquery.form.js"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And here is my script.js:</p>
  
  <pre><code> //
  //  Function for load content from url and put in $('.ajax-content') block
  //
  function LoadAjaxContent(url){
      $('.preloader').show();
      $.ajax({
          mimeType: 'text/html; charset=utf-8', // ! Need set mimeType only when run from local file
          url: url,
          type: 'GET',
          success: function(data) {
              $('#ajax-content').html(data);
              $('.preloader').hide();
          },
          error: function (jqXHR, textStatus, errorThrown) {
              alert(errorThrown);
          },
          dataType: "html",
          async: false
      });
  }
  //////////////////////////////////////////////////////
  document.ready
  //////////////////////////////////////////////////////
  $(document).ready(function () {
      var ajax_url = location.hash.replace(/^#/, '');
      if (ajax_url.length &lt; 1) {
          ajax_url = 'home.php';
      }
      LoadAjaxContent(ajax_url);
      $('.main-menu').on('click', 'a', function (e) {
          var parents = $(this).parents('li');
          var li = $(this).closest('li.dropdown');
          var another_items = $('.main-menu li').not(parents);
          another_items.find('a').removeClass('active');
          another_items.find('a').removeClass('active-parent');
          if ($(this).hasClass('dropdown-toggle') || $(this).closest('li').find('ul').length == 0) {
              $(this).addClass('active-parent');
              var current = $(this).next();
              if (current.is(':visible')) {
                  li.find("ul.dropdown-menu").slideUp('fast');
                  li.find("ul.dropdown-menu a").removeClass('active')
              }
              else {
                  another_items.find("ul.dropdown-menu").slideUp('fast');
                  current.slideDown('fast');
              }
          }
          else {
              if (li.find('a.dropdown-toggle').hasClass('active-parent')) {
                  var pre = $(this).closest('ul.dropdown-menu');
                  pre.find("li.dropdown").not($(this).closest('li')).find('ul.dropdown-menu').slideUp('fast');
              }
          }
          if ($(this).hasClass('active') == false) {
              $(this).parents("ul.dropdown-menu").find('a').removeClass('active');
              $(this).addClass('active')
          }
          if ($(this).hasClass('ajax-link')) {
              e.preventDefault();
              if ($(this).hasClass('add-full')) {
                  $('#content').addClass('full-content');
              }
              else {
                  $('#content').removeClass('full-content');
              }
              var url = $(this).attr('href');
              window.location.hash = url;
              LoadAjaxContent(url);
          }
          if ($(this).attr('href') == '#') {
              e.preventDefault();
          }
      });
     $('#formSubmit').ajaxForm(); 
  
  });
  </code></pre>
  
  <p>page-one.php:</p>
  
  <pre><code>&lt;!--some php code here--&gt;
  
  &lt;form class="validateForm" id="formSubmit" action="page-one.php" method="get"&gt;
      &lt;div class="form-group"&gt;
          &lt;label&gt;Username&lt;/label&gt;
          &lt;input type="text" class="form-control" name="username" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-sm-offset-5 col-sm-8"&gt;
              &lt;button type="submit" class="btn btn-primary btn-label-left"&gt;
                  &lt;span&gt;&lt;i class="fa fa-save"&gt;&lt;/i&gt; Save&lt;/span&gt; 
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Thanks!</p>