JSFiddle - React, Tailwind, and code Playground

by 2Charlie Lo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<form data-abide id="frmComment">
	<div class="row">
		<div class="large-12 medium-12 columns">
			<div class="row" data-equalizer>
				<div class="large-4 medium-4 columns">
					<div class="row">
						<div class="large-12 columns">
							<label>
								<input type="text" placeholder="Name" name="name" required>
							</label>
							<small class="error">Name is required and must be a string.</small>
						</div>
					</div>
					<div class="row">
						<div class="large-12 columns">
							<label>
								<input type="text" placeholder="Email" name="mailfrom" required pattern='.*@.*\..{3}|.*@.*\..{2}'>
							</label>
							<small class="error">An email address is required.</small>
						</div>
					</div>
					<div class="row">
						<div class="large-12 columns">
							<div class="g-recaptcha" data-sitekey="6LfjNwITABCDPbDHdC5wx6HXRmXtqO3pgUItl-E"></div>
							<noscript>
								<div style="width: auto; height: 462px;">
									<div style="width: auto; height: 422px; position: relative;">
										<div style="width: auto; height: 422px; position: absolute;">
											<iframe src="https://www.google.com/recaptcha/api/fallback?k=6LfjNwITABCDPbDHdC5wx6HXRmXtqO3pgUItl-E" frameborder="0" scrolling="no" >
											</iframe>
										</div>
									</div>
									<div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: ##f9f9f9; border: 1px solid ##c1c1c1; border-radius: 3px; height: 100px; width: 300px;">
										<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 280px; height: 80px; border: 1px solid ##c1c1c1; margin: 10px; padding: 0px; resize: none;"></textarea>
									</div>													
								</div>
								<br /><br />											 
							</noscript>
						</div>
					</div>
				</div>
				<div class="large-8 medium-8 columns">
					<div...

JavaScript

$(function(){
		$("##frmComment##").submit(function(event){
			event.preventDefault();				
			$("##submitResponse").append('<img src="http://st2.india.com/wp-content/uploads/2014/07/ajax-loader.gif" class="progressGif">');
			
			
			// Cache $form, we'll use that selector more than once
    		var $form=$(this);
			
			var data = $form.serialize(); //get all the data of form
			
			//post it
			$.post(
				"/customcf/kB/proxyPost-KB.cfm",
				data,
				function(response){
					// Success callback.  Remove your progress gif, eg:
            		// $('body').removeClass('in-progress');
            		
            		$form.fadeOut('slow', function(){
            			// Remove the spining gif from the div
            			$("##submitResponse img:last-child").remove();
            			//Add response text to the div
            			$("##submitResponse").append("<h6>Thank you for your feedback.</h6>");
                		$("##submitResponse").html(response).fadeIn('slow');
            		});
				});
				
				
			});
		})