handle Forms without PageRefresh

#javascript #php #html #programming

you only need a few lines of code

First, let's build the HTML file with a simple form...

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=UTF-8>
  <title>FetchData</title>
  <link rel=stylesheet 
   href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
  <form>
    <div class=container>
      <h2>Fetch Data</h2>
      <div class=grid>
        <input type=hidden 
            name=dbid value='10'>
        <label>First name
          <input type=text name=firstname 
            placeholder="first name"  required>
        </label>
        <label>Last name
          <input type=text name=lastname 
            placeholder="last name" required>
        </label>
      </div>
      <label>Email address</label>
        <input type=email name=email 
          placeholder="email address" required>
        <small>We will send your e-mail address 
               to all mail order companies, banks 
               and insurance companies 😇</small>
      <button>Send</button>
    </div>
  </form>
  <script src="fetch.js"></script>

screenshot from form:

now a few lines Vanilla JS...

document.querySelector('form')
  .addEventListener('submit', function (evt){
    evt.preventDefault()
    let reqData = new FormData(this)
    reqData.append('action', 'update')
    fetch('fetch.php', { method: 'POST', body: reqData})
    .then (r => r.json())
    .then (data=>{
      if (data.status === "OK"){  
         // make your work
         console.log(data.message)
      }
      if (data.status === "EMPTY"){  
         //make your work
        console.log(data.message)
      }
      if (data.status === "HACKER"){  
        // call secret services
        console.log(data.message)
      } 
    }).catch(error => alert(error))
    return false;
})

finally some PHP...

<?php
function jsonOut($myMessage){
    header('Content-Type: application/json');
    echo json_encode($myMessage);
    exit;
}
function checkRequest($requestArray, $arrayKeys){
  foreach ($arrayKeys as $key){
    if (!isset($requestArray[$key])){
      JsonOut(['status' => 'HACKER',
      'message' => 'someone is trying to manipulate']);
    }
    if ($requestArray[$key] == ''){
      JsonOut(['status' => 'EMPTY', 'field' => $key, 
      'message' => 'please fill in correctly']);
    }
  }
  return true;
}
$action = $_POST['action'] ?? "";    
if ($action === 'update'){
  $myRequestKeys = array('dbid', 'firstname', 'lastname', 'email');
  if(checkRequest($_POST, $myRequestKeys)) {
    //make your work...
    JsonOut(['status' => 'OK','message' => 'everything OK']);
  }
}

Done...

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.