在ajax中提交之前需要删除输入

Question

我尝试通过在codeigniter上使用ajax提交表单进行验证，当我想插入数据但只有几个输入字段而输入字段我不使用时我试图隐藏，但attr仍需要在输入字段上运行我隐藏了，如何解决这个问题。所以隐藏时删除所需的输入字段。

查看

<form id="fr" method="post" class="form-horizontal form-label-left">    
    <div class="form-group">        
        <label for="fullname">Section * :</label>
        <select name="section" class="form-control" required="required">
            <option value="">Select section</option>
            <option value="manager">Manager</option>
            <option value="head manager">Head Manager</option>
        </select>
        <span class="help-block"></span>    
    </div>  
    <div class="form-group">
        <label for="nama">Kitchen * :</label>
        <input type="text" name="name_kitchen"  class="form-control" required="required" />
        <span class="help-block"></span>
    </div>
    <div class="form-group">
        <label for="nama">Resto * :</label>
        <input type="text" name="name_resto"  class="form-control" required="required" />
        <span class="help-block"></span>
    </div>  

    <div class="form-group">
        <label for="fullname">&nbsp;</label><br>
        <button type="button" id="submit"  class="btn btn-primary"><i class="fa fa-save"></i> Simpan</button>
    </div>  
</form> 

<script>
    $("[name='section']").change(function(){
        var value=$(this).val();
        if(value == "manager"){
            $("[name='name_kitchen']").hide();
            $("[name='name_resto']").show();
        }else{
            $("[name='name_kitchen']").show();
            $("[name='name_resto']").hide();        
        }   
    });

    $("#submit").click(function() {
        $.ajax({
            type: "POST",
            url: base_url+"add",
            dataType: 'json',
            data: $('#fr').serialize(),
            success: function(data) {
                if(data.status) { 
                    $(".add-from-staff").toggle("slow");    
                    $("#fr").load(location.href + " #fr");
                    $('form#fr input[type="text"],texatrea, select').val('');                   
                }else {
                    for (var i = 0; i < data.inputerror.length; i++) 
                    {
                        $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error');
                        $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); 
                    }
                }
            },
            error: function (request, jqXHR, textStatus, errorThrown) { 
                 alert('Error');
                console.log(request.responseText);
            }       
        });     
    });     
</script>

控制器

public function add() {
    $this->_validate();
    $insert = $this->My_models->_add();
    echo json_encode(array("status" => TRUE));          
}   

function _validate() {
    $data = array();
    $data['error_string'] = array();
    $data['inputerror'] = array();
    $data['status'] = TRUE;

    if($this->input->post('name_kitchen') == '')
    {
        $data['inputerror'][] = 'name_kitchen';
        $data['error_string'][] = 'Kitchen is required';
        $data['status'] = FALSE;
    }


    if($this->input->post('name_resto') == '')
    {
        $data['inputerror'][] = 'name_resto';
        $data['error_string'][] = 'Resto is required';
        $data['status'] = FALSE;
    }

    if($data['status'] === FALSE)
    {
        echo json_encode($data);
        exit();
    }
}

那么当我选择其中一个隐藏禁用所需的选项时呢？

Answer 1

当你隐藏任何div时，你可以使用jquery获取元素并删除其必需的属性

$("[name='name_kitchen']").removeAttr('required');

e.g:
$("#elementID").removeAttr('required'); 

Answer 2

在这个例子中，我不会使用required属性。它造成了比它值得更多的头痛。相反，依赖于服务器端验证。

为了确定使用哪个“部分”，在我看来，将另一条信息传递给控制器​​将是解决问题的最简单方法。这可以通过许多不同的方式完成。添加另一个隐藏字段是一种选择。

在<form>内的某处添加

<input type="hidden" id="use-section" name="use_section" value="">

首次显示页面时，您不清楚是否显示“默认”部分。如果有，则使用该值作为上述字段中的“值”。

处理程序期间

 $("[name='section']").change(function(){ ...

设置“use_section”字段的值。

var value=$(this).val();
$("#use-section").val(value);

您可以在模型中评估控制器中的“use_section”，或者在您的情况下，我假设您正在捕获发布的数据。

if($this->input->post('use_section') === "manager")
{
    //get the fields you want
} 
else
{
     //get the other fields
}

我对_validate()有一个建议。而不是调用exit()短路add()返回一个值 - 如果它工作，则为TRUE，否则为$data。 _validate()的最后几行成为

if($data['status'] === FALSE)
{
    return $data;
}

return TRUE;

然后使用这个add()方法

public function add()
{
    if(TRUE === ($status = $this->_validate()))
    {
        $insert = $this->My_models->_add();
        $status = array("status" => TRUE);              
    } 
    echo json_encode($status);
}

在CodeIgniter中使用exit或die是IMO不合适的，因为它会使框架的设计执行流程短路。