Question

在我的应用程序中，我试图从数据库中获取人员列表并将其显示在html元素上。有不止一个人。对于每个人，我在那里显示名称和两个<h4>作为按钮＆＃39; Emailme和Textme＆＃39;为了我。例如，如果我点击People1的Emailme按钮，它应该发送电子邮件到p1@test.com，如果我点击People2的Emailme按钮，它应该发送电子邮件到p2 @ test .COM。为了获得这些人的电子邮件ID，我正在使用＆＃39; .data＆＃39;属性将值设置为元素本身。我收到了我点击按钮的人的电子邮件。但是我不知道如何通过这个价值来实际运作。

这是我的代码：

在 Index.php

中

<div id="peoples" class="peoples_results_list" style="display: none;">
    <div class="result" id="result_list">
        <h4>Peoples</h4>
        <div id="people_info" class="people_information">
            <div class="wrapper">
                <div id="name" class="people_name">
                    <h5></h5>
                    <p></p>
                </div>             
            </div>                 
        </div>
        <div id="email_btn" class="contact_btn">
            <h4 id="emailme"></h4>
        </div>
    </div>
</div>

<div id="ContactForm" class='form_overlay' style="display: none;">
    <h2>Email us</h2>
    <form action="#">
        <input class='vk' id="pname" placeholder="Name" type="text" required />
        <input class='vk' id="psubject" placeholder="Subject" type="text" required />
        <input class='vk' id="pemail" placeholder="Email" type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required />
        <textarea class='vk' id="pmessage" placeholder="Write your Message here..." required></textarea>
        <i class="fa fa-close" style="font-size:36px"></i>
        <button type="button" class='button' onclick="submitEmailForm()">SUBMIT</button>
    </form>
</div>


<script>
$('#logo').on("click",function(){
    var $list = $('#peoples');

    $.post('/go/getInfo', {}, function(data){
        for(var i=0; i < data.length; i++ ){
            var $template = $('#result_list').clone();
            $template.find('#name h5').html('Name');
            $template.find('#name p').html(data[i]['name']);

            var email_btn = $template.find('#email_btn h4');
            email_btn.data('email',data[i]['email']);

            $template.find('#email_btn h4').html("Email Me");
            $("#email_btn h4").click(function(){
                $('#ContactForm').fadeIn();
            });

            $template.show();
            $('#peoples').show();

            $list.append($template);        
        }  
    });
});


function submitEmailForm(){        
    var name = $('#pname').val();
    var email = $('#pemail').val();
    var subject = $('#psubject').val();
    var message = $('#pmessage').val();


    if(name == "" || email == "" || message == "" || subject == ""){
        alert("All fields are Required");
    }
    else {
        $.ajax({
            type: 'POST',
            url: '/go/sendEmail',
            data: {
                name: name,
                subject: subject,
                email: email,
                message: message,
            },
            success: function(msg){

            }
        });
    }
</script>

在 go.php

中

<?php

public function sendEmail(){
    if(!empty($_POST['name']) && !empty($_POST['subject']) && !empty($_POST['email']) && !empty($_POST['message']) && (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false)){

        $name = $_POST['name'];
        $subject = $_POST['subject'];
        $email = $_POST['email'];
        $message = $_POST['message'];

        $email = new \Email\Default();
        $mergeTags = [
            'CONTENT'=>$message." from - ". $name
        ];
        $this->toJson($email->setTo(['email' => $to, 'name' => $name, 'type' => 'to'])->setSubject($subject)->setTemplate('default')->setMergeTags($mergeTags)->send());
    }
}

?>

如上所示，如下所示，我已将该特定电子邮件的值设置为元素本身，并希望将该值传递给后端，以实际将电子邮件发送给该人员。

var email_btn = $template.find('#email_btn h4');
email_btn.data('email',data[i]['email']);

我尝试在function submitEmailForm()中添加如下内容：

var toEmail = $('#email_btn').data('email');

和＆＃39; .post＆＃39;

$.ajax({
            type: 'POST',
            url: '/go/sendEmail',
            data: {
                name: name,
                subject: subject,
                email: email,
                message: message,
                to_emp_email: toEmail
            }

但是很明显没有工作。任何想法我怎么能实现这一目标？感谢帮助。

被修改

尝试下面的代码，它会发送邮件，但发送给人们最后一封电子邮件。例如，如果列表中有3个人（p1，p2，p3），对我发送给谁不重要，它总是发送给第3人（p3＆＃39; s）电子邮件。

在函数submitEmailForm()

中的 Index.php

var toEmail = email_btn.data('email');

$.ajax({
            type: 'POST',
            url: '/go/sendEmail',
            data: {
                name: name,
                subject: subject,
                email: email,
                message: message,
                to_emp_email: toEmail
            }

在函数sendEmail（）

中的 go.php

$toEmail = $_POST['to_emp_email'];

这是有效的，但始终存储最后一个人的电子邮件并仅发送到该电子邮件。

Answer 1

萨曼莎，

执行$('#result_list').clone();后，您复制了#result_list所有内容！在这种情况下，您将拥有相同数量ID的元素。这是因为ID必须是unique。这就是为什么你只得到最后一个email。

我建议测试一下：

$.post('/go/getInfo', {}, function(data){
    for(var i=0; i < data.length; i++ ){
        var $template = $('#result_list').clone();
        $template.find('#name').attr("id", "name"+i); //A unique ID for Name
        $('#name'+i).find('h5').html('Name');
        $('#name'+i).find('p').html(data[i]['name']);

        $template.find('#email_btn').attr("id", "email_btn"+i); //A unique ID for button
        var email_btn = $('email_btn'+i).find('h4');
        email_btn.data('email',data[i]['email']);

        email_btn.html("Email Me");
        email_btn.click(function(){
            //Assign the email of the "Email Me" button, to the send Email Button                
            $('#ContactForm').find('button').data('email',$(this).data('email'));
            $('#ContactForm').fadeIn();
        });

        $template.show();
        $('#peoples').show();

        $list.append($template);        
    }  
});

然后，在submitEmailForm()中，您可以收到当前的电子邮件：

var sendEmailButton = $('#ContactForm').find('button');
var toEmail = sendEmailButton.data('email');
//And here your AJAX

我希望这有帮助！

将Json响应数据传递给另一个函数

1 个答案: