Serialize method of ajax not returning required values

I am trying to get form inputs through ajax j query bootstrap modal and store it into the database but serialize method is not returning all the values required.

It should have returned the values of user_id and btn_action... where did I go wrong..??

I have tried many solutions but could not get any answer...

below are html and javascript code. I am using all the required jquery resources.

<form method="post" id="user_form"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"></i> Add User </h4> <button type="button" class="close" data-dismiss="modal">&times; </button> </div> <div class="modal-body"> <div class="form-group"> <label>Enter User Name</label> <input type="text" name="user_name" id="user_name" class="form-control" required /> </div> <div class="form-group"> <label>Enter User Email </label> <input type="email" name="user_email" id="user_email" class="form-control" required /> </div> <div class="form-group"> <label>Enter User Password</label> <input type="password" name="user_password" id="user_password" class="form-control" required /> </div> </div> <div class="modal-footer"> <input type="hidden" name="user_id" id="user_id" /> <input type="hidden" name="btn_action" id="btn_action" /> <input type="submit" name ="action" id= "action" class="btn btn-primary" value="Add" /> <button type="button" class="btn btn-default" data-dismiss="mo dal">Close</button> </div> </div> </form> //script code: $(document).on('submit', '#user_form', function(event){ event.preventDefault(); $('#action').attr('disabled','disabled'); var form_data = $('#user_form').serialize(); alert(form_data); // console.log(form_data) $.ajax({ url:"user_action.php", method:"POST", data:form_data, success:function(data) { $('#user_form')[0].reset(); $('#userModal').modal('hide'); $('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>'); $('#action').attr('disabled', false);## Heading ## } }); }); 

<script> $(document).on('click','#add_button',function(){ $('#action').val("Insert"); $('.modal-title').text("Add User"); }); $(document).on('submit', '#user_form', function(event){ event.preventDefault(); var form_data = $('#user_form').serialize(); alert(form_data);//not returning the required values $.ajax({ url:"user_action.php", method:"POST", data:form_data, contentType:false, processData:false, success:function(data) { $('#user_form')[0].reset(); $('#userModal').modal('hide'); $('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>'); $('#action').attr('disabled', false); userdataTable.ajax.reload(); } }); }); }); </script>

<!-- form --> <form method="post" id="user_form"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"></i> Add User</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <div class="form-group"> <label>Enter User Name</label> <input type="text" name="user_name" id="user_name" class="form-control" required /> </div> <div class="form-group"> <label>Enter User Email</label> <input type="email" name="user_email" id="user_email" class="form-control" required /> </div> <div class="form-group"> <label>Enter User Password</label> <input type="password" name="user_password" id="user_password" class="form-control" required /> </div> </div> <div class="modal-footer"> <input type="hidden" name="user_id" id="user_id" /> <input type="hidden" name="btn_action" id="btn_action" /> <input type="submit" name ="action" id= "action" class="btn btn-primary" value="Add" /> <button type="button" class="btn btn-default" data-dismiss="mo dal">Close</button> </div> </div> </form> </div> </div>