我已发送电子邮件发送表单,其中确认弹出窗口显示预览电子邮件信息给用户。在我的代码表单中,文本输入显示正确,但预览弹出窗口中的复选框没有数据显示。我需要在确认框中显示复选框数据。
感谢所有
这是我的代码
的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="js/jquery_003.js"></script>
<script src="js/Mail.js"></script>
</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>
在mail.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){
var theAnswer = confirm("Please confirm that the following Information is correct:\n Name:" +name+"\nAge :"+age+"\nJob :"+checked ); //if the user presses the "OK" button display the message "Javascript is cool!!"
}
if (theAnswer){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;
}