AJAX的序列化方法不返回所需值

Question

我试图通过ajax j query bootstrap模式获取表单输入并将其存储到数据库中，但是序列化方法没有返回所需的所有值。

它应该返回user_id和btn_action的值...我出了哪里错了.. ??

我尝试了许多解决方案，但无法得到任何答案...

以下是HTML和JavaScript代码。我正在使用所有必需的jQuery资源。

<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>

Answer 1

这两个隐藏的输入没有附加值，因此您不会在序列化值中找到它们，请直接在HTML中或JavaScript

中添加一些值

 <input type="hidden" name="user_id" id="user_id" value="some user_id"/>
 <input type="hidden" name="btn_action" id="btn_action" value="some btn_action"/>