Javascript HTML/JQuery：通过电子邮件发送整个Div/表

我想能够电子邮件内容，如一个div，是在我的网页使用php邮件功能，并可能把它放在所谓的“谢谢你，你的电子邮件发送”页面。然而，我遇到了一些问题。我正在关注这些问题，这些问题已经作为指南发布了，但似乎对我不起作用。我想通过电子邮件发送，并显示在邮件中的“感谢您，您的电子邮件已发送”页面上。我做错了什么

我要发送的HTML表是：

    <div id="add_items_content" style="width:100%;">        
        <center>
            <table  id="add_item_here" style="width:98%;">
                <tbody>
                    <tr><td>Item</td><td>Years</td><td>Quantity</td><td>Training Hours</td><td>Total Item Cost</td></tr>    
                </tbody>
            </table>
        </center>
        <center>
            <table  id="add_totals_here" style="width:98%;">
                <tbody>
                    <tr><td cospan="3">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>   
                </tbody>
            </table>
        </center>
    </div>
    <script>
        $(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('<tr id="row_id'+index + '"><td style=\"width:35%;\">' + itemdescr +'</td><td style=\"width:15%;\" >' + yrs +'</td><td style=\"width:16%;\">' + qty +'</td><td style=\"width:18%;\">' + traininghrs + '</td><td style=\"width:16%;\">$'+ item_cost + '</td></tr>');       
            }

            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 > 0 || total_training > 0) {
                    $('#add_totals_here tr:last').children().remove();
                    $('#add_totals_here tr:last').after('<tr ><td colspan="3" style=\"width:66%;\">TOTALS:</td><td style=\"width:18%;\">' + total_training + '</td><td style=\"width:16%;\">$'+ total_cost + '</td></tr>');
                    $('#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();
                    }           
                });     
            })
            </script>

第三次尝试：甚至尝试过Ajax

 <script>
    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");
            }
         });
       }
    </script>

函数mail_content（）{
var html=$（'#添加项目\内容'）.html（）；
$.ajax（函数{
type=“POST”，
url:“发送表单电子邮件.php”，
数据：“数据=”+html，
成功：功能（响应）{
$（“#添加#项#内容”）.show（）.html（“已发送电子邮件”）；
}
});
}

---

我错过了什么或做错了什么？为什么div/表不显示或不显示？

您确实应该检查JS控制台是否有错误：

   var tablesContent = document.getElementById("add_items_content").innerHTML;    
            ^---note the "sC"
   $.post('send_form.email.php',{content:tablecontent},function(data) {
                                              ^--note the c

JS变量区分大小写，不会神奇地为您更正输入错误

还有这个：

<input name="data" id="data" type="hidden" value=""></input>
                         ^---id 'data'
$("#my_hidden_field").val($("#add_items_content").html());
           ^--- completely DIFFERENT ID

^---id“数据”
$（“我的隐藏字段”）.val（$（“添加项目内容”）.html（））；
^---完全不同的ID

您能稍微澄清一下您为我们提出的问题吗？电子邮件是否正在发送，但缺少信息？还是根本就不发送？在这些尝试中是否有任何错误返回？首先，我只是尝试在邮件中的“谢谢，您的电子邮件已发送”页面上显示它，并尝试显示在电子邮件中。现在，我得到的是什么都没有出现。好像没有任何东西被发送到另一页。喜欢它的空。。例如：我有“$txt=$\u POST['data']”；然后我有$message=“Content:”.$txt.\n“；“一旦通过它，它只显示”Content:”，所以没有显示任何内容。现在我正在通过Wordpress工作，如果这有什么用的话。修复了1号试用版，但那不起作用。固定的试用号码，它的工作！$（document）.ready（函数（）{$（“#price_quote”）.submit（函数（）{//notice submit event$（“#data”）.val（$（“#add#items_content”）.html（）；//notice html函数代替text（）；}）；

 $txt = $_POST['data'];
 $message = "Content: ".$txt."\n";

 mail($to,$subject,$message,$txt,$headers);
 mail($from,$subject2,$message2,$txt,$headers2);

 <script>
    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");
            }
         });
       }
    </script>

   var tablesContent = document.getElementById("add_items_content").innerHTML;    
            ^---note the "sC"
   $.post('send_form.email.php',{content:tablecontent},function(data) {
                                              ^--note the c

<input name="data" id="data" type="hidden" value=""></input>
                         ^---id 'data'
$("#my_hidden_field").val($("#add_items_content").html());
           ^--- completely DIFFERENT ID