javascript - jquery条件表单提交

标签 javascript jquery

我正在尝试更新用户个人资料。用户插入他的地址并提交后,将其转换为纬度和经度。我创建了一个条件语句:如果 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();
                });
            }

最佳答案

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

然后在 updateProfile 内提交表单:

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

关于javascript - jquery条件表单提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38329627/

相关文章:

php - 切换多个相关元素的显示

javascript - JavaScript 中可调用对象的构造函数

javascript - 逃避问题

javascript - 如何在 netlify 中将 ejs View 引擎与 Express 一起使用?

javascript - Node.js 和 Request.js : Finding the file extension for a download?

javascript - 滚动然后固定到 html 中的顶部标题

javascript - 点击事件在 Firefox 中不起作用

javascript - 如何通过单击一个复选框将多个复选框值附加到文本区域

javascript - 不能使用 jQuery keycode 来改变元素的 CSS

javascript - 浏览器不呈现表格元素 | jsFiddle 示例