Twilio Phone Verification Blog Post

body.html

<form id="enter_number">
  <p>Enter your phone number:</p>
  <p><input type="text" name="phone_number" id="phone_number" /></p>
  <p><input type="submit" name="submit" value="Verify" /></p>
</form>

<div id="verify_code" style="display: none;">
  <p>Calling you now.</p>
  <p>When prompted, enter the verification code:</p>
  <h1 id="verification_code"></h1>
  <p><strong id="status">Waiting...</strong></p>
</div>

status.js

function checkStatus() {
  $.post("status.php", { phone_number : $("#phone_number").val() }, 
    function(data) { updateStatus(data.status); }, "json");
}

function updateStatus(current) {
  if (current === "unverified") {
    $("#status").append(".");
    setTimeout(checkStatus, 3000);
  }
  else {
    success(); 
  }
}

function success() {
  $("#status").text("Verified!");
}

verification.js

$(document).ready(function(){
  $("#enter_number").submit(function(e) {
    e.preventDefault();
    initiateCall();
  });
});

function initiateCall() {
  $.post("call.php", { phone_number : $("#phone_number").val() }, 
    function(data) { showCodeForm(data.verification_code); }, "json");
  checkStatus();
}

function showCodeForm(code) {
  $("#verification_code").text(code);
  $("#verify_code").fadeIn();
  $("#enter_number").fadeOut();
}