How can I get all a form's values that would be submitted without submitting [duplicate]

Answer 1

For those who don't use jQuery, below is my vanilla JavaScript function to create a form data object that can be accessed like any common object, unlike new FormData(form).

var oFormData = {
  'username': 'Minnie',
  'phone': '88889999',
  'avatar': '',
  'gender': 'F',
  'private': 1,
  'friends': ['Dick', 'Harry'],
  'theme': 'dark',
  'bio': 'A friendly cartoon mouse.'
};

function isObject(arg) {
  return Object.prototype.toString.call(arg)==='[object Object]';
}

function formDataToObject(elForm) {
  if (!elForm instanceof Element) return;
  var fields = elForm.querySelectorAll('input, select, textarea'),
    o = {};
  for (var i=0, imax=fields.length; i-1) el.options[j].selected = true;
          }
        }
        break;
      default:
        if (el instanceof NodeList) {
          for (var j=0, jmax=el.length; j

form {
  border: 1px solid #000;
}

tr {
  vertical-align: top;
}

  

    

      
Username:
      

    
    

      
Phone:
      

    
    

      
Avatar:
      

    
    

      
Gender:
      

         Male

         Female
      
    
    

      
Private:
      

    
    

      
Friends:
      

        
          Dick
          Harry
        
      
    
    

      
Theme:
      

        
          -- Select --
          Dark
          Light
        
      
    
    

      
Bio:
      

    
    

      

        
        Cancel
      
    
  


  Convert to Object
  Populate Form

You can also play around with it in this pen: http://codepen.io/thdoan/pen/EyawvR

UPDATE: I also added a function to populate the form with the object returned by formDataToObject().