title: HTML / JQuery: Email an Entire Div/Table
body: <p>I want to be able to email content such as a div that is in my webpage using the php mail function and possible putting it on the so called "Thank Your, Your Email Sent" page. However, I'm running into some issues.  I am following this <a href="https://stackoverflow.com/questions/2257801/email-div-content">Email Div Content</a>, <a href="https://stackoverflow.com/questions/31656456/email-div-text-content-using-php-mail-function">Email div text content using PHP mail function</a>, and <a href="https://stackoverflow.com/questions/8941482/get-entire-div-with-its-elements-and-send-it-with-php-mail-function">GET entire div with its elements and send it with php mail function</a> questions that has already been posted as a guide but it doesn't seem to be working for me.  I want to send via email and show up on the "Thank Your, Your Email Sent" page within the message. Anything I'm doing wrong?</p>
  
  <p>HTML Table that I want to send over is:</p>
  
  <pre><code>    &lt;div id="add_items_content" style="width:100%;"&gt;        
          &lt;center&gt;
              &lt;table  id="add_item_here" style="width:98%;"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;&lt;td&gt;Item&lt;/td&gt;&lt;td&gt;Years&lt;/td&gt;&lt;td&gt;Quantity&lt;/td&gt;&lt;td&gt;Training Hours&lt;/td&gt;&lt;td&gt;Total Item Cost&lt;/td&gt;&lt;/tr&gt;    
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/center&gt;
          &lt;center&gt;
              &lt;table  id="add_totals_here" style="width:98%;"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;&lt;td cospan="3"&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;   
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/center&gt;
      &lt;/div&gt;
      &lt;script&gt;
          $(document).ready(function(){
              $('table[id^=add_item_here]').hide();
              $('table[id^=add_totals_here]').hide();
              $('div[id^=office_submit]').hide();
              $('div[id^=show_form]').hide();
  
              //First obtaining indexes for each checkbox that is checked
              $('input[name=item_chk]').change(function(){
              var index = this.id.replace('item_chk','');
              if($(this).is(':checked')){
                  AddNewItem(index);
              }else{
                  RemoveItem(index);
              }
                  CalculateTotals();
  
              });
  
              function AddNewItem(index){
                  // Get hidden variables to use for calculation and tables.
                  var item = $('#item_chk'+index).parent().text().trim();
                  var itemdescr = $('#itemdescr'+index).val();
                  var traininghrs = parseInt($('#traininghrs'+index).val());
                  var qty = parseInt($('#qty'+index).val());
                  var yrs = parseInt($('#yrs'+index).val());
  
                  var item_cost = 0;
                  // Calculating item cost for just that one checkbox
                  item_cost+=parseInt($('#servicefee'+index).val());
                  item_cost*=parseInt($('#yrs'+index).val()); 
                  item_cost+=parseInt($('#licensefee'+index).val());
                  item_cost*=parseInt($('#qty'+index).val()); 
                  var traininghrs = parseInt($('#traininghrs'+index).val());          
                  //Display each item that is checked into a table
                  $('#add_item_here tr:last').after('&lt;tr id="row_id'+index + '"&gt;&lt;td style=\"width:35%;\"&gt;' + itemdescr +'&lt;/td&gt;&lt;td style=\"width:15%;\" &gt;' + yrs +'&lt;/td&gt;&lt;td style=\"width:16%;\"&gt;' + qty +'&lt;/td&gt;&lt;td style=\"width:18%;\"&gt;' + traininghrs + '&lt;/td&gt;&lt;td style=\"width:16%;\"&gt;$'+ item_cost + '&lt;/td&gt;&lt;/tr&gt;');       
              }
  
              function RemoveItem(index){
                  $('table#add_item_here tr#row_id'+index).remove();
              }
  
              function CalculateTotals(){
                  var total_cost = 0;
                  var total_training = 0;
                  $('input:checkbox:checked').each(function(){
                      var index = this.id.replace('item_chk','');
                      var item_cost = 0;
                      // Calculating item cost for just that one checkbox
                      item_cost+=parseInt($('#servicefee'+index).val());
                      item_cost*=parseInt($('#yrs'+index).val()); 
                      item_cost+=parseInt($('#licensefee'+index).val());
                      item_cost*=parseInt($('#qty'+index).val()); 
                      var traininghrs = parseInt($('#traininghrs'+index).val());
  
                      total_cost +=item_cost;
                      total_training +=traininghrs;
  
  
              }); 
  
                  if(total_cost &gt; 0 || total_training &gt; 0) {
                      $('#add_totals_here tr:last').children().remove();
                      $('#add_totals_here tr:last').after('&lt;tr &gt;&lt;td colspan="3" style=\"width:66%;\"&gt;TOTALS:&lt;/td&gt;&lt;td style=\"width:18%;\"&gt;' + total_training + '&lt;/td&gt;&lt;td style=\"width:16%;\"&gt;$'+ total_cost + '&lt;/td&gt;&lt;/tr&gt;');
                      $('#add_item_here').show();
                      $('#add_totals_here').show();
                      $('#office_submit').show();
                  }else{
                  $('table[id^=add_item_here]').hide();
                      $('table[id^=add_totals_here]').hide();
                      $('div[id^=office_submit]').hide();
                  }           
              }
                  $("input[name='office_submit']").click(function () {
                      $('#show_form').css('display', ($(this).val() === 'Yes') ? 'block':'none');
                  });
                  // Quantity change, if someone changes the quantity
                          $('select[name=qty]').change(function(){
                              var index = this.id.replace('qty','');
                                  if($("#item_chk"+index).is(':checked')){
                                      RemoveItem(index);
                                      AddNewItem(index);
                                      CalculateTotals();
                          }
                      });
  
                      // Years change, if someone changes the years           
                      $('select[name=yrs]').change(function(){
                      var index = this.id.replace('yrs','');
                      if($("#item_chk"+index).is(':checked')){
                          RemoveItem(index);
                          AddNewItem(index);
                          CalculateTotals();
                      }           
                  });     
              })
              &lt;/script&gt;
  </code></pre>
  
  <p>Trial Number 1; So far I have tried:</p>
  
  <pre><code>&lt;script&gt;
      function mail_content() {    
         var tablesContent = document.getElementById("add_items_content").innerHTML;    
         $.post('send_form.email.php',{content:tablecontent},function(data) {
         });
      }
  &lt;/script&gt; 
  </code></pre>
  
  <p>Using script I have added to the send_form_email.php:</p>
  
  <pre><code> &lt;?php
   $txt = $_POST['content'];
  
    mail($to,$subject,$message,$txt,$headers);
    mail($from,$subject2,$message2,$txt,$headers2);
   ?&gt;
  </code></pre>
  
  <p>Trial Number 2: I even tried storing it into a hidden field:</p>
  
  <pre><code> &lt;input name="data" id="data" type="hidden" value=""&gt;&lt;/input&gt;
  
   &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $("#price_quote").submit(function() { //notice submit event
              $("#my_hidden_field").val($("#add_items_content").html()); //notice html function instead of text();
              });
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>And then the send_form_email.php I put it in that message see if it even shows up.</p>
  
  <pre><code> $txt = $_POST['data'];
   $message = "Content: ".$txt."\n";
  
   mail($to,$subject,$message,$txt,$headers);
   mail($from,$subject2,$message2,$txt,$headers2);
  </code></pre>
  
  <p>Trial Number 3: Even tried Ajax</p>
  
  <pre><code> &lt;script&gt;
      function mail_content(){    
           var html = $('#add_items_content').html();
          $.ajax(function{
              type="POST",
              url:"send_form_email.php",
              data:"data="+html,
              success:function(response){
                  $('#add_items_content').show().html("email sent");
              }
           });
         }
      &lt;/script&gt;
  </code></pre>
  
  <p>What am I missing or doing wrong?  Why doesn't the div / tables show up or display?</p>