Sir Sheep Sir Sheep - 1 year ago 77
CSS Question

AngularJS not working with a regular form

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" >
<meta charset = "UTF-8">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="">
<link href="" rel="stylesheet">

/*Centers the main Login box*/
margin-left: auto;
margin-right: auto;
width: 50%;

/*Centers the introduction Text*/
text-align: center;
font-family: 'Fira Sans', sans-serif;

/*modifies the checkbox*/
padding-top: 1em;
font-family: 'Roboto', sans-serif;

/*Centers the headline*/
text-align: center;


<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)
//title of the pop up alert box
.title('Thank You!')
//The dialog that comes up on the alert box
.ariaLabel('Thank You')
//The close button for the alert box

Body Part

<body ng-app="signIn" ng-controller="inputController">
<div id="title" class="introText">
<h1> Sign-In </h1>

<div id="inputContainer" class="completeCard" ng-controller="inputController as ctrl" ng-cloak>
<md-content layout-padding>
<span class="md-headline">Login</span>

<form method="post" name="projectForm">
<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>
<md-input-container class="md-block">
<md-tooltip>First and Last Name</md-tooltip>
<input required name="name" type="text" ng-model="" value="$${name}">
<div ng-messages="$error">
<div ng-message="required">This is required.</div>

<md-input-container class="md-block">
<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="$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.

<md-tooltip>All Majors are in Alphabetical Order</md-tooltip>
<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-checkbox class="green" name = "add_s" value=$${sec_checked}>
Join Mailing List

<!-- <md-card-actions layout="row" layout-align="end center"> -->
<input type="submit" value="Submit"/>
<div style="color:red; font-size:20pt"> $${response}</div>
<!-- <md-button type="submit" class="submitButton" ng-click="showAlert($event)">Submit</md-button> -->
<!-- </md-card-actions> -->
<div class="md-media-lg card-media"></div>


Here's what works without the AngularJS Materials

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<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/>

Answer Source

You form needs an action

<form method="post" name="projectForm" action="urlOfYourPythonScript">

or you will need to do a http post inside your click handler.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download