Superfan Newsletter-Anmeldung

by Jeannette Holz

HTML

<script src="bootstrap.min.css "></script>
<script src="jquery-1.11.0.min.js"></script>
<div ng-controller="mainController">
<form name="myform" action="https://www.xcampaign.ch/dispatcher/service" method="post">
	<input type="hidden" name="ac" value="reg">
	<input type="hidden" name="clientCode" value="110309153457500479">
	<input type="hidden" name="doubleOptin" value="1">
	<input type="hidden" name="doubleOptin" value="2">
	<input type="hidden" name="doubleOptin" value="-1">
	<input type="hidden" name="trackId" value="null">
	<input type="hidden" name="gotoUrl" value="http://swisslife-news.ch//jsp/nologin/ProcessRegForm.jsp">
	<input type="hidden" name="gotoErrorUrl" value="http://www.swisslife.ch/content/internet/ch/de/home/service/kontakt/newsletter/error.html">
	<input type="hidden" name="gotoConfirmationUrl" value="http://www.swisslife.ch/content/internet/ch/de/home/service/kontakt/newsletter/danke.html">
	<input type="hidden" name="xp_sendBackParams" value="0">
	<input type="hidden" name="xp_redirectLP" value="0">
	<input type="hidden" name="Sprache" value="D">
	<input type="hidden" name="Superfan_Newsletter" value="1">
        
<label for="EMail">E-Mail Adresse*</label>
        <input type="email" name="EMail" ng-model="EMail" ng-class="{fail:!myForm.EMail.$valid}" required /><br />
        
        <label for="Anrede">Anrede*</label>
        <select type="text" name="Anrede" ng-class="{fail:!myForm.Anrede.$valid}" ng-model="Anrede" required /><option value="#DEL#">nicht ausgewählt</option><option value="Frau">Frau</option><option value="Herr">Herr</option></select><br />
        
        <label for="Vorname">Vorname</label>
        <input type="text" name="Vorname" ng-model="Vorname" required autofocus/><br />    
        <label for="Nachname">Nachname*</label>
        <input type="text" name="Nachname" ng-class="{fail:!myForm.Nachname.$valid}" ng-model="Nachname" required /><br />
        
         <label for="Geburtsdatum">Geburtsdatum*</label>
      ...

CSS

.fail{
    border:2px solid red !important;
}

.debugger{
    display:block;
    margin-top: 40px;
    padding:10px;
    color: silver;
    font-size: 0.8em;
}

label{
    display: inline-block;
    width: 250px;
}

input[type=text], input[type=email], select[type=text] {
    width: 200px;
}

input[type=submit]{
    margin-top:2px;
    width: 154px;
}

div.section{
    display: block;
    vertical-align:top;
}
div.section label{
    float: left;
}

div.section span{
    display: inline-block;
    width: 250px;
    margin-left: 2px;
    border: 2px solid white;
}

body{
    font-family: calibri;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('mainController', function($scope) {
    $scope.abonnements = [
        { id:'vwl_ausblick', label : 'Volkswirtschaftlicher Ausblick', value : '1' }, 
        { id:'financial_outlook', label : 'Finanzmarktausblick', value : '0' },
    ]    
        
    $scope.validate = function () {
        var totalabonnements = 0;
        for (var x in $scope.abonnements) {
            totalabonnements += parseInt($scope.abonnements[x].value);
        }
        if( totalabonnements == 0 ){
            $scope.abonnement = '';
        } else {
            $scope.abonnement = totalabonnements;
        }
    };
    $scope.validate();
        
});