AngularJS controller not being used when sending a form
Question
I've created an app using AngularJS where you should have a two step reservation form (both steps within the same form). I want to send the form using PhpMailer.
Having set everything up I now want to send the mail but, when I hit the send button after filling in all the required information in the form, the web page refreshes no email gets send out.
I've put alert messages in the contactController , to know if the file gets executed at all but no alerts appear.
Now I can't seem to figure out why my contactController isn't functioning/called when called upon by the submit button.
You can see the page for yourself to confirm what I've just said is correct.
Also I'm fairly new to AngularJS and this is the second app I'm building using the platform.
HOME/INDEX.HTML
<div class="alert alert-info" role="alert">
You can also call us for any questions, or to make a reservation for your e-scooter <a href="tel:31611152220"> <i class="fas fa-phone"></i>+31611152220</a>
</div>
<div class="container" id="item-1" >
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item" id="cardLinkOne" onclick="activeCardOne(this)">
<a class="nav-link active" id="navLinkOne"><img src="assets/images/scooter-white.png" alt=""><br>Scooter White</a>
</li>
<li class="nav-item" id="cardLinkOne" onclick="activeCardTwo(this)">
<a class="nav-link" id="navLinkTwo"><img src="assets/images/scooter-black.png" alt=""><br>Scooter Black </a>
</li>
</ul>
</div>
<!-- <div class="ng-scope" ng-include="'scooterWhiteMail.html'"></div> -->
<div ng-app="contactApp" >
<div class="card-body cardView" id="cardBodyOne" ng-controller="ContactController" >
<img class="card-img-top" src="https://www.lastprice.co.il/uploadimages/MiScooter.png" alt="Card image cap">
<h5 class="card-title">Scooter White</h5>
<div class="progress">
<div class="progress-bar progress-bar-white" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<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">
<select ng-model="formData.inputSelector" id="inputSelector" name="inputSelector" type="text" class="form-control" name="scooters">
<option value="halfHour">1 / 2 hour = 20,-</option>
<option value="oneDay">1 day = 30,-</option>
<option value="twoDays">2 days = 55,</option>
<option value="threeDays">3+ dagen = +20</option>
</select>
</div>
<h2>Pick up</h2>
<input ng-model="formData.inputDateOne" id="inputDateOne" name="inputDateOne" class="date" type="date" value="2018-07-15" min="2018-01-01" max="2018-12-31">
<input ng-model="formData.inputTimeOne" id="inputTimeOne" name="inputTimeOne" class="time" type="time" value="09:45:00" required>
<h2>Return</h2>
<input ng-model="formData.inputDateTwo" id="inputDateTwo" name="inputDateTwo" class="date" type="date" value="2018-07-22" min="2018-01-01" max="2018-12-31" required>
<input ng-model="formData.inputTimeTwo" id="inputTimeTwo" name="inputTimeTwo" type="time" class="time" value="23:45:00" required>
</div>
<div class="steps stepTwoWhite" id="stepTwo">
<h2>Your Information</h2>
<div class="form-group col-lg-3 offset-lg-3" 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 col-lg-6" 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 col-lg-3 offset-lg-3" 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>
<button type="submit" id="submitInput" class="btn btn-primary btn-lg btn-block submitInputWhite" ng-disabled="submitButtonDisabled">Rent!</button>
<span id="rentButton" class="btn btn-primary btn-lg btn-block rentButtonWhite" onclick="rentNowWhite()">Rent!</span>
</form>
<!-- <p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p> -->
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="fas fa-check"></i> Insurance included</li>
<li class="list-group-item"> <i class="fas fa-check"></i> Accept credit card and cash</li>
<li class="list-group-item"> <i class="fas fa-check"></i> Available in Amsterdam</li>
</ul>
</div>
</div>
<div class="card-body" id="cardBodyTwo">
<img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/51Qtg4L%2BJmL._SX425_.jpg" alt="Card image cap">
<h5 class="card-title">Scooter Black</h5>
<div class="progress">
<div class="progress-bar progress-bar-black" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<form >
<div class="steps stepOneBlack" id="stepOne">
<div class="form-group">
<select class="form-control" name="scooters">
<option value="halfHour">1 / 2 hour = 20,-</option>
<option value="oneDay">1 day = 30,-</option>
<option value="twoDays">2 days = 55,</option>
<option value="threeDays">3+ dagen = +20</option>
</select>
</div>
<h2>Pick up</h2>
<input class="date" type="date" value="2018-07-15" min="2018-01-01" max="2018-12-31">
<input class="time" type="time" value="09:45:00">
<h2>Return</h2>
<input class="date" type="date" value="2018-07-22" min="2018-01-01" max="2018-12-31">
<input class="time" type="time" value="23:45:00">
</div>
<div class="steps stepTwoBlack" id="stepTwo">
<h2>Your Information</h2>
<div class="form-group col-lg-3 offset-lg-3" 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 col-lg-6" 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 col-lg-3 offset-lg-3" 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>
<button submitInputBlack" class="btn btn-primary btn-lg btn-block" >Rent!</button>
<span id="rentButton rentButtonBlack" class="btn btn-primary btn-lg btn-block" onclick="rentNowBlack()">Rent!</span>
</form>
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="fas fa-check"></i> Insurance included</li>
<li class="list-group-item"> <i class="fas fa-check"></i> Accept credit card and cash</li>
<li class="list-group-item"> <i class="fas fa-check"></i> Available in Amsterdam</li>
</ul>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid" id="item-2">
<div class="container">
<h1 class="display-4">About Us</h1>
<!-- <p class="lead">You can drive up to 90km with a full battery.</p> -->
</div>
</div>
<div class="container" id="item-2">
<div class="card text-center">
<!-- <div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item" id="cardLinkOne" onclick="activeCardThree(this)">
<a class="nav-link active" id="navLinkThree"><br>E City Wheels</a>
</li>
<li class="nav-item" id="cardLinkOne" onclick="activeCardFour(this)">
<a class="nav-link" id="navLinkFour"><br>Ophaalservice</a>
</li>
</ul>
</div>-->
<div class="card-body cardView" id="cardBodyThree">
<h5 class="card-title">E City Wheels</h5>
<p class="card-text">Staying a day or weekend in Amsterdam? Explore the city in a unique way with an electric three-wheeler from E City Wheels. With our unique electric tricycle we are the only one in Amsterdam that they rent out.<br>
<br>
With a battery duration that can cover a distance of up to 80 km and a maximum speed of 25 km per hour. You can visit all the nice commercials of Amsterdam in no time. Our electric three wheelers are very safe because they stabilize themselves, so you do not need a helmet or driver's license.<br>
<br>
For renting the electric three wheelers you can visit our visit address at hotel Camp Inn Amsterdam.
</p>
</div>
<!-- <div class="card-body" id="cardBodyFour" >
<h5 class="card-title">Ophaalservice</h5>
<p class="card-text">De scooters van E City Wheels staat gepubliceerd en worden aangeboden voor verhuur bij hotel Camp Inn Amsterdam. Het hotel is centraal gelegen aan alle stadsdelen en slechts 4km van het centrum. U kunt een scooter bij het hotel huren of gebruik maken van onze ophaal en bezorg service.<br><br>
Voor de verhuur van een scooter vragen wij een geldige legitimatiebewijs. Ook vragen wij een borg van 150( euro), de borg kan per pin, cash of creditcard worden voldaan. De borg ontvangt u volledig terug wanneer de scooter in dezelfde goede conditie wordt terug gebracht zoals van ons ontvangen.<br><br>
Voor de ophaal/bezorg service leveren wij ook op locatie als u zich in Amsterdam bevindt. U telefonisch een E-scooter bestellen om te huren. Aan deze service zijn extra kosten verbonden, zie tarieven.<br><br>
Bezorg en ophaal kosten E scooter in Amsterdam 25( euro).<br><br>
Wil u alleen gebruik maken van een dienst, ophalen of bezorgen deze kosten bedragen 15 ( euro)<br><br>
Willem de zwijgerlaan 350<br><br>
1055 RD Amsterdam<br><br>
<a href="">+31 6 111 522 20</a><br><br>
info@e-citywheels.com</p>
</div>-->
</div>
</div>
<div class="container" id="contactForm">
<h1>Contact us!</h1>
<p>You can send us an Email to :</p>
<a href="mailto:info@E-CityWheels.com">info@E-CityWheels.com</a>
<!-- <div ng-controller="ContactController" class="panel-body">
<form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form">
<div class="row">
<div class="form-group col-lg-3 offset-lg-3" 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 col-lg-3" 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>
<div class="row">
<div class="form-group col-lg-3 offset-lg-3" 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 class="form-group col-lg-3" 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="" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-3 offset-lg-3 form-message" 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>
<div class="form-group col-lg-9 offset-lg-2 form-message" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
<div class="col-lg-10">
<textarea ng-model="formData.inputMessage" class="form-control inputForm fa fa-input" rows="4" id="inputMessage" name="inputMessage" placeholder="" required></textarea>
</div>
</div>
<div class="form-group col-lg-9 offset-lg-3">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" id="submitInput" class="btn btn-primary btn-lg btn-block " ng-disabled="submitButtonDisabled">
Send
</button>
</div>
</div>
</div>
</form>
<p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
</div>-->
</div>
controllers.JS
app.controller('ContactController', function ($scope, $http) {
alert("starting Mail controller");
$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;
alert("Receiving Mail");
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){
alert("Send Mail");
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 {
lert("Failed sending Mail");
$scope.submitButtonDisabled = false;
$scope.resultMessage = 'Failed :( Please fill out all the fields.';
$scope.result='bg-danger';
}
}
});
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'])) {
//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'])) {
$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:". "\r\n\r\nNaam: " . $_POST['inputName'] . "\r\n\r\nTelefoonnummer: " . $_POST['inputNumber'] ."\r\n\r\nAantal Gasten: " . $_POST['inputGuests'] ."\r\n\r\nDatum: " . $_POST['inputDate'] . "\r\n\r\nBericht: " . stripslashes($_POST['inputMessage']);
if (isset($_POST['ref'])) {
$mail->Body .= "\r\n\r\nRef: " . $_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);
}
INDEX.HTML
<!doctype html>
<html ng-app="project">
<title>e-citywheels</title>
<meta name="author" content="Salman Mohamed">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="“description">
<meta name="keywords" content="scooters,electronic,electronic scooters,Amsterdam, Rotterdam, Markthal">
<head>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-resource.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-route.min.js">
</script>
<link rel="stylesheet" href="assets/styles/app.css">
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script src="assets/scripts/project.js"></script>
<script src="assets/scripts/project-list.js"></script>
<script src="assets/scripts/routes.js"></script>
<script src="assets/scripts/app.js"></script>
<script src="mail/controllers.js">
</script>
<nav class="navNav" ng-include="'shared/navigation.html'"></nav>
</head>
<body>
<div ng-view ></div>
<footer ng-include="'shared/footer.html'"></footer>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?theme=grey&always=1&showNoConsent=1"></script>
<script src="assets/scripts/scripts.js"></script>
</body>
</html>
[1]: http://lebakitchen.com/test/
1 answers
solution1
1 ACCPTED 2018-07-18 12:01:08
It doesnt seem like your controller is ever initialised, based on the code you have supplied.
Do you tell angular to run and then initialise your "app" variable; like
angular.module('contactApp', []).run(); var app = angular.module('contactApp'); app.controller('ContactController', function ($scope...
Also, are the angular, jquery and controllers.JS scripts included in the html header?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Form is not sending input field when jquery repeater is used
How to process a multi step form in controller? (When the user clicks “go to step 2” the form is not being processed in the controller)
Sending a variable to the view which is used in controller with phalconPHP
sending multiple form data form to controller in codeigniter
In php, is it better to use includes or not when a controller class is being used to talk to javascript?
how to pass form data to controller when 'document.formname.submit()' is used to submit the form
Sending a hidden input from a form to a controller in Laravel
Symfony3 Sending a Form from the Controller
form sending null value to the controller in yii2
Joomla & JS; Sending data from form to Controller
Related Tags