javascript - jquery条件表单提交

Question

我正在尝试更新用户个人资料。用户插入他的地址并提交后，将其转换为纬度和经度。我创建了一个条件语句:如果 GeocoderStatus 正常，则更改 geoLocationOK = 1，否则为 0。当为 1 时，则运行更新函数，但纬度和经度不会传递给 formData。在第二次更新时单击它已添加。有什么建议如何在 formData 中包含纬度和经度吗？

点击更新

        $(document).on("click", "#updateProfile", function (e) {
            function geocodeAddress(geocoder, resultsMap) {
                var address = document.getElementById('address').value;
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        var latitude = results[0].geometry.location.lat();
                        var longitude = results[0].geometry.location.lng();
                        console.log(latitude);
                        console.log(longitude);
                        userLatitude = document.getElementById('cityLat').value = latitude;
                        userLongitude = document.getElementById('cityLng').value = longitude;
                        geoLocationOK = 1;
                        console.log(geoLocationOK);

                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
            geocodeAddress(geocoder);

            if(geoLocationOK == 1){
                updateProfile();
            }else{
                console.log("not ok");
                e.preventDefault();
            }
        });

这是更新功能

            function updateProfile(){
                console.log(geoLocationOK);

                $('#rootwizard').formValidation({
                    framework: 'bootstrap',
                    excluded: [':disabled'],
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },   
                    live: 'enabled',

                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        userPhoneNr: {
                            validators: {
                                notEmpty: {
                                    message: 'Please insert phone nr'
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z0-9_]+$/,
                                    message: 'Error'
                                }
                            }
                        },
                    }
                }).on('success.form.fv', function(e, data) {
                    // Prevent form submission
                    e.preventDefault();

                    var $form    = $(e.target),
                        formData = new FormData(),
                        params   = $form.serializeArray(),
                        files    = $form.find('[name="userProfilePhoto"]')[0].files;



                    $.each(params, function(i, val) {
                        formData.append(val.name, val.value);
                    });

                    $.ajax({
                        url: $form.attr('action'),
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: 'POST',
                        success: function(data){
                            console.log(data);
                            if(data.status == 'success'){

                                getProfileData();     
                            }    
                        },
                        error: function(jqXHR, textStatus, errorThrown, data){
                            console.log(jqXHR, textStatus, errorThrown, data);
                        }
                    });
                    // Now Destroy
                    function destroyFormValidation() {
                        var instance = $('#rootwizard').data('formValidation');
                        if (instance) {
                            instance.destroy();
                        }
                    }
                    destroyFormValidation();
                });
            }

Answer 1

为什么您只能在第二次单击时更新，因为在第一次单击时您实际上绑定(bind)了表单验证。为什么不在函数 updateProfile 之外单独绑定(bind)表单验证。

然后在 updateProfile 内提交表单:

function updateProfile(){
     $('#rootwizard').submit();
}