<div class="container">
  <form method="post" id="userForm" onSubmit="return false;">
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <label>User</label>
          <input type="text" name="user" id="user" class="form-control" data-user="zaid" data-user-id="1">
        </div>
        <div class="form-group">
          <label>Email</label>
          <input type="email" name="email" id="email" class="form-control" data-user-id="1" data-email="zaid@learncodeweb.com">
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-group">
          <label>City</label>
          <select name="city" id="city" class="form-control">
            <option value="">Select</option>
            <option value="city1" data-city="1">City 1</option>
            <option value="city2" data-city="2">City 2</option>
            <option value="city3" data-city="3" selected>City 3</option>
            <option value="city4" data-city="4">City 4</option>
          </select>
        </div>
        <div class="form-group">
          <label>State</label>
          <select name="state" id="state" class="form-control">
            <option value="">Select</option>
            <option value="state1" data-state="1">State 1</option>
            <option value="state2" data-state="2" selected>State 2</option>
            <option value="state3" data-state="3">State 3</option>
            <option value="state4" data-state="4">State 4</option>
          </select>
        </div>
      </div>
    </div>
    <div class="form-group">
      <input type="submit" name="submit" value="Submit" class="btn btn-primary">
    </div>
  </form>
  <div class="bg-light p-2">
    <h2>Click on submit to show <strong>Result</strong></h2>
    <div id="log"></div>
  </div>
</div>

$(document).ready(function(e) {
  
  $('#user').attr('userName','Test'); //Set attribute
  var user  = $('#user').attr('userName'); //Get Attribute
  console.log(user);
  
  $('#userForm').on("submit",function(){
    var user  = $('#user').attr('data-user');
    var userId  = $('#user').attr('data-user-id');
    console.log(user+' '+userId);
    
    var user  = $('#user').attr('data-user');
    console.log(user);
    
    var data  = $('#email').data();
    console.log(data);
    
    var city  = $('#city option:selected').data();
    console.log(city);
    
    var state = $('#state option:selected').attr('data-state');
    console.log(state);
    
    var fData = $(this).serialize();
        console.log(fData);
    
  });
  
var old = console.log;
var logger = document.getElementById('log');
console.log = function (message) {
  if (typeof message == 'object') {
    logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + ' <br />';
  } else {
    logger.innerHTML += message + '<br />';
  }
}

  
});