使用ajax发送html数据和表单并停留在当前页面

Question

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

Device - iPad $14000

Your App Will Cost Approximately : $14000

发件人电子邮件

由于某些奇怪的原因没有显示来自用户的输入，我已将函数更改为 .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 表数据并重定向到空白 server.php 文件（我希望它提醒并停留在当前页面上，以及发送用户输入和 html 表数据）。 请帮忙！ 我难住了！！！ 干杯!

Answer 1

看起来数据没有正确填写。 它可以在填写之前提交。 你能试试这个吗：

编辑（在我的服务器上工作）：

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);
?>