Question

我找不到从表单序列化中排除隐藏元素的方法。

我尝试使用此代码：

$("#form-user :not(.hide_element) > :input").serialize();

或者这个：

$("#form-user").not(".hide_element > input").serialize();

但仍然有相同的表单数据响应

我把表单放在我的模态中。

<div class="modal-body">
         <?php echo form_open('#',array("class"=>"form-horizontal","id"=>"form-user")); ?>
         <div id="message"></div>
            <div class="form-group">
              <label class="control-label col-md-3">Username:</label>
              <div class="col-md-9">
                <input type="text" name="uname" class="form-control">
              </div>
            </div>
            <div class="form-group hide_element" >
              <label class="control-label col-md-3" id='lblpass'>Password:</label>
              <div class="col-md-9">
                <input type="password" name="pass" class="form-control">
              </div>
            </div>
            <div class="form-group hide_element">
              <label class="control-label col-md-3" id='lblnewpass'>Confirm Password:</label>
              <div class="col-md-9">
                <input type="password" name="confirmpass" class="form-control">
              </div>
            </div>
             <div class="form-group">
              <label class="control-label col-md-3">Email Address:</label>
              <div class="col-md-9">
                <input type="email" name="email" class="form-control">
              </div>
            </div>
             <div class="form-group">
              <label class="control-label col-md-3">User Status:</label>
              <div class="col-md-9">
               <select name="userstatus" class="form-control">
                 <option hidden>Select user status of the account (Default = Active)</option>
                 <option value="1">Active</option>
                 <option value="2">Inactive</option>
               </select>
              </div>
            </div>
             <div class="form-group">
              <label class="control-label col-md-3">User Type:</label>
              <div class="col-md-9">
               <select name="usertype" class="form-control">
                 <option hidden>Select user type of the account (Default = Customer)</option>
                 <option value=1>Customer</option>
                 <option value=2>Admin</option>
               </select>
              </div>
            </div>
        <div class="modal-footer">
          <button class="btn btn-success" type="button" id="action"><i class="fa fa-save"></i> Add user</button>
           <button class="btn btn-danger" type="button" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
         <?php echo form_close(); ?>

我的ajax功能：

$(document).ready(function(){
$('#form-user').on('click','#action',function(e){
    e.preventDefault();
    if(action == 'add'){
    $.ajax({
        url: site_url('User/add_user'),
        data: $("#form-user :not(.working) > input").serialize(),
        type:'POST',
        encode: true,
        dataType:'json',
        success:function(data){
            if(!data.success){
                if(data.errors){
                    $('#message').html(data.errors).addClass('alert alert-danger');
                }
            }else{
                $('#message').html("").removeClass('alert alert-danger');
                $('.modal-title').html('Processing request');
                $('#alert').modal('show');
                $('#mymodal').modal('hide');                
                $('#body-message').html("<i class='fa fa-spinner fa-pulse fa-3x fa-fw'></i> Updating...");
                setTimeout(function(){
                    $('#body-message').html("<i class='fa fa-check fa-3x'></i>"+ data.message);
                },3000)
                setTimeout(function(){

                    $('#alert').modal('hide');
                    $('#form-user')[0].reset();
                    reloadData();
                },5000);
            }

        }
    });
    }else{
        $.ajax({
        url: site_url('User/update_user'),
        data: $("#form-user :not(.working) > :input").serialize() +"&id=" + id,
        type:'POST',
        encode: true,
        dataType:'json',
        success:function(data){
            if(!data.success){
                if(data.errors){
                    $('#message').html(data.errors).addClass('alert alert-danger');
                }
            }else{
                $('#message').html("").removeClass('alert alert-danger');
                $('.modal-title').html('Processing request');
                $('#alert').modal('show');
                $('#mymodal').modal('hide');                
                $('#body-message').html("<i class='fa fa-spinner fa-pulse fa-3x fa-fw'></i> Updating...");
                setTimeout(function(){
                    $('#body-message').html("<i class='fa fa-check fa-3x'></i>"+ data.message);
                },3000)
                setTimeout(function(){

                    $('#alert').modal('hide');
                    $('#form-user')[0].reset();
                    reloadData();
                },5000);
            }

        }
    });
    }
});
});

Answer 1

试试这个：

var frm  = $('#finalform').find(":input:not(:hidden)").serialize();

或者

var frm  = $('#finalform :input:not(:hidden)').serialize();

Answer 2

禁用元素不会被发布也不会被序列化，因此您可以临时向其添加disabled属性，并在成功响应后将其恢复到之前的状态：

$('#form-user').on('click','#action',function(e){
  $("#form-user .hide_element > input").attr('disabled','disabled');
  $.ajax({  
     ...
     data: $("#form-user").serialize(),
     success:function() {
        $("#form-user .hide_element > input").removeAttr('disabled');
     }
  });
});

如何排除隐藏的表单元素以形成序列化

2 个答案: