title: How to save DIV content to HTML file using AJAX/JQuery/PHP?
body: <p>I am struggling with getting this code to work. My intention is to be able to save the contents of a div to an html file, so that I can recall it later...
  It works partially, in that if I change <code>$data=$_POST['id']</code> to <code>$data=$_POST['memory']</code> in <code>readInput.php</code> it will indeed save any text I enter into the input named 'memory' to an html file, and will correctly save the file with whatever name I give it. Where it fails is if I try to grab the data of DIV <code>'readDiv'</code> and its contents <code>$data=$_POST['id'];</code> it will save a blank html page, with whatever name I gave it... Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;&lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;readInput&lt;/title&gt;
  &lt;meta name="description" content="HTML5 web page"&gt;
  &lt;meta name="keywords" content="HTML5"&gt;
  &lt;meta name="author" content="You"&gt;
  &lt;meta charset="UTF-8"&gt;
        &lt;link href="jquery-ui.htm" rel="stylesheet" type="text/css"&gt;
        &lt;script type="text/javascript" src="jquery-latest.htm"&gt;&lt;/script&gt;
   &lt;script name="saveMemory" type="text/javascript"&gt;
   $(document).ready(function() {
       $('#saveMemory').click(function() {
       //e.preventDefault();
         var content = $('#readDiv').html(); // orig
          //var content = document.getElementById('readDiv').value; // test
              $.ajax({
                    type: 'POST',
                    url: 'readInput.php',
                    data: {id: content}
                    //dataType: "html" // test
                    });
            });
       });
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="document.readWrite.writeInput.focus();"&gt;&lt;!--form name.input name.focus!--&gt;
      &lt;div id="formContainer" style="display:block"&gt;
            &lt;form name="readWrite" action="readInput.php" method="POST"&gt;
               &lt;input name="memory" placeholder="...enter text here..." type="text"&gt;
               &lt;input name="readMemory" id="readMemory" class="readMemory" placeholder="...read..." type="text"&gt;
  
             &lt;input id="writeInput" name="writeInput" class="writeInput" placeholder="...write..." type="text"&gt;       
             &lt;input class="saveMemory" id="saveMemory" name="saveMemory" value="...saveMemory..." type="submit"&gt;
  
            &lt;/form&gt;&lt;/div&gt;
            &lt;div name="readDiv" id="readDiv" class="readDiv"&gt;
            &lt;div id="writeDiv" class="writeDiv" title="writeDiv"&gt;test text
            &lt;div id="topDropbox" class="topDropbox" title="topDropbox"&gt;
      &lt;img src="car.jpg"&gt;
      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p><code>readInput.php</code>:</p>
  
  <pre><code>     &lt;?php
   $writeInput = $_POST['writeInput'];
   $data = $_POST['id'];
  
   $fileName = ("memories/$writeInput.html");
   $fileHandle = fopen($fileName, 'w+') or die("Cannot open file");
   fwrite($fileHandle, $data);
   fclose($fileHandle);
   echo($fileName);
   echo($data);
   ?&gt;
  </code></pre>
  
  <p>It probably looks like a horrible hack job to you pros because I have tried so many bits of code, and I am sure I am just missing something silly, but I am at a loss...thank you anyone for any help!</p>