Displaying a specific section of a page after refresh or form submit

user_1376843 0
Viewed 560

I have a page with a few sections in it like the snippet below, and a menu that hides or displays the different sections.

However, I have a form on one section which when submitted refreshes the page, therefore the section displayed goes back to the first section but I want to keep it on the section where the from was submitted.

Is there an easy way to do this or will I need to do something in JS where there is a hidden input in the form that tells it which section should be displayed after it is submitted?

$("#menu li:nth-child(1)").unbind("click").bind("click", function() {
  $("#section1").css("display", "block");
  $("#section2").css("display", "none");
  $("#section3").css("display", "none");
});
$("#menu li:nth-child(2)").unbind("click").bind("click", function() {
  $("#section1").css("display", "none");
  $("#section2").css("display", "block");
  $("#section3").css("display", "none");
});
$("#menu li:nth-child(3)").unbind("click").bind("click", function() {
  $("#section1").css("display", "none");
  $("#section2").css("display", "none");
  $("#section3").css("display", "block");
});
#menu li {
  display: inline-block;
}

#section1 {
  display: block;
  background-color: #d33;
}

#section2 {
  display: none;
  background-color: #3d3;
}

#section3 {
  display: none;
  background-color: #33d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
</ul>

<div id="section1">
  Section 1
</div>

<div id="section2">
  Section 2
  <form><button>Submit</button></form>
</div>

<div id="section3">
  Section 3
</div>

css html jquery javascript
3 Answers

If you can use AJAX to post the form data, yes, you can stop the reloading of the page and also show some good content. Preventing the default event from happening is what the common approach being used in most of the places:

$("form").submit(function (e) {
  e.preventDefault();
  $.ajax({
    type: $(this).attr("method"),
    url: $(this).attr("action"),
    data: $(this).serialize()
  });
});

The above is the generic code included with your snippet below:

$("#menu li:nth-child(1)").unbind("click").bind("click", function() {
  $("#section1").css("display", "block");
  $("#section2").css("display", "none");
  $("#section3").css("display", "none");
});
$("#menu li:nth-child(2)").unbind("click").bind("click", function() {
  $("#section1").css("display", "none");
  $("#section2").css("display", "block");
  $("#section3").css("display", "none");
});
$("#menu li:nth-child(3)").unbind("click").bind("click", function() {
  $("#section1").css("display", "none");
  $("#section2").css("display", "none");
  $("#section3").css("display", "block");
});

$("form").submit(function (e) {
  e.preventDefault();
  $.ajax({
    type: $(this).attr("method"),
    url: $(this).attr("action"),
    data: $(this).serialize()
  });
});
#menu li {
  display: inline-block;
}

#section1 {
  display: block;
  background-color: #d33;
}

#section2 {
  display: none;
  background-color: #3d3;
}

#section3 {
  display: none;
  background-color: #33d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
</ul>

<div id="section1">
  Section 1
</div>

<div id="section2">
  Section 2
  <form><button>Submit</button></form>
</div>

<div id="section3">
  Section 3
</div>

user_4626270

You can use cookies, or localstorage. Try something like this:

$("#menu li:nth-child(1)").unbind("click").bind("click", function() {
  $("#section1").css("display", "block");
  $("#section2").css("display", "none");
  $("#section3").css("display", "none");
  
  // localstorage solution
  localStorage.menu_selection = '#section1';

  // alternatively, document.cookie is also
  // persistent across page refreshing
  
});

// add something like this for when the page loads
// this is a shorthand for 'document ready'
$(function () {

  var menu_selection = localStorage.menu_selection;

  // this assumes that the default display is 'none'
  $(menu_selection).css("display", "block");

});

Localstorage is persistent in the browser across page refreshes. Alternatively you can use cookies, but these get sent to the server for each request and you may not need that.

user_103435510

You can use preventDefault to stop the form from being submitted. There is also an easier way to hide & display your sections.

$("#menu > li").on("click", function() {
    var clickedIndex = $(this).index();

    $(".section").hide().eq(clickedIndex).show();
});

$(".your-button").on("click", function(e) {
  var sectionIndex = $(this).parents(".section").index();
  
   $(".section").hide().eq(sectionIndex + 1).show();
  
  e.preventDefault();
});
#menu li {
  display: inline-block;
}

#section1 {
  display: block;
  background-color: #d33;
}

#section2 {
  display: none;
  background-color: #3d3;
}

#section3 {
  display: none;
  background-color: #33d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
</ul>

<div class="sections">
  <div class="section" id="section1">
    Section 1
  </div>

  <div class="section" id="section2">
    Section 2
    <form><button class="your-button">Submit</button></form>
  </div>

  <div class="section" id="section3">
    Section 3
  </div>
</div>

user_95126840
Related