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()。这将保留每个用户输入，而不必使用任何会话等。

希望这有帮助。

如何使用选项卡提交表单

1 个答案: