如何使用選項卡提交表單

Question

我正在創建一個註冊頁面，並使用選項卡帳戶詳細信息/個人詳細信息/公司詳細信息。我已經啓動並運行了，但是當然，因爲我加載了頁面，它將清除表單域。

什麼是最好的方式來做到這一點，所以它不會清除表單字段，並讓我之後提交？在JS的

部分：

var containerId = '#aanmeld-tabs-container'; 
var tabsId = '#aanmeld-tabs'; 

$(document).ready(function(){ 
    // Preload tab on page load 
    if($(tabsId + ' LI.current A').length > 0){ 
     loadTab($(tabsId + ' LI.current A')); 
    } 

    $(tabsId + ' A').click(function(){ 
     if($(this).parent().hasClass('current')){ return false; } 

     $(tabsId + ' LI.current').removeClass('current'); 
     $(this).parent().addClass('current'); 

     loadTab($(this));  
     return false; 
    }); 
}); 

function loadTab(tabObj){ 
    if(!tabObj || !tabObj.length){ return; } 
    $(containerId).addClass('loading'); 
    $(containerId).fadeOut('fast'); 

    $(containerId).load(tabObj.attr('href'), function(){ 
     $(containerId).removeClass('loading'); 
     $(containerId).fadeIn('fast'); 
    }); 
} 

HTML部分

<form method="post" id="aanmeldForm" name="form"> 
<ul class="aanmeld-tabs" id="aanmeld-tabs"> 
<li class="current"><a href="resources/include/tabs/accountdetails.php">Accountdetails</a></li> 
<li><a href="resources/include/tabs/personal-details.php">Personal Details</a></li> 
<li style="padding-right: 0px !important"><a href="resources/include/tabs/company-details.php">Companydetails</a></li> 
</ul> 

<div class="aanmeld-tabs-container" id="aanmeld-tabs-container"> 
Loading. Please wait.. 
</div> 
</form> 

<div id="aanmelden-functies"> 
<div class="aanmeldbtn-container"> 
<input type="submit" id="goAanmelden" name="goAanmelden" class="button green" value="Aanmelden" /> 
</div> 
</div> 

Answer 1

目前使用的是$ .load（），將每個用戶點擊時加載新的內容標籤。您有很多選項：

1 - 將選項卡上的當前表單輸入序列化到sessionStorage中。

$(".tab").on("click", function(){ 
    sessionStorage.formData.firstTab = $("form.firstTabForm").serializeArray(); 
    //and on goes to the other tab's form. 
}) 
$("form").on("submit", function(){ 
    var data = sessionStorage.formData; 
    console.log(data); 
    $.post(url, data, function(result,status){ 
     console.log(result); 
    }) 
    return false; 
}) 

2 - 把你的形式進入部分並加載它所有和使用CSS隱藏它，而不是使用$.load()，您可以使用$.show()。這將保留每個用戶輸入，而不必使用任何會話等。

希望這有助於。