jQuery调用val()报Uncaught TypeError: val is not a function错误怎么解决

错误原因 #

你在编写表单提交取值逻辑时，漏写了jQuery选择器的$标识符：
('#edit_employment_type')的本质是被括号包裹的字符串，运行时仍为普通字符串类型，而val()是jQuery DOM对象独有的方法，字符串本身不存在该方法，因此触发类型错误。
你可以对比上方填充表单的代码，填充时的写法$('#edit_employment_type').val(data.job.employment_type)是正确的，提交取值时遗漏了$符号。

解决方案 #

将所有提交环节的表单选择器前补全$即可，修正后的完整代码如下：

$(document).on('click', '#jobEdit', function(event) {
    event.preventDefault();
    var id = $(this).data('id');
    $.ajax({
        type:'get',
        url:'/job/'+id+'/edit',
        success:function (data) {
            console.log(data);
            $('.selectpicker').selectpicker('refresh');
            $('#edit_employment_type').val(data.job.employment_type);
            $('#edit_job_type').val(data.job.job_type);
            $('#edit_history').val(data.job.history);
            $('#edit_post_title').val(data.job.post_title);
            $('#edit_state_id').val(data.job.state_id);
            $('#edit_city_id').val(data.job.city_id);
            $('#edit_start_date').val(data.job.start_date);
            $('#edit_end_date').val(data.job.end_date);
            // 补充selectpicker赋值后刷新，确保下拉框展示正确
            $('.selectpicker').selectpicker('refresh');
        },
    });
});

$(document).on('click', '#jobUpdate', function(event) {
    event.preventDefault();
    var id = $(this).data('id');
    var data = {
        'employment_type' : $('#edit_employment_type').val(),
        'job_type' : $('#edit_job_type').val(),
        'history' : $('#edit_history').val(),
        'post_title' : $('#edit_post_title').val(),
        'state_id' : $('#edit_state_id').val(),
        'city_id' : $('#edit_city_id').val(),
        'start_date' : $('#edit_start_date').val(),
        'end_date' : $('#edit_end_date').val(),
    }
    $.ajax({
        type: 'PUT',
        url: '/job/'+id,
        data: data,
        dataType: 'JSON',
        success: function (response) {
            console.log(response);
        }
    });
});

额外优化说明：原代码中给selectpicker赋值后没有触发刷新，可能会出现下拉框展示值和实际DOM存储值不一致的问题，已在填充成功回调中补充了对应刷新逻辑。

内容的提问来源于stack exchange，提问作者user16277300