[英]how do i submit a angular js built form to an email address
我有以下使用angular的形式。 我想將結果提交到電子郵件地址,並使用服務器端代碼設置php操作頁面來執行此操作。
但是,我在form元素上使用action="action.php"
調用的方式感覺不對。 實際上很臟...但是我不確定有其他方法。 這是提交表格的最佳方法嗎? 我是否應該通過ng-submit使用AJAX調用來收集和存儲數據。
這是表單的JSfiddle ,但沒有action="action.php"
-我正在嘗試ng-submit="mealForm.$valid"
。
下面是我使用action="action.php"
代碼-您將看到我在其中添加了action調用,並省略了ng-submit="mealForm.$valid"
因為即使在大量閱讀后也不確定如何工作的文檔
任何幫助,不勝感激-角的新手:)
謝謝
的HTML
<!DOCTYPE html>
<html ng-app="form">
<head>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" style="margin-top: 40px;">
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{ active: panel.isSelected(1)}">
<a href ng-click="panel.selectTab(1)">Standard Form</a>
</li>
<li ng-class="{ active: panel.isSelected(2)}">
<a href ng-click="panel.selectTab(2)">Custom Form</a>
</li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Standard Form</h4>
<p>Use the standard form if the number people and meals are the same throughout your stay.<br />E.G : 10 people wanting 7 dinners over a 7 day period.</p>
<p>Use the custom form if the number of people wanting meals alters each day.</p>
<p><span class="required">*</span> required fields</p>
<form name="mealForm" ng-controller="FormController as form" action="action.php" method="post" novalidate>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="firstName">First Name<span class="required"> *</span></label>
<input ng-model="booking.firstName" type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="lastName">Last Name<span class="required"> *</span></label>
<input ng-model="booking.lastName" type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Email<span class="required"> *</span></label>
<input ng-model="booking.email" type="email" class="form-control" id="email" name="email" placeholder="Email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="telephone">Phone Number</label>
<input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telephone" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="startDate">Start Date</label>
<input type="date" class="form-control" name="startDate" id="startDate" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="endDate">End Date</label>
<input type="date" class="form-control" name="endDate" id="endDate" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="totalDays">Number of Days <span class="required"> *</span><em>(Discount of 10% Applies for 10 or more days)</em></label>
<select ng-model="booking.totalDays" class="form-control" name="totalDays" id="totalDays" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="groupSize">Group Size <span class="required"> *</span><em>(max 15)</em></label>
<select ng-model="booking.groupSize" class="form-control" name="groupSize" id="groupSize" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Meal Type <span class="required"> *</span><em>(Select from below options)</em></label>
<ul>
<li ng-repeat="meal in form.meals" ng-click="form.selectMeal(meal);" ng-class="{active:meal.active}" class="mealType">{{meal.name}} - {{meal.description}} <span>{{meal.price | currency}}</span>
</li>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="message">Accomodation Details <em>(Please provide full address / specific dietery requirements and any other information)</em></label>
<textarea name="message" id="message"></textarea>
</div>
</div>
</div>
<div class="form-group">
<hr />
<label for="total">
Total: <span>{{form.total(booking.totalDays, booking.groupSize)[0] | currency}}</span> <em ng-show="form.total(booking.totalDays, booking.groupSize)[3]">(10% Discount of <span>{{form.total(booking.totalDays, booking.groupSize)[1] | currency}} applied)</em></span>
</label>
</div>
<div class="form-group">
<div class="form-valid" ng-class="{active: mealForm.$valid}">Form complete: {{mealForm.$valid}}</div>
<hr />
<button type="submit" ng-disabled="mealForm.$invalid" value="Submit" class="btn btn-default">Submit</button>
</div>
<input type="hidden" name="mealType" value="{{form.total()[2]}}">
<input type="hidden" name="total" id="total" value="{{form.total(booking.totalDays, booking.groupSize)[0] | currency}}">
<input type="hidden" name="discount" value="{{form.total(booking.totalDays, booking.groupSize)[1] | currency}}">
</form>
</div><!-- /.panel -->
<div class="panel" ng-show="panel.isSelected(2)">
</div>
</section>
</div>
</body>
</html>
Angular JS(APP.JS)已編輯
(function () {
var app = angular.module('form', []);
// start of edit
app.controller('FormController', ['$scope','$window',
function($scope,$window){
this.meals = mealTypes;
$scope.handleFormSubmit = function (booking) {
$http.post('action.php', booking).success(function (data, status) {
if (data.success) {
$window.alert("Thank you! Your message has been sent.");
}
}).error(function (data, status) {
$window.alert("Sorry, there was a problem! " + data.message);
});
};
// end of edit
this.selectMeal = function (setMeal) {
if (!setMeal.active) {
angular.forEach(this.meals, function (s) {
s.active = false;
});
setMeal.active = true;
}
};
this.total = function (days, size) {
var total = 0;
var percentage = 0;
var mealType;
var discount = false;
total = days * size;
angular.forEach(this.meals, function (s) {
if (s.active) {
total *= s.price;
mealType = s.name + ' - ' + s.description;
}
});
if (days >= 10) {
percentage = (total / 100) * 10;
total -= percentage;
discount = true;
}
return [total, percentage, mealType, discount];
};
});
var mealTypes = [{
name: 'breakfast',
price: '20',
description: 'Three course breakfast',
active: true
}, {
name: 'dinner',
price: '20',
description: 'Three course dinner',
active: false
}, {
name: 'both',
price: '40',
description: 'Breakfast and Dinner',
active: false
}
];
app.controller('PanelController', function () {
this.tab = 1;
this.selectTab = function (setTab) {
this.tab = setTab;
};
this.isSelected = function (checkTab) {
return this.tab == checkTab;
};
});
})();
PHP(ACTION.PHP)
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "me@example.com";
$email_subject = "Subject line";
function died($error) {
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$email_from = $_POST['email'];
$telephone = $_POST['telephone'];
$startDate = $_POST['startDate'];
$endDate = $_POST['endDate'];
$totalDays = $_POST['totalDays'];
$groupSize = $_POST['groupSize'];
$mealType = $_POST['mealType'];
$discount = $_POST['discount'];
$total = $_POST['total'];
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($firstName)."\n";
$email_message .= "Last Name: ".clean_string($lastName)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Telephone: ".clean_string($telephone)."\n";
$email_message .= "Start Date: ".clean_string($startDate)."\n";
$email_message .= "End Date: ".clean_string($endDate)."\n";
$email_message .= "Total Days: ".clean_string($totalDays)."\n";
$email_message .= "Group Size: ".clean_string($groupSize)."\n";
$email_message .= "Meal Type: ".clean_string($mealType)."\n";
$email_message .= "Discount: ".clean_string($discount)."\n";
$email_message .= "Total: ".clean_string($total)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
Thank you for contacting us. We will be in touch with you very soon.
<?php
}
?>
您可以在AngularJS中使用$http.post(...)
請求。 這樣,您無需重新加載頁面即可收到響應並顯示成功消息。
如果您想走這條路線,建議您為每個字段添加一個ng-model="params.fieldName"
屬性(只需更改fieldName
以匹配傳遞給PHP表單的值)。 然后在您的控制器中,您可以執行以下操作:
$scope.handleFormSubmit = function (params) {
$http.post('action.php', params).success(function (data, status) {
if (data.success) {
$window.alert("Thank you! Your message has been sent.");
}
}).error(function (data, status) {
$window.alert("Sorry, there was a problem! " + data.message);
});
};
然后,在您的<form ...>
標記中,您可以執行以下操作:
<form ng-submit="handleFormSubmit(params)" ...>
然后,在您的PHP腳本中,您只需要輸出一個JSON對象,並帶有要傳遞給AngularJS的變量。
<?php echo json_encode({success: false, message: "Couldn't send email"}); ?>
理想情況下,不是使用$window.alert(...)
而是顯示某種內聯消息。 如果成功發送了表單,您也可以隱藏它,以防止用戶再次發送它。 您還應該在發送表單時使用“提交”按鈕將其禁用,以使它不能被多次單擊。
另外,您可以返回狀態代碼,而不是從PHP返回值:
<?php http_response_code(400); ?>
如果它在200范圍內,它將激活.success(...)
回調。 如果在400范圍內,它將激活.error(...)
回調。 您可以檢查每個狀態碼的含義 。
要提交,您可以單擊ng
<input type="text" size="40" ng-model="email"><br>
<input type="text" size="40" ng-model="msg"><br>
<button type="submit" ng-disabled="mealForm.$invalid" ng-click="SendEmail()" value="Submit" class="btn btn-default">Submit</button>
接下來,您需要發送一個http帖子
$scope.SendEmail= function () {
var request = $http({
method: "post",
url: window.location.href + "send.php",
data: {
email: $scope.email,
msg: $scope.msg
},
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
document.getElementById("message").textContent = "You send email successfully "+data;
});
}
在Send.php中
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
@$email= $request->email;
@$msg = $request->msg;
// all code for send email and next you can return a value if email is sending, with return "Msg is Sending", and you can capture it in request.success
PD:對於從Php到Javascript的return value;
僅使用return value;
接下來你可以在
request.success(function (data) {... where data=value;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.