doujie7346 2014-12-15 06:50
浏览 84
已采纳

发送电子邮件前需要预览页面[关闭]

My email sending script send email after submitting the form.Form data are directly sent to receiver email address after clicking submit button, but I need preview page which will show preview of form data before sending email. Here form action is controlled by javascript file workMail.js and action page is sendMail.php

Thanks for any help.

Here is my code

index.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<script src="http://unnayannews.com/testjs/jquery_003.js"></script>

<script src="js/workMail.js"></script>

<link rel="stylesheet" type="text/css" href="css/mailAlert.css">

</head>
<body style="margin: 0px;">

            <div class="onedari_form_wrapper info_form_wrapper ajast_onedari_form mgt0">
                <form id="contactForm">
                    <div class="form_field">
                        <label id="name">■Name<span class="red">*</span></label>

                        <input kl_virtual_keyboard_secure_input="on" placeholder="Name" class="custom_input" name="name" type="text" required>
                    </div>
                    <div class="form_field">
                        <label id="mail">■Email<span class="red">*</span></label>
                        <input kl_virtual_keyboard_secure_input="on"  class="custom_input" name="mail" type="text" required>
                    </div>
                    <div class="form_field">
                        <label id="age">■Age<span class="red">*</span></label><br>
                        <input kl_virtual_keyboard_secure_input="on" style="width: 30%" placeholder="" class="custom_input" name="age" type="text" required>
                    </div>
                    <p style="margin: 0px 0px 8px;"><label id="work">■Work<span class="red">*</span></label></p>

 <div class="category-wrapper">


 <input  id="CategoryCategory10" class="checkbox" value="10" name="data[]" type="checkbox" >
 <label for="CategoryCategory10">App development</label>
  <br>                                          <input  id="CategoryCategory209" class="checkbox" value="209" name="data[]" type="checkbox"> <label for="CategoryCategory209">System management</label>
          <br>                           
                                            <input  id="CategoryCategory213" class="checkbox" value="213" name="data[]" type="checkbox"> <label for="CategoryCategory213">Web</label><br>
                                            <input id="CategoryCategory19" class="checkbox" value="19" name="data[]" type="checkbox"> <label for="CategoryCategory19">Graphics</label><br>

                <br>

                    <button id="send" class="submit bg_red" type="button" name="send">Submit</button>

                </form>
            </div>
</body>
</html>

sendMail.php

<?php


if( isset($_POST['data']) && is_array($_POST['data']) ) {
    foreach($_POST['data'] as $data) {   }
    $datatList = implode(', ', $_POST['data']);
}
$send_for_address = "test@email.com";
$header = "From: test@email.com";
 $messages = "Name: $_POST[name]
";
 $messages .= "Email: $_POST[mail]
";
 $messages .= "Age : $_POST[age]
";
 $messages .= "Work $datatList
";  

mail($send_for_address, $messages,$header);

        mb_internal_encoding("UTF-8");
if (mail($send_for_address, $messages,$header)) {

        $response = <<<HTML
<div class='alert'>
    <div class='alert-header'><div class="alert-remove layerOff">×</div></div>
    <div class="alert-body fs0_7">
        Thank you for your applicaion!
    </div>
    <div class="alert-footer">
        <input type="button" value="OK" class="layerOff">
    </div>
</div>
HTML;
        echo json_encode(array("success"=>true, "message"=> $response));
        }else{}

?>

workMail.js

$(function(){
    // sendForm
    $("#send").on("click", function(e){
        e.preventDefault();
        chackError("#contactForm");
    });

    $(document).on("click", ".layerOff", function(){
        $(".overlay").remove();
    });
});


