The code below is suppose to send the user data to a python script. However, the submit button nor the form does not do anything. I have tested the python script without AngularJS and it works perfectly fine.
After a bit testing I have found that if I just remove ng-app the submit button would work but not any of the AngularJS Materials (outside the md-card). So I suspect that ng-app maybe doing it.
I have also trying moving the ng-app around the script hoping for something but nothing changed.
Unfortunately I cannot post the python script since the python script is not my work.
I split the script into 2 parts in case it might be easier to read that way
Javascript, CSS, and Stuff
<html lang="en" >
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
<style>
/*Centers the main Login box*/
.completeCard
{
margin-left: auto;
margin-right: auto;
width: 50%;
}
/*Centers the introduction Text*/
.introText
{
text-align: center;
font-family: 'Fira Sans', sans-serif;
}
/*modifies the checkbox*/
.checkbox
{
padding-top: 1em;
font-family: 'Roboto', sans-serif;
}
/*Centers the headline*/
.md-headline
{
text-align: center;
}
</style>
<script language="javascript">
var app = angular.module('signIn',['ngMaterial']);
app.controller('inputController', inputController);
function inputController ($scope,$mdDialog)
{
$scope.project = {
comments: 'Comments',
};
//Creates a pop up when the user clicks the submit button
$scope.showAlert = function(ev)
{
$mdDialog.show
(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#dialogContainer')))
.clickOutsideToClose(true)
//title of the pop up alert box
.title('Thank You!')
//The dialog that comes up on the alert box
.textContent("Test")
.ariaLabel('Thank You')
//The close button for the alert box
.ok('Ok!')
.targetEvent(ev)
);
};
}
</script>
Body Part
<body ng-app="signIn" ng-controller="inputController">
<div id="title" class="introText">
<h1> Sign-In </h1>
</div>
<div id="inputContainer" class="completeCard" ng-controller="inputController as ctrl" ng-cloak>
<md-content layout-padding>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Login</span>
<form method="post" name="projectForm">
<md-input-container>
<label>Secret Key</label>
<input required name="secret" type = "text" ng-model="project.secret" value="$${secret}">
<md-tooltip>Written on a board or ask an representative</md-tooltip>
<div ng-messages ="projectForm.secret.$error">
<div ng-message = "required"> This is required </div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Name</label>
<md-tooltip>First and Last Name</md-tooltip>
<input required name="name" type="text" ng-model="project.name" value="$${name}">
<div ng-messages="projectForm.name.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Email</label>
<input required type="email" name="email" ng-model="project.userEmail"
minlength="5" maxlength="100" ng-pattern="/^.+@.+\..+$/" / value = "$${email}">
<md-tooltip>Please use your School Email</md-tooltip>
<div ng-messages="projectForm.email.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 5 and 100 characters long and should be a valid email address.
</div>
</div>
</md-input-container>
<md-input-container-select>
<md-tooltip>All Majors are in Alphabetical Order</md-tooltip>
<div>
<md-select ng-model="major" placeholder="Major" class="md-no-underline" name="major" value"$${major}">
<md-option value="n/a">Not a Student</md-option>
<md-option value="major1">Major 1</md-option>
<md-option value="major2">Major 2</md-option>
</md-select>
</div>
</md-input-container-select>
<md-checkbox class="green" name = "add_s" value=$${sec_checked}>
Join Mailing List
</md-checkbox>
<!-- <md-card-actions layout="row" layout-align="end center"> -->
<br>
<input type="submit" value="Submit"/>
<div style="color:red; font-size:20pt"> $${response}</div>
</br>
<!-- <md-button type="submit" class="submitButton" ng-click="showAlert($event)">Submit</md-button> -->
<!-- </md-card-actions> -->
</form>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-lg card-media"></div>
</md-card-title-media>
</md-card-title>
</md-card>
</md-content>
</div>
</body>
</html>
Edit
Here's what works without the AngularJS Materials
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign-in</title>
</head>
<body>
<h1>Sign-in</h1>
<form method="post">
Secret key: <input type="text" name="secret" value="$${secret}"/><br/>
Name: <input type="text" name="name" value="$${name}"/><br/>
Email: <input type="text" name="email" value="$${email}"/><br/>
Major: <input type="text" name="major" value="$${major}"/><br/>
<span style='width:300pt; float:left'>Add me to the CCDC team!</span>
<input type="checkbox" name="add_c" $${ccdc_checked}/><br/>
<span style='width:300pt; float:left'>Add me to the Cyber Defense Team mailing list!</span>
<input type="checkbox" name="add_d" $${cdt_checked}/><br/>
<span style='width:300pt; float:left'>Add me to the SIG-Sec mailing list!</span>
<input type="checkbox" name="add_s" $${sec_checked}/><br/>
<input type="submit" value="Submit"/><br/>
<div style="color:red; font-size:20pt">$${response}</div> <br/>
</form>
</body>
</html>
submitinput withshowAlertor am I missing something here ?showAlert, it is the same button I commented out that Adrian Brand was talking aboutshowAlertthen it's safe to check if you have aformhtml tag for the md-card as @AdrianBrand pointed out for the submit to actually post back to your php action