Mahadevan Mahadevan - 7 months ago 42
Javascript Question

When radio button is checked redirect to second page and hide certain html element in the second page by checking if radio button was clicked

Here is my first page data in html

<div class="edu">
<input type="radio" name="edu" class="ug" value="ug" checked="checked">
<label class="radio-label">Undergraduate</label>
<input type="radio" name="edu" value="pg" class="pg">
<label class="radio-label">Postgraduate</label>
<input type="radio" name="edu" value="cu" class="cu">
<label class="radio-label">Continuing Education</label>
</div>


Here is my second page content:

<div class="display">
sample text
</div>


When the client check the "continuing education" radio button from the first page then the second page will be redirected/opened in a new window/new tab. An in second page I want to check if the "continuing education" button was clicked in the first page. If, then hide the ".display" div in the second page.

I want to use Jquery, and any other things in addition if needed.
Please guide me as I am new. Thanks.

Answer

Load jQuery from here at top of both first and second html file:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Add this jQuery code at the bottom of the first page:

 <script> 
      $(document).ready(function(){
      $(".cu").on("click", function(){  
      localStorage.setItem("cu","clicked");
      //var key = localStorage.key(0); 
      //alert(key);
      window.open('second.html', '_blank'); 
    });
    });
</script>

Then at the bottom of the second html page add this code. Which will check if localStorage value was set to "cu" thorough which you can understand "continuing education" were clicked or not. If, then it will hide the ".display" div.

 <script>
   $(document).ready(function(){
   if(localStorage.key(0) == "cu")
    {
     //$(".display").fadeOut(500) ;
      $(".display").hide(500) ;
     //alert(localStorage.key(0));
     localStorage.clear();
     localStorage.removeItem("cu");
    }
  });  
</script>