我正在使用 onsen-ui 框架和 phonegap 创建一个移动应用程序。我想添加一个应用内“联系我们”表单，用户可以在其中提交表单，成功提交后，表单将发送至 email@domain.com。
我在index.html中添加了
<script type="text/ons-template" id="contact.html">
<ons-navigator title="Navigator" var="sNavigator">
<ons-page id="page-contact">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="setHome();">
<ons-icon icon="fa-chevron-left"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center white">
<span id="search-text" class="trn" data-trn-key="contact">Contact Us</span>
</div>
</ons-toolbar>
<div class="home-header">
<img src="css/images/banner.png" alt="" title="">
<p class="center trn" data-trn-key="contact">We respond to messages in the order received</p>
</div>
<form id="frm-contact" class="frm-contact" method="post">
<div class="wrapper">
<div class="field-wrapper">
<input type="text" name="first_name" class="first_name text-input text-input--underbar has_validation"
placeholder="First Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="text" name="last_name" class="last_name text-input text-input--underbar has_validation"
placeholder="Last Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="number" name="contact_phone" class="contact_phone text-input text-input--underbar has_validation"
placeholder="Mobile Phone" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="email" name="email_address" class="email_address text-input text-input--underbar has_validation"
placeholder="Email address" value="" data-validation="email" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="text" name="subject" class="subject text-input text-input--underbar has_validation"
placeholder="Subject" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<textarea style="width:100%;height:80px" name="message" class="message text-input text-input--underbar has_validation"
placeholder="Your Message" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" ></textarea>
</div>
<p class="small-font-dim trn" data-trn-key="create_account_terms">
Please note all fields are mandatory, you should fill in all before submission.</p>
</div>
<button class="button green-btn button--large trn" onclick="contact();" data-trn-key="contact" >
Submit Now!
<div class="search-btn"><ons-icon icon="fa-chevron-right"></ons-icon></div>
</button>
</form>
</ons-page>
</ons-navigator>
</script>
然后我在 .js 文件中验证表单并调用 API 函数
case "page-contact":
translatePage();
translateValidationForm();
$(".full_name").attr("placeholder", getTrans("Full Name",'full_name') );
$(".last_name").attr("placeholder", getTrans('Last Name','last_name') );
$(".contact_phone").attr("placeholder", getTrans('Mobile Phone','contact_phone') );
$(".email_address").attr("placeholder", getTrans('Email address','email_address') );
$(".subject").attr("placeholder", getTrans('Subject','subject') );
$(".message").attr("placeholder", getTrans('Your Message','message') );
break;
我在这里进行验证并从网络服务器调用 API:
function contact()
{
$.validate({
form : '#frm-contact',
borderColorOnError:"#FF0000",
onError : function() {
},
onSuccess : function() {
var params = $( "#frm-contact").serialize();
params+="&device_id="+ getStorage("device_id");
callAjax("contact",params);
return false;
}
});
}
在网络服务器端，PHP 代码包括
public function actionContact($to='',$from='',$subject='',$body='')
{
$from1=Yii::app()->functions->getOptionAdmin('global_admin_sender_email');
if (!empty($from1)){
$from=$from1;
}
$email_provider=Yii::app()->functions->getOptionAdmin('email_provider');
if ( $email_provider=="smtp"){
$smtp_host=Yii::app()->functions->getOptionAdmin('smtp_host');
$smtp_port=Yii::app()->functions->getOptionAdmin('smtp_port');
$smtp_username=Yii::app()->functions->getOptionAdmin('smtp_username');
$smtp_password=Yii::app()->functions->getOptionAdmin('smtp_password');
$mail=Yii::app()->Smtpmail;
Yii::app()->Smtpmail->Host=$smtp_host;
Yii::app()->Smtpmail->Username=$smtp_username;
Yii::app()->Smtpmail->Password=$smtp_password;
Yii::app()->Smtpmail->Port=$smtp_port;
$mail->SetFrom($from, '');
$mail->Subject = $subject;
$mail->MsgHTML($body);
$mail->AddAddress($to, "");
if(!$mail->Send()) {
//echo "Mailer Error: " . $mail->ErrorInfo;
return false;
}else {
//echo "Message sent!";
return true;
}
} elseif ( $email_provider=="mandrill"){
$api_key=Yii::app()->functions->getOptionAdmin('mandrill_api_key');
try {
require_once 'mandrillapp/Mandrill.php';
$mandrill = new Mandrill($api_key);
$message = array(
'html' => $body,
'text' => '',
'subject' => $subject,
'from_email' => $from,
//'from_name' => 'Example Name',
'to' => array(
array(
'email' => $to,
//'name' => 'Recipient Name',
'type' => 'to'
)
)
);
$async = false;
$ip_pool = '';
$send_at = '';
$result = $mandrill->messages->send($message, $async, $ip_pool, $send_at);
//dump($result);
if (is_array($result) && count($result)>=1){
if ($result[0]['status']=="sent"){
return true;
}
}
} catch(Mandrill_Error $e) {
//echo 'A mandrill error occurred: ' . get_class($e) . ' - ' . $e->getMessage();
}
return false;
}
$body = $_POST['first_name']. ' ' .$_POST['last_name']. ' ' .$_POST['contact_phone']. ' ' .$_POST['message'];
$to = 'info@domain.com';
$from = $_POST['email_address'];
$headers = "From: $from\r\n";
$headers .= "Content-type: text/html; charset=UTF-8\r\n";
$subject = $_POST['subject'];
$message =<<<EOF
$body
EOF;
if (!empty($to)) {
if (@mail($to, $subject, $message, $headers)){
return true;
}
}
return false;
}
表单正在发送电子邮件，但是如果没有/空数据，我无法获得提交的信息。
请指教，谢谢。
最佳答案
根据您发布的内容，设备 ID 存在错误。具体来说，函数 getStorage 是未定义的。下面发布的代码工作正常，能够通过邮寄将所有字段发送到我的测试 PHP 页面并发送电子邮件。诚然，我没有像您那样使用复杂的 PHP 处理器，但它确实有效!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
<title>Onsen UI 2.0 Quickstart</title>
<script src="components/loader.js"></script>
<script src="lib/onsenui/js/onsenui.js"></script>
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css" type="text/css" media="all" />
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function contact()
{
var params = $( "#frm-contact").serialize();
console.log(params);
}
</script>
</head>
<body>
<ons-page id="page-contact">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="setHome();">
<ons-icon icon="fa-chevron-left"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center white">
<span id="search-text" class="trn" data-trn-key="contact">Contact Us</span>
</div>
</ons-toolbar>
<div class="home-header">
<img src="css/images/banner.png" alt="" title="">
<p class="center trn" data-trn-key="contact">We respond to messages in the order received</p>
</div>
<form id="frm-contact" class="frm-contact" method="post">
<div class="wrapper">
<div class="field-wrapper">
<input type="text" name="first_name" class="first_name text-input text-input--underbar has_validation"
placeholder="First Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="text" name="last_name" class="last_name text-input text-input--underbar has_validation"
placeholder="Last Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="number" name="contact_phone" class="contact_phone text-input text-input--underbar has_validation"
placeholder="Mobile Phone" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="email" name="email_address" class="email_address text-input text-input--underbar has_validation"
placeholder="Email address" value="" data-validation="email" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="text" name="subject" class="subject text-input text-input--underbar has_validation"
placeholder="Subject" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<textarea style="width:100%;height:80px" name="message" class="message text-input text-input--underbar has_validation"
placeholder="Your Message" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" ></textarea>
</div>
<p class="small-font-dim trn" data-trn-key="create_account_terms">
Please note all fields are mandatory, you should fill in all before submission.</p>
</div>
<button class="button green-btn button--large trn" onclick="contact();" data-trn-key="contact" >
Submit Now!
<div class="search-btn"><ons-icon icon="fa-chevron-right"></ons-icon></div>
</button>
</form>
</ons-page>
</body>
</html>
PHP:
<?php
$to = 'test@test.com';
$from = $_REQUEST['email_address'];
$message = $_REQUEST['message'];
$subject = $_REQUEST['subject'];
$header = "From: <".$email_address.">" ."\r\n";
$send = @mail($to, $subject, $message, $header);
if(!$send){
die();
}
?>
另外，请注意我没有发送您的其他字段 [first_name, last_name, contact_phone] 但它们可以添加到任何地方。最后，这绝不是发送邮件的安全方法，而是将一些东西放在一起以证明 Onsen 不会干扰使用 jQuery 通过 HTML 表单发送邮件。
编辑:尽管这是实际问题的分支，但根据您的评论，我强烈建议您阅读其中的一些内容:
关于javascript - 温泉用户界面 : Contact Us Form Submission，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35561226/