Hi my question is about the following i'm using the select tag in my form, but the value does not get passed on to the email that gets send out.
I've created an app using PHPMAILER and have added the select tag with options included. whenever I hit send I get the following error:
Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"contact-form.php","data":"inputPrice=1%20%2F%202%20hour%20%3D%2020%2C-&inputGuests=1&inputDate=Mon%20Feb%2003%201992%2010%3A10%3A00%20GMT%2B0100%20(Central%20European%20Standard%20Time)&inputMessage=Mon%20Feb%2003%201992%2010%3A10%3A00%20GMT%2B0100%20(Central%20European%20Standard%20Time)&inputName=Salman%20Mohamed&inputEmail=salmannova%40gmail.com&inputNumber=620438661","headers":{"Content-Type":"application/x-www-form-urlencoded","Accept":"application/json, text/plain, */*"}},"statusText":"","xhrStatus":"abort"}
The email does get send with all the value's added except the value from the select tag. In the error you can read that the value does get passed on, but for some reason doesn't get passed onto the email.
Does anyone know what's wrong with my code?
Select module
<select ng-model="formData.inputPrice" type="number" class="form-control inputForm fa fa-input" id="inputPrice" name="inputPrice" placeholder="How many scooters?" required>
<option value="" disabled="disabled" selected="selected">Prices</option>
<option value="1 / 2 hour = 20,-">1 / 2 hour = 20,-</option>
<option value="1 day = 30,-">1 day = 30,-</option>
<option value="2 days = 55,-">2 days = 55,</option>
<option value="3+ dagen = +20,-">3+ dagen = +20</option>
</select>
mail.html
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div ng-controller="ContactController" class="panel-body">
<form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form">
<div class="steps stepOneWhite" id="stepOne">
<div class="form-group" ng-class="{ 'has-error': contactform.inputPrice.$invalid && submitted }">
<div class="col-lg-10">
<select ng-model="formData.inputPrice" type="number" class="form-control inputForm fa fa-input" id="inputPrice" name="inputPrice" placeholder="How many scooters?" required>
<option value="" disabled="disabled" selected="selected">Prices</option>
<option value="1 / 2 hour = 20,-">1 / 2 hour = 20,-</option>
<option value="1 day = 30,-">1 day = 30,-</option>
<option value="2 days = 55,-">2 days = 55,</option>
<option value="3+ dagen = +20,-">3+ dagen = +20</option>
</select>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputGuests.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputGuests" type="number" class="form-control inputForm fa fa-input" id="inputGuests" name="inputGuests" placeholder="How many scooters?" required>
</div>
</div>
<h2>Pick up</h2>
<div class="form-group" ng-class="{ 'has-error': contactform.inputDate.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputDate" type="datetime-local" class="form-control inputForm fa fa-input" id="inputDate" name="inputDate" placeholder="Your Date" required>
</div>
</div>
<h2>Return</h2>
<div class="form-group" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputMessage" type="datetime-local" class="form-control inputForm fa fa-input" rows="4" id="inputMessage" name="inputMessage" placeholder="" required></input>
</div>
</div>
</div>
<div class="steps stepTwoWhite" id="stepTwo">
<h2>Your Information</h2>
<div class="form-group" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputName" type="text" class="form-control inputForm fa fa-input" id="inputName" name="inputName" placeholder="" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputEmail" type="email" class="form-control inputForm fa fa-input" id="inputEmail" name="inputEmail" placeholder="" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputNumber.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputNumber" type="number" class="form-control inputForm fa fa-input" id="inputNumber" name="inputNumber" placeholder="" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-primary btn-lg btn-block submitInputWhite" id="submitInput" ng-disabled="submitButtonDisabled">
Send Message
</button>
<span id="rentButton" class="btn btn-primary btn-lg btn-block rentButtonWhite" onclick="rentNowWhite()">Rent!</span>
</div>
</div>
</form>
<p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
</div>
</div>
</div>
contact-form.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once 'phpmailer/PHPMailerAutoload.php';
if (isset($_POST['inputName']) && isset($_POST['inputEmail']) && isset($_POST['inputNumber']) && isset($_POST['inputGuests']) && isset($_POST['inputDate']) && isset($_POST['inputMessage']) && isset($_POST['inputPrice'])) {
//check if any of the inputs are empty
if (empty($_POST['inputName']) || empty($_POST['inputEmail']) || empty($_POST['inputNumber']) || empty($_POST['inputGuests']) || empty($_POST['inputDate']) || empty($_POST['inputMessage']) || empty($_POST['inputPrice']) ) {
$data = array('success' => false, 'message' => 'Please fill out the form completely.');
echo json_encode($data);
exit;
}
//create an instance of PHPMailer
$mail = new PHPMailer();
$mail->From = $_POST['inputEmail'];
$mail->FromName = $_POST['inputName'];
$mail->AddAddress('salman-1992@hotmail.com'); //recipient
$mail->Subject = "Nieuwe reservering is binnengekomen";
$mail->Body = "Nieuwe reservering:". "
Naam: " . $_POST['inputName'] . "
Telefoonnummer: " . $_POST['inputNumber'] ."
Aantal Gasten: " . $_POST['inputGuests'] ."
Datum: " . $_POST['inputDate'] . $_POST['inputMessage'] . $_POST['inputPrice']);
if (isset($_POST['ref'])) {
$mail->Body .= "
Ref: " . $_POST['ref'];
}
if(!$mail->send()) {
$data = array('success' => false, 'message' => 'Message could not be sent. Mailer Error: ' . $mail->ErrorInfo);
echo json_encode($data);
exit;
}
$data = array('success' => true, 'message' => 'Thanks! We have received your message.');
echo json_encode($data);
} else {
$data = array('success' => false, 'message' => 'Please fill out the form completely.');
echo json_encode($data);
}
controller.js
app.controller('ContactController', function ($scope, $http) {
$scope.result = 'hidden'
$scope.resultMessage;
$scope.formData; //formData is an object holding the name, email, subject, and message
$scope.submitButtonDisabled = false;
$scope.submitted = false; //used so that form errors are shown only after the form has been submitted
$scope.submit = function(contactform) {
$scope.submitted = true;
$scope.submitButtonDisabled = true;
if (contactform.$valid) {
$http({
method : 'POST',
url : 'contact-form.php',
data : $.param($scope.formData), //param method from jQuery
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } //set the headers so angular passing info as form data (not request payload)
}).success(function(data){
console.log(data);
if (data.success) { //success comes from the return json object
$scope.submitButtonDisabled = true;
$scope.resultMessage = data.message;
$scope.result='bg-success';
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = data.message;
$scope.result='bg-danger';
}
});
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = 'Failed :( Please fill out all the fields.';
$scope.result='bg-danger';
}
}
});