My form data is not being submitted via JQuery code -

following jquery script code in body tag.

<script type="text/javascript">     $("#submit-data").click(function()         {             var form = new formdata($('#patient-personal')[0]);             console.log(form);         }); </script> 

following html code:

<form id="patient-personal" onsubmit="return false;" role="form"> <div class="form-body">     <div class="row">         {{-- form start --}}         {{-- first name --}}         <div class="col-md-4">             <div class="form-group form-md-line-input form-md-floating-label">                 <input type="text" class="form-control" name="firstname" id="firstname">                 <label for="firstname">first name</label>                 <span class="help-block">patient's first name</span>             </div>         </div>         {{-- last name --}}         <div class="col-md-4">             <div class="form-group form-md-line-input form-md-floating-label">                 <input type="text" class="form-control" name="lastname" id="lastname">                 <label for="lastname">last name</label>                 <span class="help-block">patient's last name</span>             </div>         </div>         {{-- date of birth --}}         <div class="col-md-4">             <div class="form-group form-md-line-input form-md-floating-label">                 <input type="date" class="form-control" name="dob" id="dob">                 {{-- <label for="dob">date of birth</label> --}}                 <span class="help-block">patient's date of birth</span>             </div>         </div>     </div> </div> <a href="javascript:;" id="submit-data" class="btn green button-submit"> submit</a> </form> 

when ever click on submit button shows no values in form variable. shows blank array. may reason behind it?

try snip:

$('#patient-personal').serialize();