JQuery get data from form code example

Example 1: jquery get form data

$('form').serializeArray()
// gives 
// 	[ {"name":"foo","value":"1"},
//  {"name":"bar","value":"xxx"},
//  {"name":"this","value":"hi"} ]


// or 

$('form').serialize() // gives : "foo=1&bar=xxx&this=hi"

Example 2: javascript get form data

<html>
    <form id="myForm">
        <input type="text" name="email" value="[email protected]">
    </form>
    <p id='text'></p>

    <script>
        window.setInterval(()=>{
            var myForm = document.getElementById('myForm');
            var text = document.getElementById('text');

            text.innerText = myForm.elements['email'].value;
        }, 1);
    </script>
</html>

Example 3: jquery form data

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

Example 4: get form data as object jquery

var paramObj = {};
$.each($('#myForm').serializeArray(), function(_, kv) {
  if (paramObj.hasOwnProperty(kv.name)) {
    paramObj[kv.name] = $.makeArray(paramObj[kv.name]);
    paramObj[kv.name].push(kv.value);
  }
  else {
    paramObj[kv.name] = kv.value;
  }
});

Tags:

Javascript Example

Related