在 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);
}

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