passing checkbox value to show / hide divs and store in database

I'm using jQuery 1.6.1. This is the main code:

<div>Sidebar (on/off): <input id="sidebar" name="Sidebar" type="checkbox" value="value1"/></div>

<?php if ($row_rsPage['fullcontent']==1)
 { ?>
        <div id="site_layout_full">
         <?php
      $oFCKeditor = new FCKeditor('FCKeditor1');
      $oFCKeditor -> BasePath = 'fckeditor/';
      $oFCKeditor -> Height = '455';
      $oFCKeditor -> Value = $row_rsPage['pg_cont'];
      $oFCKeditor -> Create();
      ?>
        </div>
    <?php } else { ?>
        <div id="site_layout_content">
        <?php
      $oFCKeditor = new FCKeditor('FCKeditor1');
      $oFCKeditor -> BasePath = 'fckeditor/';
      $oFCKeditor -> Height = '455';
      $oFCKeditor -> Value = $row_rsPage['pg_cont'];
      $oFCKeditor -> Create();
      ?>
        </div>
        <div id="site_layout_sidebar">
         <?php
      $oFCKeditor2 = new FCKeditor('FCKeditor2');
      $oFCKeditor2 -> BasePath = 'fckeditor/';
      $oFCKeditor2 -> Config['CustomConfigurationsPath'] = '../sidefckconfig.js' ;
      $oFCKeditor2 -> ToolbarSet = 'Short';
      $oFCKeditor2 -> Height = '455';
      $oFCKeditor2 -> Value = $row_rsPage['pg_sidecont'];
      $oFCKeditor2 -> Create();
      ?>
        </div>

The $row_rsPage['fullcontent']==1 just shows 1 div (site_layout_full) and when it's not it shows 2 divs (site_layout_content and site_layout_sidebar).

Now what I want to do is to toggle this without submitting the page and the storing the value into the database.

So I'm using sidebar to toggle the state but how do I get this value into MySQL.

Initially this works without AJAX with me submitting the form and then store this in the database. But I want it to be interactive so that you do not have to submit the whole page to shift layout changes.

I'm using this to toggle (but does not work):

if (document.getElementById('sidebar').checked) {

      // display fullcontent
      document.getElementById('site_layout_sidebar').style.display = 'none';
      document.getElementById('site_layout_content').style.display = 'none';
      document.getElementById('site_layout_full').style.display = 'block';

  }

  else {

      // display site_content, site_sidebar
      document.getElementById('site_layout_full').style.display = 'none';
      document.getElementById('site_layout_content').style.display = 'block';
      document.getElementById('site_layout_sidebar').style.display = 'block';

  }

And how do I 开发者_运维问答store this value (the state of the checkbox) into $row_rsPage['fullcontent']?

• Checkbox checked: $fullcontent is 0
• Checkbox unchecked: $fullcontent is 1

Can anybody help solve this problem?

I've changed this : Added $(document).ready(function() { } around the javascript. Which fires the event but I'm hiding the div tag site_layout_full because every entry in the database has fullcontent set to 0

So I'm actually hiding the div tag and cannot show it again.

I must check the database with javascript and then toggle but how?

So I can do this :

document.getElementById('site_layout_full').style.display = 'none';
document.getElementById('site_layout_content').style.display = 'block';
document.getElementById('site_layout_sidebar').style.display = 'block';

and get rid of the if ($row_rsPage['fullcontent']==1)?

To sum up I have to:

• Check the database for fullcontent (not with php but with javascript)
• Use that value to show hide the div tags (javascript)
• Dynamically show/hide the tags and when the user is done I submit the value to the database (with php)

How please?

Here's the partial answer. There is something wrong but I haven't found it yet :

Javascript/ajax code :

$(document).ready(function() {
  $pageid = document.getElementById('pg_id').value;  
  $.post("senddata.php",{ id: $pageid },function (ContentFull) {
      alert("DATA = " + ContentFull);
      if (ContentFull==0) // 1 = Fullcontent - 0 = sidebar
      {
          $('input[name=Sidebar]').attr('checked', true);
      } else {
          $('input[name=Sidebar]').attr('checked', false);
      }
  });


   $('#sidebar').change(function(){
        $('#site_layout_sidebar').toggle();
        $('#site_layout_content').toggle();
        $('#site_layout_full').toggle();
    }); 

 if (document.getElementById('sidebar').checked) {
          // display fullcontent
          document.getElementById('site_layout_full').style.display = 'none';
          document.getElementById('site_layout_content').style.display = 'block';
          document.getElementById('site_layout_sidebar').style.display = 'block';
      }
      else {
          // display site_content, site_sidebar
          document.getElementById('site_layout_full').style.display = 'block';
          document.getElementById('site_layout_content').style.display = 'none';
          document.getElementById('site_layout_sidebar').style.display = 'none';
           }
      });

and this is the senddata.php :

    $pid = $_POST['id'];

    mysql_select_db($database_conndb, $conndb);
    $query_Recordset1 = "SELECT tbl_pages.pg_id, tbl_pages.fullcontent FROM tbl_pages WHERE tbl_pages.pg_id='$pid'";
$Recordset1 = mysql_query($query_Recordset1, $conndb) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);

$ContentFull = $row_Recordset1['fullcontent'];

echo($ContentFull);

mysql_free_result($Recordset1);

Now I get the correct data back from the request but I think somewhere there is a fault.... I always seem to get the full content layout even if the Alert DATA give's me 0

What am I doing wrong...