Question

我的电子邮件发送脚本在提交表单后发送电子邮件。单击“提交”按钮后，会将数据直接发送到收件人的电子邮件地址，但是我需要预览页面，在发送电子邮件之前会显示表单数据的预览。这里的表单动作由javascript文件workMail.js控制，动作页面为sendMail.php

感谢您的帮助。

这是我的代码

的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]\n";
 $messages .= "Email: $_POST[mail]\n";
 $messages .= "Age : $_POST[age]\n";
 $messages .= "Work $datatList\n";  

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;
}

Answer 1

继续我的评论，我的意思是分割sendMail.php（当然，您必须修改主页面javascript以适应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]\n";
        $messages           .= "Email: $_POST[mail]\n";
        $messages           .= "Age : $_POST[age]\n";
        $messages           .= "Work $datatList\n";  
        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));
            }
    }

发送电子邮件前需要预览页面

1 个答案: