HTML / JQuery:通过电子邮件发送整个Div / Table

时间:2016-10-19 14:09:01

标签: javascript php jquery html email

我希望能够使用php邮件功能通过电子邮件发送我的网页中的div等内容,并将其放在所谓的"感谢您,您的电子邮件已发送"页。但是,我遇到了一些问题。我正在关注已经发布的Email Div ContentEmail div text content using PHP mail functionGET entire div with its elements and send it with php mail function个问题,但它似乎并不适用于我。我想通过电子邮件发送并显示在"感谢您,您的电子邮件已发送"消息中的页面。我做错了什么?

我要发送的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>

第1号试验;到目前为止,我已经尝试过:

<script>
    function mail_content() {    
       var tablesContent = document.getElementById("add_items_content").innerHTML;    
       $.post('send_form.email.php',{content:tablecontent},function(data) {
       });
    }
</script> 

使用我添加到send_form_email.php的脚本:

 <?php
 $txt = $_POST['content'];

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

试验编号2:我甚至尝试将其存储在隐藏的字段中:

 <input name="data" id="data" type="hidden" value=""></input>

 <script type="text/javascript">
        $(document).ready(function(){
            $("#price_quote").submit(function() { //notice submit event
            $("#my_hidden_field").val($("#add_items_content").html()); //notice html function instead of text();
            });
        });
</script>

然后将send_form_email.php放入该消息中,看看它是否显示出来。

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

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

试验编号3:甚至尝试过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>

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

1 个答案:

答案 0 :(得分:1)

你真的应该检查你的JS控制台是否有错误:

document.addEventListener("DOMContentLoaded", function(event){
var canvas,
    context,
    altezza,
    larghezza,
    x = 100,
    y = 100,
    raggio = 25,
    dx = 5,
    dy = 5,
    immagine,
    ballTest;

    window.onload = init;

    //Assegniamo a canvas l'elemento HTML canvas 
    canvas = document.getElementById("campo");
    //Assegniamo a context un oggetto che contiene tutti i metodi per disegnare
    context = canvas.getContext("2d");
    //Assegniamo a "dy" una velocità iniziale di 0.1 che verrà incrementato nel tempo
    dy = 0.1;
    //Assegniamo a immagine l'immagine della sfera
    immagine = new Image;
    immagine.src = "tBall.png";
    //Assegniamo alle variabli altezza e larghezza le dimensioni del campo
    larghezza = window.screen.availWidth - 40;
    altezza = window.screen.availHeight - 120;

    function Entity(x, y, raggio){
        this.x = x;
        this.y = y;
        this.raggio = raggio;
        draw();
    }

    Entity.prototype.draw = function(){
        context.clearRect(0, 0, context.canvas.width, context.canvas,length);
        context.drawImage(immagine, x, y, raggio, raggio);
    };

    //MIGHT NEED TO PUT THIS.X AND THIS.Y
    Entity.prototype.move = function(dx, dy){
        if(this.x < -10 || this.x > larghezza - 20){
            dx *= -1;
        }
        if(this.y < 20 || this.y > altezza - 40){
            dy *= -1;
        }

        this.x += dx;
        this.y += dy;
    };

    function init(){
        //Assegniamo a canvas l'elemento HTML canvas 
        canvas = document.getElementById("campo");
        //Assegniamo a context un oggetto che contiene tutti i metodi per disegnare
        context = canvas.getContext("2d");
        //Settiamo le dimensioni del campo di canvas
        context.canvas.width = larghezza;
        context.canvas.height = altezza;
        //Inizializziamo l'entità
        ballTest = new Entity(100, 100, 25);
        setInterval(ballTest.move.bind(dx, dy), 10);
    }
});

JS vars区分大小写,并且不会为你神奇地纠正错别字。

然后就是这样:

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