cantpickup/phone_input.html at master · jenkliu/cantpickup · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
	<head>
		<!-- # ajax for submitting phone input form -->
		<link type="text/css" rel="stylesheet" href="/stylesheets/main.css">
		<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700' rel='stylesheet' type='text/css'>
		<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
		<script>
			$(document).on('submit', 'form.phone_input', function(evt){
				evt.preventDefault();
				// TODO: CHECK IF PHONE NUMBER IS 10 DIGITS
				$.ajax({
					url: $(this).attr('action'),
					type: $(this).attr('method'),
					data: $(this).serialize(),
					success: function() {
						$(".conf_input").show();
					}
				});
			});
			$(document).on('submit', 'form.conf_input', function(evt){
				$.ajax({
					url: $(this).attr('action'),
					type: $(this).attr('method'),
					data: $(this).serialize(),
					success: function(json) {
						if (json) {
							console.log(json);
							$(".error").show();
						} else {
							// redirect to next page
							location.href = "/create";
						}
					}
				});
				evt.preventDefault();
			});

		</script>

	</head>
        <body style="background-color:#2d4174;">
		<div class="main">
			<h1 style="text-align:center;color:white;font-size:20px;font-weight:normal;">
				<img src="/stylesheets/ttthmlogo.jpg" width="550" height="275">
			<br/>
			<br/>
			<form class="phone_input" action="" method="POST">
				<label >
					<input type="text" name="phone_no" placeholder="Enter your phone number"/>
					<button>Go</button>
				</label>
				<h2 class="helper">Can I have it?</h2>
			</form>
		</h1>
		<h1 style="text-align:center;color:white;font-size:20px;font-weight:normal;">
			<form class="conf_input" action="/confirm_code" method="POST">
				<label><span class="helper text">Check your texts for a verification code. </span><br/>
					<input type="text" name="conf" placeholder="Enter that code"/>
					<button>Go</button>
				</label>
				<br/>
				<div class="error">
					Whoops, that was the wrong code. Please try again.
				</div>
			</form>
		</h1>
		</div>
	</body>
</html>