时间戳

首页 > 解决方案 > jQuery / AJAX 发送更改的 div 的内容

php - jQuery / AJAX 发送更改的 div 的内容

问题描述

我有这个 CRUD 系统，客户应该能够指定所需产品的数量。当金额 > 0 时，我将一个新类“活动”添加到该表行。

单击“继续”按钮时，将过滤掉包含值 0 的行。单击“订单”按钮后，我想向管理员发送一封电子邮件，其中包含所需产品的列表和相应的数量。

下面的代码有效，但是，发送的电子邮件只包含一个字段（它必须能够处理其中的几个），并且金额始终为 0。

<form role="form" method="post" action="email.php">
    <input type="text" class="sendmail" name="name" placeholder="Your name" />
    <input type="text" class="sendmail" name="email" placeholder="Your email" />
</form>    


<table>
    <tr class='".$row['id']."'>
        <td class='name'>".$row['name']."</td>
        <td class='category'></td>
        <td class='price'>€".$row['price']."</td>
        <td class='unit'>per&nbsp;".$row['unit']."</td>
        <td class='actions'><input type='number' name='amount[]' min='0' value='0' id='".$row['id']."'></td>
    </tr>
</table>

<button id="order"><i class="fas fa-angle-right"></i>&nbsp;&nbsp;&nbsp;Volgende</button>
<button id="confirm"><i class="fas fa-paper-plane"></i>&nbsp;&nbsp;&nbsp;Bestellen</button>

jQuery

$(document).ready(function() {
    $('input').on('change', function() {
        var id = $(this).attr('id');

        if(parseInt(this.value) > 0){
            $('.'+id).addClass('active');
        }

        else {
            $('.'+id).removeClass('active');
        }
});

    $('#order').click(function() {

        $("#order").hide();
        $("#confirm").show();

        $('.heading').html('<i class="fas fa-apple-alt"></i>&nbsp;&nbsp;&nbsp;Overzicht');
        $('tr').not(document.getElementsByClassName('active')).empty();
        $(':input[type="number"]').prop('disabled', true);
    });
});

$(function() {
    $('#confirm').click(function(e) {
        $.ajax({
            url: 'email.php',
            type: 'POST',
            data: {
                'message': $('.active').html(),
                'email':   $('[name="email"]').val(),
                'name':    $('[name="name"]').val()
        },
            success: function(data) {
                alert('You data has been successfully e-mailed');
            }
        });
    });
});

电子邮件.php

$email = $_POST['email'];
$subject = "Subject";
$name = $_POST['name'];
$content = $_POST['message'];
$to = 'myemail@gmail.com';


 $body = '
     <html>
     <head>
         <title>Email: '. $email .'</title>
     </head>
     <body>
         <p>From: '. $name .'</p>
      <div>
        '. $content .'
      </div>
    </body>
    </html>
    ';

$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$headers .= "From: $email\r\n";

mail($to, $subject, $body, $headers);

这是我收到的电子邮件： 在此处输入图像描述

标签： phpjqueryajax

解决方案

我一直在测试你的代码。我注意到的第一件事是，您使用“.active”类来引用多个元素，这很好，因为您可以将它们作为数组调用，但使用 $('.active').html() 只会返回第一个元素而不是TR的 outerhtml 。而且您还需要邮件的TABLE标签才能拥有正确的 html。所以我会做这样的事情：

 $(function() {
    $('#confirm').click(function(e) {
        var data = "<table>";
        $('.active').each(function(i, obj) {
            data += obj.outerHTML;
        });
        data += "</table>";

        $.ajax({
            url: 'email.php',
            type: 'POST',
            data: {
                'message': data,
                'email':   $('[name="email"]').val(),
                'name':    $('[name="name"]').val()
        },
            success: function(data) {
                alert('You data has been successfully e-mailed');
            }
        });
    });
});

然后，当您想引用 HTML 本身以在邮件中使用时，您可能应该删除输入并粘贴输入的值。因为输入的实际值可能不会被复制：

    $('#order').click(function() {

        $("#order").hide();
        $("#confirm").show();

        $('.heading').html('<i class="fas fa-apple-alt"></i>&nbsp;&nbsp;&nbsp;Overzicht');
        $('tr').not(document.getElementsByClassName('active')).empty();
        //$(':input[type="number"]').prop('disabled', true);
        $(':input[type="number"]').each(function(i,obj){
            obj.after( obj.value );
            obj.parentNode.removeChild(obj);
        });
    });

以下是sinppets：

$(document).ready(function() {
    $('input').on('change', function() {
        var id = $(this).attr('id');

        if(parseInt(this.value) > 0){
            $('.'+id).addClass('active');
        }

        else {
            $('.'+id).removeClass('active');
        }
	});

    $('#order').click(function() {

        $("#order").hide();
        $("#confirm").show();

        $('.heading').html('<i class="fas fa-apple-alt"></i>&nbsp;&nbsp;&nbsp;Overzicht');
        $('tr').not(document.getElementsByClassName('active')).empty();
        //$(':input[type="number"]').prop('disabled', true);
        $(':input[type="number"]').each(function(i,obj){
        	obj.after( obj.value );
        	obj.parentNode.removeChild(obj);
        });
    });
});

$(function() {
    $('#confirm').click(function(e) {
    	var data = "<table>";
    	$('.active').each(function(i, obj) {
		    data += obj.outerHTML;
		});
    	data += "</table>";    	
		console.log(data);
    });
});
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<body>

	<table>
	    <tr class='1'>
	        <td class='name'>lala</td>
	        <td class='category'></td>
	        <td class='price'>€125</td>
	        <td class='unit'>por&nbsp;kilo</td>
	        <td class='actions'><input type='number' name='amount[]' min='0' value='0' id='1'></td>
	    </tr>
	    <tr class='2'>
	        <td class='name'>lele</td>
	        <td class='category'></td>
	        <td class='price'>€225</td>
	        <td class='unit'>por&nbsp;kilo</td>
	        <td class='actions'><input type='number' name='amount[]' min='0' value='0' id='2'></td>
	    </tr>
	    <tr class='3'>
	        <td class='name'>lili</td>
	        <td class='category'></td>
	        <td class='price'>€325</td>
	        <td class='unit'>por&nbsp;kilo</td>
	        <td class='actions'><input type='number' name='amount[]' min='0' value='0' id='3'></td>
	    </tr>
	    <tr class='4'>
	        <td class='name'>lolo</td>
	        <td class='category'></td>
	        <td class='price'>€425</td>
	        <td class='unit'>por&nbsp;kilo</td>
	        <td class='actions'><input type='number' name='amount[]' min='0' value='0' id='4'></td>
	    </tr>
	</table>

	<button id="order"><i class="fas fa-angle-right"></i>&nbsp;&nbsp;&nbsp;ORDER</button>
	<button id="confirm" style="display:none;"><i class="fas fa-paper-plane"></i>&nbsp;&nbsp;&nbsp;CONFIRM</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</body>
</html>

希望我能帮上忙

推荐阅读