{!-- /** * JCOGS OTP Pro - Pattern 3b: AJAX Inline Replacement (Custom Implementation) * =========================================================================== * * Advanced demonstration of custom AJAX login with inline form replacement. * Shows how to build your own AJAX implementation where the form replaces * itself with OTP entry fields when required. No modal overlay. * * Features: * - AJAX form submission (no page reload) * - Inline form replacement (login → OTP in same container) * - Custom form handling and state management * - Error handling and loading states * - Remember device option * - Back button returns to login form * * Template Group: jcogs_otp_pro_examples * Default Success URL: /jcogs_otp_pro_examples/user_otp_settings * Requires: ajax-helpers.js from add-on themes directory * CSS/JS Path: __CSS_JS_PATH__ (replaced during installation) * Note: Inline JavaScript demonstrates custom AJAX implementation * * @category ExpressionEngine Template * @package JCOGS OTP Pro * @author JCOGS Design * @copyright 2026 JCOGS Design * @license https://jcogs.net/add-ons/license/jcogs_otp_pro * @version 2.0.4 * @link https://JCOGS.net/ */ --} Pattern 3b: AJAX In-Place - JCOGS OTP Pro

Pattern 3b: AJAX In-Place Replacement

AJAX login with form content replaced inline when OTP is required. Single-page feel without modal.

← Back to Examples Index

Sign In to Your Account

Forgot password? • Create account

Implementation Notes

  • Seamless Transition: Form content replaced inline, no modal overlay
  • AJAX-Based: Requires JavaScript and AJAX helper library
  • Simpler Than Modal: Easier to implement, better for mobile
  • Single Container: OTP form replaces login form in same space
  • Best For: Mobile apps, simpler UX, progressive web apps
  • Requires: otp-ajax-helpers.js library