function chackError(selector){
    var $form = $(selector);
    var name = $form.find("input[name='name']").val();
    var mail = $form.find("input[name='mail']").val();
    var age = $form.find("input[name='age']").val();
    /*var work = $form.find("textarea[name='work']").val();*/

    var dataval =  document.getElementsByName("data[]"); 
             // or document.querySelectorAll('[name="summer[]"]');

var checked = [].filter.call( dataval , function( v ){
    return v.checked;
});



    $form.find(".coution").remove();
    var error_frag = false;


    if ( checked.length < 1 ) {
  $("#work").append("<span class='coution'><br>Work field reqire</span>");
        error_frag = true;
        error_kind = "#work";       
}

    if(age == ""){
        $("#age").append("<span class='coution'><br>Age field reqire</span>");
        error_frag = true;
        error_kind = "#age";
    }
    if(mail == ""){
        $("#mail").append("<span class='coution'><br>email field reqire</span>");
        error_frag = true;
        error_kind = "#mail";
    }
    if(name == ""){
        $("#name").append("<span class='coution'><br>Name field reqire</span>");
        error_frag = true;
        error_kind = "#name";
    }
    if(error_frag === false){
        sendForm();
    }else{
        var targetY = $(error_kind).offset().top;
        var headerH = $("#header").height();
        var ajast = ($(window).width() >= 761)? 80 : 20;
        $("html, body").animate({ scrollTop: targetY - headerH - ajast}, 'fast');
    }
}

function sendForm(){
    var post_data = $("#contactForm").serialize();
    $("#contactForm").find("input, checkbox, textarea").val("").end().find(":checked").prop("checked", false);
    $.post("sendMail.php",
        post_data,
        function(data){
            if(data.success === false){
                alert("error");
                $(".overlay").remove();
            }else{
                $("body").append("<div class='overlay'></div>");
                $(".overlay").html(data.message);
                $("html, body").animate({ scrollTop: 0}, 'fast');
         }
        },
        "json"
    );
    return false;
}
  • 写回答

1条回答 默认 最新

  • douyi3833 2014-12-15 07:33
    关注

    Further to my comment, what I mean by splitting up the sendMail.php (you will, of course, have to modify your main page javascript to accommodate a confirm response from your sendMail.php):

    if(isset($_POST['data']) && is_array($_POST['data']) ) {
            foreach($_POST['data'] as $data) {   }
            $datatList = implode(', ', $_POST['data']);
        }
    else
        $datatList  =   $_POST['data'];
    
    
    if(!isset($_POST['confirm'])) {
    
            $name       =   strip_tags($_POST['name']);
            $email      =   strip_tags($_POST['mail']);
            $age        =   preg_replace('/[^0-9]/','',$_POST['age']);
            $data       =   strip_tags($datatList);
            $response   =   '
        <h2>Preview</h2>
        <table>
            <tr>
                <td>NAME:</td><td>'.$name.'</td>
            </tr>
            <tr>
                <td>EMAIL:</td><td>'.$email.'</td>
            </tr>
            <tr>
                <td>AGE:</td><td>'.$age.'</td>
            </tr>
            <tr>
                <td>DATA:</td><td>'.$data.'</td>
            </tr>
            <tr>
                <td colspan="2">
                    <form id="confirm" method="post" action="">
                        <input type="hidden" name="name" value="'.$name.'" />
                        <input type="hidden" name="mail" value="'.$email.'" />
                        <input type="hidden" name="age" value="'.$age.'" />
                        <input type="hidden" name="data" value="'.$data.'" />
                        <input type="submit" name="confirm" value="Confirm" />
                    </form>
                </td>
            </tr>
        </table>';
            echo json_encode(array("confirm"=>true, "message"=> $response));
        }
    else {
            $send_for_address   = "test@email.com";
            $header             = "From: test@email.com";
            $messages           = "Name: $_POST[name]
    ";
            $messages           .= "Email: $_POST[mail]
    ";
            $messages           .= "Age : $_POST[age]
    ";
            $messages           .= "Work $datatList
    ";  
            mail($send_for_address, $messages,$header);
            mb_internal_encoding("UTF-8");
            if (mail($send_for_address, $messages,$header)) {
                    $response = <<<HTML
    <div class='alert'>
        <div class='alert-header'><div class="alert-remove layerOff">×</div></div>
        <div class="alert-body fs0_7">
            Thank you for your applicaion!
        </div>
        <div class="alert-footer">
            <input type="button" value="OK" class="layerOff">
        </div>
    </div>
    HTML;
                    echo json_encode(array("success"=>true, "message"=> $response));
                }
        }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题