Question

我在php中使用了bootstrap 3选项卡但是当我刷新我之前的选项卡表单字段显示为空时，如何在刷新页面后显示这些字段？

这是我的代码：

            var hash = window.location.hash;
            $('#signup_tabs_group a[href="' + hash + '"]').tab('show');    
       // Get form data and enforce tab wise validation
        var form_data = $.parseJSON($('form').attr('data-elements'));
        $("#continue_to_account").click(function (e) {
            if ($("#password1").val() != '' && $("#password1").val() != $("#password2").val()) {
                popoverContent('password2', "Please Confirm Password.", "right");
                $("#password2").popover('show');
                $("#password2").addClass('mypopover');
                $("#password2").focus();
                return false;
            } else {
                $("#password2.mypopover").popover('hide');
            }
            if ($("#email").val() != '' && $("#email").val() != $("#email2").val()) {
                popoverContent ('email2', "Please Confirm Email.", "right");
                $("#email2").popover('show');
                $("#email2").focus();
                $("#email2").addClass('mypopover');
                return false;
            } else {
                $("#email2.mypopover").popover('hide');
            }
            $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
                var id = $(e.target).attr("href").substr(1);
                window.location.hash = id;
            });
            var custom_form = [];
            var required_elements = ['email', 'email2', 'username', 'password1', 'password2'];
            for (var c = 0; c < form_data.length; c++) {
                if (typeof(form_data[c].name) != "undefined" && required_elements.indexOf(form_data[c].name) != -1) {
                    custom_form[c] = form_data[c];
                }
            }
            if (validations(custom_form, $('form'), $(this), 'right') != false) {
                e.preventDefault();
                $('#signup_tabs_group a[href="#contact"]').tab('show');
                return true;
            }
            return false;
        });
        $("#back_to_account").click(function (e) {
            e.preventDefault();
            $('#signup_tabs_group a[href="#account"]').tab('show');
        });
        $("#continue_to_website").click(function (e) {
            var custom_form = [];
            var required_elements = [{'contact_first_name': true}, {'contact_last_name': true}, {'country': true}, {'account_type': true}, {'address1': true}, {'address2': false}, {'address3': false}, {'city': true}, {'state': false}, {'zipcode': true}, {'phone_code': false}, {'phone_number': true}, {'fax': false}, {'currency': false}];
            if (
                typeof($('input[name=account_type]:checked').val()) != 'undefined' &&
                $('input[name=account_type]:checked').val() == 'company'
            ) {
                required_elements.push({'company_name': true});
            }
            //return false;
            for (var c = 0; c < form_data.length; c++) {
                if (
                    typeof(form_data[c].name) != "undefined" && 
                    typeof(form_data[c].validation) != "undefined" && 
                    typeof(form_data[c].validation.required) != "undefined"
                ) {
                    for (var i = 0; i < required_elements.length; i++) {
                        if (typeof(required_elements[i][form_data[c].name]) != 'undefined') {
                            form_data[c].validation.required = required_elements[i][form_data[c].name];
                            custom_form[c] = form_data[c];
                            break;
                        }
                    }
                }
            }
            if (validations(custom_form, $('form'), $(this), 'right') != false) {
                e.preventDefault();
                $('#signup_tabs_group a[href="#website"]').tab('show');
                return true;
            }
            return false;
        });
        $("#back_to_website").click(function (e) {
            e.preventDefault();
            $('#signup_tabs_group a[href="#contact"]').tab('show');
        });
        $('input[name=account_type]').change(function() {
            if ($('input[name=account_type]:checked').val() == 'company') {
                $('.company-label').removeClass('hidden');
            } else {
                $('.company-label').addClass('hidden');
                $('#company_name').val('');
                if ($('#company_name').hasClass('mypopover')) {
                    $('#company_name').popover('hide');
                    $('#company_name').popover('disable');
                }
            }
        });
        // jQuery International Telephone Input With Flags and Dial Codes
        $("#phone_code").intlTelInput({
            defaultCountry: "gb"
        });

        //Validation
        $(".validate_button").click(function(e){
            var words = $('#description').val().split(/\b[\s,\.-:;]*/);
            if (words.length > 100) {
                words.splice(100);
                $('#description').val(words.join(" "));
            }
            var custom_form3 = [];
            var required_elements = ['website_name', 'website_url', 'unique_visitors', 'audience_geo', 'audience_interests', 'website_content', 'advertising_type', 'other_affiliate_member', 'working_with_qs', 'description', 'hear_about_us', 'accept_terms'];
            for (var c = 0; c < form_data.length; c++) {
                if (typeof(form_data[c]) != "undefined" && typeof(form_data[c].name) != "undefined" && required_elements.indexOf(form_data[c].name) != -1) {
                    custom_form3[c] = form_data[c];
                }
            }
            if (validations(custom_form3, $('form'), $(this), 'right') != false) {
                return true;
            }

刷新页面后如何显示表单字段？

Answer 1

这是比ZF2相关的纯JS / jQuery问题。

我用这样的方式解决了这个问题：

$(function(){
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
    }
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
        window.location.hash = e.target.hash;
    });
});

我正在寻找标签'''元素href以url结尾，然后我显示它们。当有人点击标签时我也设置了窗口url哈希组件，所以在有人刷新页面后，它会给他带来最后一次查看标签。

如何在zf2中的bootstrap3中保持相同的选项卡？

1 个答案: