sanesai · August 9, 2020 09:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css"
        integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
 </head>
 <style>
    .centered {
        margin: 0 auto;
        width: 50%;
    }

    html,
    button,
    input,
    select,
    textarea,
    .pure-g [class *="pure-u"] {
        font-family: Arial, Helvetica, sans-serif;
    }
 </style>

 <body>
    <div class="centered">
        <div id="loader"
            style="display: none; width: 100%; height: 100%; top: 100px; left: 0px; position: fixed; z-index: 10000; text-align: center;">
            <img src="https://i.gifer.com/ZKZg.gif" width="45" height="45" alt="Loading..."
                style="position: fixed; top: 50%; left: 50%;" />
        </div>
        <form class="pure-form pure-form-aligned" id="jobForm">
            <fieldset>
                <legend>Job application form</legend>
                <div class="pure-control-group">
                    <label for="name">Name:</label>
                    <input required="" type="text" id="name">
                </div>
                <div class="pure-control-group">
                    <label for="email">Email:</label>
                    <input required="" type="email" id="email">
                </div>
                <div class="pure-control-group">
                    <label for="resume">Resume URL:</label>
                    <input required="" type="text" id="resume">
                </div>
                <div class="pure-control-group">
                    <label for="phone">Phone</label>
                    <input placeholder="optional" type="text" id="phone">
                </div>
                <div class="pure-control-group">
                    <label for="github">Github</label>
                    <input placeholder="optional" type="text" id="github">
                </div>
                <div class="pure-control-group">
                    <label for="twitter">Twitter</label>
                    <input placeholder="optional" type="text" id="twitter">
                </div>
                <div class="pure-control-group">
                    <label for="web">Website</label>
                    <input placeholder="optional" type="text" id="web">
                </div>
                <div class="pure-control-group">
                    <label for="loc">Location</label>
                    <input placeholder="optional" type="text" id="loc">
                </div>
                <div class="pure-control-group">
                    <label for="candy">Favorite Candy</label>
                    <input placeholder="optional" type="text" id="candy">
                </div>
                <div class="pure-control-group">
                    <label for="power">Superpower</label>
                    <input placeholder="optional" type="text" id="power">
                </div>
                <div class="pure-controls">
                    <button type="submit" class="pure-button pure-button-primary">Submit</button>
                </div>
            </fieldset>
        </form>
    </div>
    <script>
        $("#jobForm").submit(function (event) {
            event.preventDefault();
            $('#loader').show();
            var url = "https://contact.plaid.com/jobs";
            var data = JSON.stringify({
                "name": $("#name").val(),
                "email": $("#email").val(),
                "resume": $("#resume").val(),
                "phone": $("#phone").val(),
                "github": $("#github").val(),
                "twitter": $("#twitter").val(),
                "website": $("#web").val(),
                "location": $("#loc").val(),
                "favorite_candy": $("#candy").val(),
                "superpower": $("#power").val()
            });
            console.log(data);
            var posting = $.post(url, data);
            posting.done(function (msg) {
                $('#loader').hide();
                console.log(msg);
                if (msg.hasOwnProperty('errorMessage')) {
                    alert(msg.errorMessage);
                } else {
                    alert(msg);
                }
            });
        });
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css"
	integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
	</head>
	<style>
	.centered {
	margin: 0 auto;
	width: 50%;
	}

	html,
	button,
	input,
	select,
	textarea,
	.pure-g [class *="pure-u"] {
	font-family: Arial, Helvetica, sans-serif;
	}
	</style>

	<body>
	<div class="centered">
	<div id="loader"
	style="display: none; width: 100%; height: 100%; top: 100px; left: 0px; position: fixed; z-index: 10000; text-align: center;">
	<img src="https://i.gifer.com/ZKZg.gif" width="45" height="45" alt="Loading..."
	style="position: fixed; top: 50%; left: 50%;" />
	</div>
	<form class="pure-form pure-form-aligned" id="jobForm">
	<fieldset>
	<legend>Job application form</legend>
	<div class="pure-control-group">
	<label for="name">Name:</label>
	<input required="" type="text" id="name">
	</div>
	<div class="pure-control-group">
	<label for="email">Email:</label>
	<input required="" type="email" id="email">
	</div>
	<div class="pure-control-group">
	<label for="resume">Resume URL:</label>
	<input required="" type="text" id="resume">
	</div>
	<div class="pure-control-group">
	<label for="phone">Phone</label>
	<input placeholder="optional" type="text" id="phone">
	</div>
	<div class="pure-control-group">
	<label for="github">Github</label>
	<input placeholder="optional" type="text" id="github">
	</div>
	<div class="pure-control-group">
	<label for="twitter">Twitter</label>
	<input placeholder="optional" type="text" id="twitter">
	</div>
	<div class="pure-control-group">
	<label for="web">Website</label>
	<input placeholder="optional" type="text" id="web">
	</div>
	<div class="pure-control-group">
	<label for="loc">Location</label>
	<input placeholder="optional" type="text" id="loc">
	</div>
	<div class="pure-control-group">
	<label for="candy">Favorite Candy</label>
	<input placeholder="optional" type="text" id="candy">
	</div>
	<div class="pure-control-group">
	<label for="power">Superpower</label>
	<input placeholder="optional" type="text" id="power">
	</div>
	<div class="pure-controls">
	<button type="submit" class="pure-button pure-button-primary">Submit</button>
	</div>
	</fieldset>
	</form>
	</div>
	<script>
	$("#jobForm").submit(function (event) {
	event.preventDefault();
	$('#loader').show();
	var url = "https://contact.plaid.com/jobs";
	var data = JSON.stringify({
	"name": $("#name").val(),
	"email": $("#email").val(),
	"resume": $("#resume").val(),
	"phone": $("#phone").val(),
	"github": $("#github").val(),
	"twitter": $("#twitter").val(),
	"website": $("#web").val(),
	"location": $("#loc").val(),
	"favorite_candy": $("#candy").val(),
	"superpower": $("#power").val()
	});
	console.log(data);
	var posting = $.post(url, data);
	posting.done(function (msg) {
	$('#loader').hide();
	console.log(msg);
	if (msg.hasOwnProperty('errorMessage')) {
	alert(msg.errorMessage);
	} else {
	alert(msg);
	}
	});
	});
	</script>
	</body>

	</html>