Fatal编程技术网
  • javascript/
  • Javascript 发送电子邮件前需要预览页面

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

javascript php

Javascript 发送电子邮件前需要预览页面,javascript,php,sendmail,preview,Javascript,Php,Sendmail,Preview,我的电子邮件发送脚本在提交表单后发送电子邮件。单击“提交”按钮后，表单数据将直接发送到收件人电子邮件地址，但我需要预览页面，该页面将在发送电子邮件之前显示表单数据的预览。这里，表单操作由javascript文件workMail.js控制，操作页面为sendMail.php 谢谢你的帮助 这是我的密码 index.php <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" conten

我的电子邮件发送脚本在提交表单后发送电子邮件。单击“提交”按钮后，表单数据将直接发送到收件人电子邮件地址，但我需要预览页面，该页面将在发送电子邮件之前显示表单数据的预览。这里，表单操作由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>

<?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{}

?>


■名字*
■电子邮件*
■年龄*


■工作*

应用程序开发

系统管理


网络

图形



提交
sendMail.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>

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

$（函数（）{
//sendForm
$（“#发送”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
查克勒（“联系方式”）；
});
$（文档）。在（“单击”、“.layerOff”上，函数（）{
$（“.overlay”）.remove（）；
});
});
功能更改错误（选择器）{
变量$form=$（选择器）；
var name=$form.find（“输入[name='name']”）.val（）；
var mail=$form.find（“输入[name='mail']”）.val（）；
var age=$form.find（“输入[name='age']”）.val（）；
/*var work=$form.find（“textarea[name='work']”）val（）*/
var dataval=document.getElementsByName（“数据[]”）；
//或document.querySelectorAll（'[name=“summer[]”]）；
选中的var=[].filter.call（dataval，函数（v）{
返回v.checked；
});
$form.find（“.coution”）.remove（）；
var错误\u frag=错误；
如果（选中。长度<1）{
$（“#工作”）。追加（
工作区需求）；
错误_frag=true；
错误_kind=“#工作”；
}
如果（年龄=“”）{
$（“#年龄”）。追加（“
年龄字段请求”）；
错误_frag=true；
错误_kind=“#年龄”；
}
如果（邮件==“”）{
$（“#邮件”）。追加（
电子邮件字段请求”）；
错误_frag=true；
错误_kind=“#邮件”；
}
如果（名称==“”）{
$（“#名称”）.append（“
名称字段请求”）；
错误_frag=true；
错误_kind=“#name”；
}
如果（错误_frag==false）{
sendForm（）；
}否则{
var targetY=$（错误种类）.offset（）.top；
var headerH=$（“#header”）.height（）；
var ajast=（$（窗口）.width（）>=761）？80:20；
$（“html，body”）.animate（{scrollTop:targetY-header-ajast}，'fast'）；
}
}
函数sendForm（）{
var post_data=$（“#contactForm”）.serialize（）；
$（“#contactForm”）.find（“输入，复选框，文本区域”）.val（“”.end（）.find（“：checked”）.prop（“选中”，false）；
$.post（“sendMail.php”，
后期数据，
功能（数据）{
如果（data.success==false）{
警报（“错误”）；
$（“.overlay”）.remove（）；
}否则{
$（“正文”）。追加（“”）；
$（“.overlay”）.html（data.message）；
$（“html，body”）.animate（{scrollTop:0}，'fast'）；
}
},
“json”
);
返回false；
}
关于我的评论，我所说的拆分
sendMail.php
（当然，您必须修改主页javascript以适应来自
sendMail.php
的确认响应）：

if（isset（$\u POST['data']）和&is_数组（$\u POST['data']））{
foreach（$_POST['data']作为$data）{}
$datatList=内爆（“，”，$_POST['data']）；
}
其他的
$datatList=$_POST['data']；
如果（！isset（$_POST['confirm']））{
$name=strip_标签（$_POST['name']）；
$email=strip_标签（$_POST['mail']）；
$age=preg_replace（'/[^0-9]/'，''，$POST['age']）；
$data=带标签（$datatList）；
$response='1
预览
名称：'.$NAME'
电子邮件：'.$EMAIL'
年龄：‘.$AGE。’
数据：'.$DATA'
';
echo json_编码（数组（“确认”=>true，“消息”=>$response））；
}
否则{
$send_for_地址=”test@email.com";
$header=“From:test@email.com";
$messages=“Name:$\u POST[Name]\n”；
$messages.=“电子邮件：$\u POST[mail]\n”；
$messages.=“年龄：$\u发布[年龄]\n”；
$messages.=“工作$datatList\n”；
邮件（$send_for_address，$messages，$header）；
mb_内部_编码（“UTF-8”）；
if（邮件（$send_for_address，$messages，$header））{

$response=既然您使用的是ajax解决方案，为什么不将您的
sendMail.php
分为两部分，一部分用隐藏的表单输入和确认按钮显示预览数据，然后当点击确认按钮时，它会再次调用自身，但会使用一个使用当前代码的新检查变量？谢谢您的帮助，它显示了表单data在弹出窗口中预览，但问题是单击“确认”按钮后，它不会发送电子邮件和显示感谢消息。这是我提到的关于修改javascript以适应“确认”页面的部分。您只需使用相同的javascript使用
confirm
字段重新提交表单，它就会将表单重新提交给相同的页面，但这次绕过确认页面并运行提交脚本的后半部分。