js+php+html_complete_contact_form

js+php+html_complete_contact_form

/-----------------FORM--------------------------------------------------------------------------------------------------

<div id="form-content">
			
			<form method="post" id="reg-form" autocomplete="off" onsubmit="document.getElementById('myButton').disabled=true; document.getElementById('myButton').value='Submitting, please wait...';"; >
				
				<div class="form-group">
					<input type="text" class="form-control" name="txt_fullname" id="lname" placeholder="Full Name" required />
				</div>
				
				<div class="form-group">
					<input type="email" class="form-control" name="txt_email" id="lname" placeholder="Your Mail" required />
				</div>
				<!--here i defined the telephone pattern in UK by 10 digits--->
				<div class="form-group">
						<input type="tel" pattern="^\d{10}$" class="form-control" name="txt_phone" id="lname" placeholder="Contact No" title="Enter the phone nr from 10 digits" required />
				</div>
				
				<div class="form-group">
					<textarea type="text" class="form-control" name="txt_message" id="lname" placeholder="Message" required /></textarea>
				</div>
				
				<hr />
				
				<div class="form-group">
					<input type="submit" class="btn btn-primary" id="myButton" value="Submit" />
				</div>
				
			</form>
            
            </div>
/-------------------------------------------------------------------------------------------------------------------
------------SCRIPT----------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------/
<script type="text/javascript">
$(document).ready(function() {	
	
	// submit form using $.ajax() method
	
	$('#reg-form').submit(function(e){
		// disable the submit button
	document.getElementById("myButton").innnerHTML=
   "Sending....";
		e.preventDefault(); // Prevent Default Submission
	


	
		$.ajax({
			url: 'submit.php',
			type: 'POST',
			data: $(this).serialize() // it will serialize the form data
		})
		.done(function(data){
			$('#form-content').fadeOut('fast', function(){
				$('#form-content').fadeIn('fast').html(data);
			});
		})
		.fail(function(){
			alert('Ajax Submit Failed ...');	
		});
		});	
		});	
		</script>

		/-------------------------------------------------------------------------------------------------------------------
-----------SEND.PHP----------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------/
	
<?php

if( $_POST ){
	
	$name = $_POST['txt_fullname'];
	$email = $_POST['txt_email'];
	$phone = $_POST['txt_phone'];
	$message = $_POST['txt_message'];
	
	//prepair greetings
	$greetings = "You've received a message";
	// prepare email subject text
	$subject .= "Name: ";
	$subject .= $name;
	$subject .= "\n";
	 
	$subject .= "Email: ";
	$subject .= $email;
	$subject .= "\n";
	
	$subject .= "Phone: ";
	$subject .= $phone;
	$subject .= "\n";	
	
	$subject .= "Message: ";
	$subject .= $message;
	$subject .= "\n";
	mail("[email protected]",$greetings, $subject);
	?>
    
    <table class="table table-striped" border="0">
    
    <tr>
    <td colspan="2">
    	<div class="alert alert-info">
    		<strong>Success</strong>, Form Submitted Successfully...
    	</div>
    </td>
    </tr>
    
    <tr>
    <td>Full Name</td>
    <td><?php echo $name ?></td>
    </tr>
    
    
    <tr>
    <td>Your eMail</td>
    <td><?php echo $email; ?></td>
    </tr>
    
    <tr>
    <td>Contact No</td>
    <td><?php echo $phone; ?></td>
    </tr>
    
    </table>
    <?php
	
}