<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form id="form"> <div class="form-group"> <label class="col-form-label" for="Name">Name</label> <input type="text" class="form-control" id="Name" placeholder="Name"> </div> <div class="form-group"> <label class="col-form-label" for="DisplayName">Display Name</label> <input type="text" class="form-control" id="DisplayName" placeholder="Display Name"> </div> <div class="form-group"> <label class="mr-sm-2" for="position">Position</label> <select class="form-control mb-2 mr-sm-2 mb-sm-0" id="position"> <option selected>Choose...</option> <option value="1">Product Head</option> <option value="2">General Manager</option> <option value="3">Product Manager</option> <option value="4">Team Lead</option> </select> </div> <div class="form-group"> <label class="col-form-label" for="Password">Password</label> <input type="password" class="form-control" id="Password" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Register</button> </form>

$("form").submit(function(e) { e.preventDefault(); let account = {}; $.each($("form").serializeArray(), function(i, field) { account[field.name] = field.value; }); console.log(JSON.stringify(account)); });