title: Passing an HTML element to PHP via $.post() returns JavaScript object or breaks: how must I encode it?
body: <p>I'm a relative JavaScript / jQuery newbie.</p>
  
  <p>I'm working on exporting (to a file on the server) a dynamically-generated <code>&lt;svg&gt;</code> from within a dynamically-generated <code>&lt;iframe&gt;</code>. I've succeeded in extracting the relevant data with jQuery (i.e., I can produce an object whose contents is the <code>&lt;svg&gt;...&lt;/svg&gt;</code></p>
  
  <p>Relevant snippit of my <strong>JavaScript</strong> parser:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function chart_export(svg_id) {
      var svg_data = $('iframe:first').contents().find('svg');
      svg_data = svg_data[0]; // Unwrap the [], only one element.
      console.log(svg_data); // Looks right (but perhaps it's not).
      console.log(svg_id); // Also right
  
      // POST svg
      $.post("chart_export.php", {'svg_post' : svg_data, 'chart_name' : svg_id}, function(data){
          alert(data); // Quick view of $_POST, no var_dump();
      });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Relevant snippit of my <strong>PHP</strong> parser:</p>
  
  <pre><code>  &lt;?php
    $path = "module/" . "post.txt";
    $svg_data = $_POST['svg_post'];
    file_put_contents($path, $svg_data); // Same output as below
    echo json_encode($_POST); // Hack return to JS's alert() callback.
    ?&gt;
  </code></pre>
  
  <p>for the moment, has been replaced with simply <code>echo json_encode($_POST);</code></p>
  
  <p>If I <strong>don't unwrap</strong> the <code>svg_data</code> object, PHP receives it as a (JavaScript?) <code>[object Object]</code> which I am unable to iterate across within PHP (such as with <code>$svg = $_POST['svg_data'];</code> which again returns <code>[object Object]</code>.</p>
  
  <p>If I <strong>do unwrap</strong> <code>svg_data</code> within JavaScript before I post it to PHP (as in the example code above) I get <code>[object SVGSVGElement]</code>.</p>
  
  <p>I caught the fix found in <a href="https://stackoverflow.com/questions/652763/jquery-object-to-string"><strong>jQuery Object to string</strong></a>, and <a href="https://stackoverflow.com/questions/8775024/post-value-pairs-from-jquery-to-php-file-and-save-data-in-database">Post value pairs from jQuery to php file and save data in database</a> but don't believe they apply to my situation (despite Cipi's comment). I also attempted <code>var svg_string = new String('svg_data');</code> to no avail (it creates a string <code>"[object Object]"</code>.</p>
  
  <p>Clearly, my understanding of JavaScript data objects and jQuery selectors requires improvement.</p>
  
  <p>What do I need to do, either within JavaScript/jQuery or PHP to allow me to access the raw contents of the entire <code>&lt;svg&gt;...&lt;/svg&gt;</code>? I imagine it's simple and I'm missing it.</p>
  
  <p>And here's the sample SVG just for good measure:</p>
  
  <pre><code>&lt;svg id="chart" width="1292" height="636"&gt;&lt;defs id="defs"&gt;&lt;clipPath id="_ABSTRACT_RENDERER_ID_0"&gt;&lt;rect x="214" y="122" width="865" height="393"&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;/defs&gt;&lt;g&gt;&lt;text text-anchor="start" x="214" y="91.5" font-family="Arial" font-size="30" font-weight="bold" stroke="none" stroke-width="0" fill="#000000"&gt;Test&lt;/text&gt;&lt;/g&gt;&lt;g&gt;&lt;g&gt;&lt;text text-anchor="start" x="1127" y="139" font-family="Arial" font-size="20" stroke="none" stroke-width="0" fill="#000000"&gt;5&lt;/text&gt;&lt;/g&gt;&lt;rect x="1099" y="122" width="20" height="20" stroke="none" stroke-width="0" fill="#64a8d1"&gt;&lt;/rect&gt;&lt;g&gt;&lt;text text-anchor="start" x="1127" y="171" font-family="Arial" font-size="20" stroke="none" stroke-width="0" fill="#000000"&gt;4&lt;/text&gt;&lt;/g&gt;&lt;rect x="1099" y="154" width="20" height="20" stroke="none" stroke-width="0" fill="#3d9ad1"&gt;&lt;/rect&gt;&lt;g&gt;&lt;text text-anchor="start" x="1127" y="203" font-family="Arial" font-size="20" stroke="none" stroke-width="0" fill="#000000"&gt;3&lt;/text&gt;&lt;/g&gt;&lt;rect x="1099" y="186" width="20" height="20" stroke="none" stroke-width="0" fill="#03436a"&gt;&lt;/rect&gt;&lt;g&gt;&lt;text text-anchor="start" x="1127" y="235" font-family="Arial" font-size="20" stroke="none" stroke-width="0" fill="#000000"&gt;2&lt;/text&gt;&lt;/g&gt;&lt;rect x="1099" y="218" width="20" height="20" stroke="none" stroke-width="0" fill="#245a7a"&gt;&lt;/rect&gt;&lt;g&gt;&lt;text text-anchor="start" x="1127" y="267" font-family="Arial" font-size="20" stroke="none" stroke-width="0" fill="#000000"&gt;1&lt;/text&gt;&lt;/g&gt;&lt;rect x="1099" y="250" width="20" height="20" stroke="none" stroke-width="0" fill="#0969a2"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g&gt;&lt;rect x="214" y="122" width="865" height="393" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"&gt;&lt;/rect&gt;&lt;g clip-path="url(#_ABSTRACT_RENDERER_ID_0)"&gt;&lt;g&gt;&lt;rect x="214" y="514" width="865" height="1" stroke="none" stroke-width="0" fill="#cccccc"&gt;&lt;/rect&gt;&lt;rect x="214" y="416" width="865" height="1" stroke="none" stroke-width="0" fill="#cccccc"&gt;&lt;/rect&gt;&lt;rect x="214" y="318" width="865" height="1" stroke="none" stroke-width="0" fill="#cccccc"&gt;&lt;/rect&gt;&lt;rect x="214" y="220" width="865" height="1" stroke="none" stroke-width="0" fill="#cccccc"&gt;&lt;/rect&gt;&lt;rect x="214" y="122" width="865" height="1" stroke="none" stroke-width="0" fill="#cccccc"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g&gt;&lt;g&gt;&lt;rect x="270" y="319" width="177" height="195" stroke="none" stroke-width="0" fill="#0969a2"&gt;&lt;/rect&gt;&lt;rect x="269.5" y="318.5" width="178" height="196" stroke="#000000" stroke-width="1" stroke-opacity="0.3" fill-opacity="1" fill="none"&gt;&lt;/rect&gt;&lt;rect x="268.5" y="317.5" width="180" height="198" stroke="#000000" stroke-width="1" stroke-opacity="0.15" fill-opacity="1" fill="none"&gt;&lt;/rect&gt;&lt;rect x="267.5" y="316.5" width="182" height="200" stroke="#000000" stroke-width="1" stroke-opacity="0.05" fill-opacity="1" fill="none"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;rect x="558" y="319" width="177" height="195" stroke="none" stroke-width="0" fill="#0969a2"&gt;&lt;/rect&gt;&lt;rect x="846" y="319" width="177" height="195" stroke="none" stroke-width="0" fill="#0969a2"&gt;&lt;/rect&gt;&lt;rect x="270" y="123" width="177" height="195" stroke="none" stroke-width="0" fill="#245a7a"&gt;&lt;/rect&gt;&lt;rect x="558" y="123" width="177" height="195" stroke="none" stroke-width="0" fill="#245a7a"&gt;&lt;/rect&gt;&lt;rect x="846" y="123" width="177" height="195" stroke="none" stroke-width="0" fill="#245a7a"&gt;&lt;/rect&gt;&lt;rect x="270" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#03436a"&gt;&lt;/rect&gt;&lt;rect x="558" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#03436a"&gt;&lt;/rect&gt;&lt;rect x="846" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#03436a"&gt;&lt;/rect&gt;&lt;rect x="270" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#3d9ad1"&gt;&lt;/rect&gt;&lt;rect x="558" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#3d9ad1"&gt;&lt;/rect&gt;&lt;rect x="846" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#3d9ad1"&gt;&lt;/rect&gt;&lt;rect x="270" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#64a8d1"&gt;&lt;/rect&gt;&lt;rect x="558" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#64a8d1"&gt;&lt;/rect&gt;&lt;rect x="846" y="514.5" width="177" height="0" stroke="none" stroke-width="0" fill="#64a8d1"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g&gt;&lt;rect x="214" y="514" width="865" height="1" stroke="none" stroke-width="0" fill="#333333"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;g&gt;&lt;text text-anchor="middle" x="358.5" y="538.6" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#222222"&gt;One&lt;/text&gt;&lt;/g&gt;&lt;g&gt;&lt;text text-anchor="middle" x="646.5" y="538.6" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#222222"&gt;Two&lt;/text&gt;&lt;/g&gt;&lt;g&gt;&lt;text text-anchor="middle" x="934.5" y="538.6" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#222222"&gt;Three&lt;/text&gt;&lt;/g&gt;&lt;g&gt;&lt;text text-anchor="end" x="198" y="520.1" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#444444"&gt;0.0&lt;/text&gt;&lt;/g&gt;&lt;g&gt;&lt;text text-anchor="end" x="198" y="422.1" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#444444"&gt;0.5&lt;/text&gt;&lt;/g&gt;&lt;g&gt;&lt;text text-anchor="end" x="198" y="324.1" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#444444"&gt;1.0&lt;/text&gt;&lt;/g&gt;&lt;g&gt;&lt;text text-anchor="end" x="198" y="226.1" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#444444"&gt;1.5&lt;/text&gt;&lt;/g&gt;&lt;g&gt;&lt;text text-anchor="end" x="198" y="128.1" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#444444"&gt;2.0&lt;/text&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;g&gt;&lt;path d="M438.5,303.5A1,1,0,0,1,437.5,302.5L437.5,247.5A1,1,0,0,1,438.5,246.5L488.5,246.5A1,1,0,0,1,489.5,247.5L489.5,302.5A1,1,0,0,1,488.5,303.5L479.5,303.5L447.5,319.5L463.5,303.5Z" stroke="none" stroke-width="0" fill-opacity="0.4" fill="#cccccc" transform="translate(2, 2)"&gt;&lt;/path&gt;&lt;path d="M438.5,303.5A1,1,0,0,1,437.5,302.5L437.5,247.5A1,1,0,0,1,438.5,246.5L488.5,246.5A1,1,0,0,1,489.5,247.5L489.5,302.5A1,1,0,0,1,488.5,303.5L479.5,303.5L447.5,319.5L463.5,303.5Z" stroke="none" stroke-width="0" fill-opacity="0.6" fill="#cccccc" transform="translate(1, 1)"&gt;&lt;/path&gt;&lt;path d="M438.5,303.5A1,1,0,0,1,437.5,302.5L437.5,247.5A1,1,0,0,1,438.5,246.5L488.5,246.5A1,1,0,0,1,489.5,247.5L489.5,302.5A1,1,0,0,1,488.5,303.5L479.5,303.5L447.5,319.5L463.5,303.5Z" stroke="#cccccc" stroke-width="1" fill="#ffffff" transform="translate(0, 0)"&gt;&lt;/path&gt;&lt;text text-anchor="start" x="447" y="269.6" font-family="Arial" font-size="16" font-weight="bold" stroke="none" stroke-width="0" fill="#000000"&gt;One&lt;/text&gt;&lt;text text-anchor="start" x="447" y="290.6" font-family="Arial" font-size="16" stroke="none" stroke-width="0" fill="#000000"&gt;1:&lt;/text&gt;&lt;text text-anchor="start" x="465" y="290.6" font-family="Arial" font-size="16" font-weight="bold" stroke="none" stroke-width="0" fill="#000000"&gt;1&lt;/text&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;
  </code></pre>