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>