adding other people picks

lyricsnode/routes/round.js

@@ -146,7 +146,8 @@ exports.others = function (req, res) {
         } else {
           console.log('Insert succeded');
           // things went alright
-          result.status = 'OK'
+          result.status = 'OK';
+          result.message = 'Added';
         }
 
         console.log(JSON.stringify(result));

lyricsnode/views/index.html

@@ -2,23 +2,28 @@
 
 {% macro other %}
 	<form action='/round/others/' method='POST' id='others'>
+		<!-- just to avoid bouncing around with the messages -->
+		<div data-alert class='alert-box secondary'>
+			Awaiting input...
+		</div>
+
 		<div class='row'>
 			<div class='large-12 columns'>
 				<label for='others-artist'>
 					Artist
 				</label>
-				<input type='text' placeholder='Artist' name='artist' id='others-artist'>
+				<input type='text' placeholder='Artist' name='artist'>
 			</div>
 
 			<div class='large-12 columns'>
 				<label for='others-song'>
 					Song
 				</label>
-				<input type='text' placeholder='Song' name='song' id='other-song'>
+				<input type='text' placeholder='Song' name='song'>
 			</div>
 
 			<div class='large-12 columns'>
-				<input type='submit' class='button secondary radius small' value='Add'>
+				<input type='submit' class='button secondary radius small' value='Add' disabled>
 			</div>
 		</div>
 	</form>
@@ -106,6 +111,8 @@
 {% block scripts %}
 <script>
 $('#others').on('submit', function() {
+	$('#others .alert-box').remove();
+
 	$.ajax({
 		url: '/round/others/',
 		type: 'POST',
@@ -113,9 +120,28 @@ $('#others').on('submit', function() {
 		dataType: 'json',
 		success: function (response) {
 			console.log(response);
+			$('#others input[name="artist"]').val('').change();
+			$('#others input[name="song"]').val('').change();
+
+			var message = [
+				'<div data-alert class="alert-box ',
+				response.status == 'OK'? '': 'alert',
+				' radius">',
+				response.message,
+				'</div>'
+			];
+			$('#others').prepend(message.join(''));
 		}
 	});
 	return false;
 });
+
+$('#others input[name="artist"], #others input[name="song"]').on('change', function() {
+	if ($(this).val().length > 0) {
+		$('#others input[type="submit"]').removeAttr('disabled');
+	} else {
+		$('#others input[type="submit"]').attr('disabled', true);
+	}
+});
 </script>
 {% endblock scripts %}