如何查询数据库中最后选择的单选按钮？

Question

I need to know how to query the database for the last radio button selected by user so when they refresh the page or login on a different session, they will see their selection. I'm using jquery.min.js (1.7.1) for the show/hide functionality.

Here is the HTML:

    <div class="wrap">
    <div class="box">
      <div align=center id="catNav">
<label> &nbsp; <input type="radio" name="group_name" id="list-one-button" value="01" checked="checked" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-two-button" value="02" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-three-button" value="03" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-four-button" value="04" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-five-button" value="05" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-six-button" value="06" /></label>
<label> &nbsp; <input type="radio" name="group_name" id="list-seven-button" value="07" /></label>
      </div>

      <ul class="cat-list" id="list-one">
<li><a href="#"><img src="img1.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-two">
<li><a href="#"><img src="img2.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-three">
<li><a href="#"><img src="img3.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-four">
<li><a href="#"><img src="img4.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-five">
<li><a href="#"><img src="img5.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-six">
<li><a href="#"><img src="img6.jpg"></a></li>
      </ul>

      <ul class="cat-list" id="list-seven">
<li><a href="#"><img src="img3.jpg"></a></li>
      </ul>         
    </div>
</div>

and here is the Javascript:

$(function(){
$("#list-two").hide();  
$("#list-three").hide();    
$("#list-four").hide();
$("#list-five").hide();
$("#list-six").hide();
$("#list-seven").hide();

$("#list-one-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-one").slideDown(600);
});

$("#list-two-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-two").slideDown(600);
}); 

$("#list-three-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-three").slideDown(600);
}); 

$("#list-four-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-four").slideDown(600);
});

$("#list-five-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-five").slideDown(600);
});

$("#list-six-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-six").slideDown(600);
});

$("#list-seven-button").click(function(){
    $(".cat-list").slideUp(600);
    $("#list-seven").slideDown(600);
});

$("#catNav li a").click(function() {
    $("#catNav li").removeClass("activeCatButton");
    $(this).parent().addClass("activeCatButton");
});
});

Answer 1

You can achieve the desired effect by utilizing AJAX calls.

Here is the jQuery part:

$('ul.cat-list').click(function() {
  var id = this.prop('id');
  $.ajax({
    type: "POST",
    url: "saveSelection.php",
    data: "id=" + id,
  }).done(function( msg ) {
    // this is just for debugging purposes
    // console.log("Data Saved: " + msg);
  });
});

In PHP you can save the value. This could be the file saveSelection.php :

<?php
  // save in session
  $_SESSION['selection'] = $_POST['id'];
  // or save in database, for example by storing the user's ip address or login id
  ...
?>

Then, if the user requests the page again, check if there is a presaved value, and render the radio button as selected.

By the way, you are using lists wrongly. Correct would be one ul tag with multiple li tags:

<ul class="cat-list" id="list">
    <li id="item-one"><a href="#"><img src="img1.jpg"></a></li>
    <li id="item-two"><a href="#"><img src="img2.jpg"></a></li>
    ...
</ul>