发送HTML数据&形式与ajax&留在当前页面

时间:2014-04-01 04:04:52

标签: javascript php jquery html ajax

我正在尝试发送包含html表数据的电子邮件以及用户的输入。这就是电子邮件目前显示的内容。

Device - iPad $14000

Your App Will Cost Approximately : $14000

FromEmail

由于某些奇怪的原因,用户的输入没有显示,我已将功能更改为.click& .form但这只发送用户的输入。我真的希望发送这两件事。

这里是html

<div class="total-inner">
    <table class="total-table" id="table">
        <tbody>
            <tr>
                <td>Device - iPad</td>
                <td>$14000</td>
            </tr>
        </tbody>    
    </table>

    <hr><br>

    <div class="total-text-wrap">
        <p>Your App Will Cost Approximately  :  $<span class="total">0</span></p>   
    </div>

    <br><hr>
</div>

<div class="form-wrap">
    <form method="post" class="quote-form" action="server.php">
        <span>Company:<input type="text" name="name"></span>
        <span>Email:<input type="text" name="email"></span>

        <br>

        <button class="total-button" id="send-quote" type="submit">SEND</button>
    </form>
 </div>

 <div class="button-wrap">
    <a href="index1.html">
        <button class="total-button" input-type="submit">RESTART</button>
    </a>
    <button class="total-button" id="quote-advance">GET IN TOUCH</button>
    <button class="total-button">SAVE PDF</button>
 </div>

我的Javascript / jquery

  Var   contactNode    = $('#quote-advance'),
        quoteNode      = $('.quote-form'),
        tableData      = [],
        totalData      = [];

 contactNode.click(function(){
            $(".form-wrap").slideDown(750);
            $(function(){
                    totalTableNode.each(function(){
                        tableData.push($(this).html());
                    });

                    totalText.each(function(){
                        totalData.push($(this).html());
                    });
            quoteNode.submit(function(e){   
                $.ajax({
                  type : "POST",
                  url : 'server.php',
                  data : "content=" + tableData + totalData,
                  success: function(data) {
                      alert('Email Sent');// alert the data from the server
                  },
                  error : function() {
                  }

            });
                e.preventDefault();
            });

        });
    });

和php

<?php 
$to  = 'test@gmail.com';
$subject = 'Testing';
$message = $_REQUEST['content'];
$message .= 'From' . $_POST["name"];
$message .= 'Email' . $_POST["email"];
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail($to, $subject, $message, $headers);
?>

重申一下,我目前收到的电子邮件只包含html表数据。 &安培;如果我将quoteNode函数更改为.click或.form。电子邮件发送输入数据,但不发送html表数据&amp;重定向到空白server.php文件(我希望它提醒并保持当前页面以及发送用户输入和html表数据)。 请帮忙!我很难过!干杯!

1 个答案:

答案 0 :(得分:0)

看起来数据未正确填充。它可以在填写之前提交。你能试试这个:

编辑(在我的服务器上工作):

HTML / JS

<div class="total-inner">
    <table class="total-table" id="table">
        <tbody>
            <tr>
                <td>Device - iPad</td>
                <td>$14000</td>
            </tr>
        </tbody>    
    </table>

    <hr><br>

    <div class="total-text-wrap">
        <p>Your App Will Cost Approximately  :  $<span class="total">0</span></p>   
    </div>

    <br><hr>
</div>

<div class="form-wrap">
    <form method="post" class="quote-form" action="#">
        <span>Company:<input id="name" type="text" name="name"></span>
        <span>Email:<input id="email" type="text" name="email"></span>

        <br>

        <input class="total-button" id="send-quote" type="submit" value="submit">
    </form>
 </div>

 <div class="button-wrap">
    <a href="index1.html">
        <button class="total-button" input-type="submit">RESTART</button>
    </a>
    <button class="total-button" id="quote-advance">GET IN TOUCH</button>
    <button class="total-button">SAVE PDF</button>
 </div>
<script type="text/javascript" src="jQuery.js"></script>    
 <script>
var contactNode    = $('#quote-advance'),
        quoteNode      = $('.quote-form');



quoteNode.submit(function( event ) { 
  $(".form-wrap").slideDown(750);

var dataTable = "";

$('.total-table td').each(function() {
    dataTable += $(this).html();    
});

var name =$("#name").val(); 
var email = $("#email").val();
data= 'name=' + name + '&email=' + email + '&content=' + dataTable ;        
  alert(dataTable);
    $.ajax({
      type : "POST",
      url : 'server.php',
      data : data,
      success: function(data) {
          alert('Email Sent');// alert the data from the server
      },
      error : function() {
      }
    });
event.preventDefault();
});
</script>

PHP

<?php 
$to  = 'mail@gmail.com';
$subject = 'Testing';
$message = $_POST['content'];
$message .= 'From' . $_POST["name"];
$message .= 'Email' . $_POST["email"];
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail($to, $subject, $message, $headers);
?>