有没有办法防止 Enter 键从另一个页面返回 json 响应？代码点火器阿贾克斯

Question

我正在使用 ajax 进行操作 Create 和 Update

我已经可以创建和更新了，但是如果我按或按Enter键然后从另一个页面显示，这有点不好看，并且在点击Enter 键。

{"success":false,"type":"update"}

对于视觉表示，这里是在输入字段上按Enter键后的样子

这就是我在视图中输入的内容

 <input type="text" name="group[]" id="group" placeholder="Enter your Choice" class="form-control" />

在我的控制器中

public function addGroup(){
    $result = $this->group_model->addGroup();
    $msg['success'] = false;
    $msg['type'] = 'add';
    if($result){
        $msg['success'] = true;
    }
    echo json_encode($msg);
}


public function updateGroup(){
    $result = $this->group_model->updateGroup();
    $msg['success'] = false;
    $msg['type'] = 'update';
    if($result){
        $msg['success'] = true;
    }
    echo json_encode($msg);
}

在模型中

public function updateGroup(){
    $id = $this->input->post('txtId');
    $field = array(
    'group_name'=>$this->input->post('group')
    );
    $this->db->where('id', $id);
    $this->db->update('groups', $field);
    if($this->db->affected_rows() > 0){
        return true;
    }else{
        return false;
    }
}



public function addGroup(){
    $field = array(
        'group_name'=>$this->input->post('group'),
    );
    $this->db->insert('groups', $field);
    if($this->db->affected_rows() > 0){
        return true;
    }else{
        return false;
    }
}

阿贾克斯

$('#btnSave').click(function(){
        var url = $('#myForm').attr('action');
        var data = $('#myForm').serialize();
        //validate form
        var group = document.getElementById('group').value;

        if(group.replace(/\s/g, "").length <=0 ) {
            swal("Submission fail!", "Enter the required field", "error");
            return false;
        }

            $.ajax({
                type: 'ajax',
                method: 'post',
                url: url,
                data: data,
                async: false,
                dataType: 'json',
                success: function(response){
                    if(response.success){
                        $('#myModal').modal('hide');
                        $('#myForm')[0].reset();
                        if(response.type=='add'){
                            var type = 'added'
                        }else if(response.type=='update'){
                            var type = 'updated'
                        }

                        swal("Success!", "You delete a Question!", "success");                          
                        showGroups();
                    }else{
                        alert('Error');
                    }
                },
                error: function(){
                    alert('Could not add data');
                }
            });

    });

Answer 1

$('#myForm').submit(function(e){
    $('#btnSave').attr('disabled',true); //disable the button

    //.Your other code

    success: function(response){
            if(response.success){
                $('#btnSave').attr('disabled',false); //enable the button

            }
    }
}

在单击按钮时，如果您按 Entern，则禁用 submnit 按钮的单击事件，这是默认行为，如果您获得成功响应，则启用它。

另外，如果你只是想禁用回车键，那么你可以这样做：

var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }

Answer 2

改变

$('#btnSave').click(function(){
    var url = $('#myForm').attr('action');
    var data = $('#myForm').serialize();
    //validate form
    var group = document.getElementById('group').value;

    if(group.replace(/\s/g, "").length <=0 ) {
        swal("Submission fail!", "Enter the required field", "error");
        return false;
    }

        $.ajax({
            type: 'ajax',
            method: 'post',
            url: url,
            data: data,
            async: false,
            dataType: 'json',
            success: function(response){
                if(response.success){
                    $('#myModal').modal('hide');
                    $('#myForm')[0].reset();
                    if(response.type=='add'){
                        var type = 'added'
                    }else if(response.type=='update'){
                        var type = 'updated'
                    }

                    swal("Success!", "You delete a Question!", "success");                          
                    showGroups();
                }else{
                    alert('Error');
                }
            },
            error: function(){
                alert('Could not add data');
            }
        });

});

进入

$('#myForm').submit(function(e){
e.preventDefault();
    var url = $('#myForm').attr('action');
    var data = $('#myForm').serialize();
    //validate form
    var group = document.getElementById('group').value;

    if(group.replace(/\s/g, "").length <=0 ) {
        swal("Submission fail!", "Enter the required field", "error");
        return false;
    }

        $.ajax({
            type: 'ajax',
            method: 'post',
            url: url,
            data: data,
            async: false,
            dataType: 'json',
            beforeSend: function(){
            $('#btnSave').attr('disabled',true);
            },
            success: function(response){
                if(response.success){
                    $('#myModal').modal('hide');
                    $('#myForm')[0].reset();
                    if(response.type=='add'){
                        var type = 'added'
                    }else if(response.type=='update'){
                        var type = 'updated'
                    }

                    swal("Success!", "You delete a Question!", "success");                          
                    showGroups();
                }else{
                    alert('Error');
                }

            },
            error: function(){
                alert('Could not add data');
            }
            $('#btnSave').attr('disabled',false);

返回假； });

});

将按钮改为提交

希望这会有所帮助！