Easy form submission

Siva Kishore G

Posted : 11 Dec 2021
Modified : 06 Jun 2022

Beginner Developers

Sign up form

Most of the time website developers don't concentrate on easy and the most trivial things but instead build up a complex code. Learning these inbuilt functionalities can reduce your coding time and increase the efficiency. So, here is a simple signup form to show it in action.

The beauty of this form is, the data is sent to the server as a JSON object. Whether your database is MongoDB or DynamoDB, this will help you maintain a clean code throughout your build.

* Requires JQuery

    <div id="signupForm" class="card p-4">
  <h1 class="h4 mt-2 mb-4">Sign up</h1>
  <form onsubmit="event.preventDefault();signup(this)">
      <div class="form-floating  mt-1 mb-3">
        <input type="text" class="form-control" id="firstName" name="firstname" placeholder="First name"  required />
        <label for="firstName">First Name</label>
      </div>
      <div class="form-floating  mt-3 mb-3">
        <input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last name"  required />
        <label for="lastName">Last Name</label>
      </div>
      <div class="form-floating  mt-3 mb-3">
        <input type="email" class="form-control" id="emailId" name="userid" placeholder="name@example.com"  required />
        <label for="emailId">Email address</label>
      </div>
      <div class="form-floating mt-3 mb-3">
        <input type="password" class="form-control" id="floatingPassword" name="password" autocomplete="current-password" placeholder="Password" required />
        <label for="floatingPassword">Password</label>
      </div>
      <div class="form-floating mt-3 mb-3">
        <input type="password" class="form-control" id="confirmPassword" name="confirm" autocomplete="current-password" placeholder="Confirm Password" required />
        <label for="confirmPassword">Confirm Password</label>
      </div>
      <button class="w-100 btn btn-lg btn-primary mt-2 mb-2" type="submit">Register</button>
    </form>
    <div class="text-center pb-2 pt-2">
      <a href="/login">Already Signed up? Login</a><br />
    </div>
</div>

    function arrayToObject(arr){
  var obj = {}
  arr.forEach(({name,value})=>{
    obj[name] = value
  })
  return obj
}

function ajaxer(url, data, cb) {
  // Show loading screen
  $.ajax({
    url: url,
    type: 'post',
    cache: false,
    data: data,
    success: function(result){
      // Hide loading screen
      cb(result)
    },
    error: function(err){
      // Hide loading screen
      console.log("Error")
      cb(null)
    }
  })
}

function signup(e){
  var serialArray = $(e).serializeArray()
  var data = arrayToObject(serialArray)
  // Stop form submit if password mismatch
  if(data.confirm !== data.password) return console.log("password mismatch")
  delete data.confirm

  ajaxer('/signup',data, (result)=>{
    if(result === null) return
    window.location.replace('/admin') // redirect the page to a protected page
  })
}