How to stay on same tab in bootstrap3 in zf2? - php

Question

I used bootstrap 3 tabs in php but when i refresh my previous tab forms fields shown empty,How i show these fields after refreshing page?
Here is my code:
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;
}
How i show form fields after refreshing page?

Answer 1

It's rather pure JS/jQuery question than ZF2 related.
I solved this problem in such a way:
$(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;
});
});
i'm looking for tabs which 'a' element href ends with hash from url and then i show them. I also set in window url hash component when someone click on tab so after that someone refresh page it bring him last viewed tab.