signup step mobile OTP sms verify php ajax code example

Example: signup step mobile OTP sms verify php ajax

<!-- Login & Signup -->
<div id="login" class="modal fade loginsignup" role="dialog">
    <div class="modal-dialog md-modal">
	<!-- Login box-->
	<div class="modal-content" id="loginBox">
		<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h4 class="modal-title"><img src="images/logo.png" alt="logo" width="150px"></h4>
		</div>
		<div class="register-form">
			<form action="" method="POST" id="loginform">
				<div class="form-group">
				<input type="text" class="form-control" placeholder="Enter Your Mobile..." id="login-mobile" name="mobile">
				</div>
				<div class="form-group">
				<input type="password" class="form-control" placeholder="Password" id="login-password" name="password">
				</div>
				<a href="#" class="forget-password">FORGOT PASSWORD</a>
				<button type="submit" class="btn btn-default" name="login">LOGIN HERE</button>
						
				<p class="login-alert" style="display:none;color:red;">Either password or mobile number is wrong!</p>
				<p class="login-alert1" style="display:none;color:red;">Account not activated!</p>
						
			</form>
			</div>
			<div class="modal-footer">
				<p>Not a member? <span class="signup-btn">Register</span></p>
			</div>
		</div>
			
			
			
			<!--signup box-->
			<div class="modal-content" id="signupBox">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">×</button>
					<h4 class="modal-title"><img src="images/logo.png" alt="logo" width="150px"></h4>
				</div>
		
				<div class="register-form">
					<form action="" method="POST" id="getotp">
						<div class="form-group">
							<input type="text" class="form-control" required placeholder="Enter Your Mobile..." id="mobile-otp">
						</div>
						<p class="otp-error" style="display:none;color:red;">Please enter a valid number!</p>
						<p class="otp-error1" style="display:none;color:red;">Under maintainance!</p>
						<button type="submit" class="btn" id="get-otp" name="register">Get OTP</button>
					</form>
				</div>
				<div class="modal-footer">
					<p><p>Already registered? <span class="signin-btn">LOGIN</span></p></p>
				</div>
			</div>
			
			
			<!--verify password-->
			<div class="modal-content" id="verifybox">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h4 class="modal-title"><img src="images/logo.png" alt="logo" width="150px"></h4>
				</div>
		
				<div class="register-form">
				<h3 class="text-center">ENTER OTP</h3>
					<h4 style="color:#fff; margin-bottom:10px; text-align:center; font-size:10px; " >OTP sent to <b>+91-</b><b class="verify-no"></b> <span class="signup-btn"><i class="fa fa-pencil"></i> edit</span></h4>
			<form action="" method="POST" id="getverify">
			<div class="form-group otp-list">
			<input type="hidden" class="form-control" value="" id="hid-mobile">	
			<input type="text" class="form-control" required id="verifyotp1" maxlength="1">
			<input type="text" class="form-control" required id="verifyotp2" maxlength="1">
			<input type="text" class="form-control" required id="verifyotp3" maxlength="1">
		<input type="text" class="form-control" required id="verifyotp4" maxlength="1">
			<input type="text" class="form-control" required id="verifyotp5" maxlength="1">
			<input type="text" class="form-control" required id="verifyotp6" maxlength="1">
			</div>
			<div class="clearfix"></div>
			<p class="verify-error" style="display:none;color:red;">OTP length must be in 6 digit!</p>
				<p class="verify-error1" style="display:none;color:red;">Wrong OTP!</p>
			<p class="expire-otp" style="display:none;color:red;"></p>
				<button type="submit" class="btn" id="verify-otp" name="register">Enter</button>
						
				</form>
				</div>
			</div>			
		</div>
	</div>