Question

我有一个页面上面有一个表格。当用户在页面上向下滚动并且表单不再可见时，页面顶部会出现一个固定的横幅并包含相同的表单。当用户向上滚动并再次查看原始表单时，横幅消失。由于我正在处理的网站的限制，两个表单需要具有相同的ID和输入ID。但是，提交表单现在会产生问题，因为两者都具有相同的ID。我想在滚动时使用jquery或javascript来改变表单及其输入的id。我们假设表格如下：

<form id="formid">
    <input type="text" name="input1" id="input1" value="name" placeholder="name/>
    <input type="text" name="input2" id="input2" value="name" placeholder="name/>
</form>

此表单以下列形式显示在主div中：

<div id="main">
    <form id="formid">
        <input type="text" name="input1" id="input1" value="name" placeholder="name/>
        <input type="text" name="input2" id="input2" value="name" placeholder="name/>
    </form>
</div>

在用户滚动之前默认隐藏的横幅表单如下：

<div id="banner">
    <form id="formid">
        <input type="text" name="input1" id="input1" value="name" placeholder="name/>
        <input type="text" name="input2" id="input2" value="name" placeholder="name/>
    </form>
</div>

如何在这两种形式中切换ID，以便在隐藏横幅时，与主div中的表单具有不同的ID。然后，当我滚动两个表格的ID将交换。如果有更好的解决方案，我会对所有可能性持开放态度。

我的滚动功能如下：

var showTop = true;
$(document).ready(function () {
    $(window).scroll(function () {
        // get the height of #wrap
        var h = $("body").height();
        var y = $(window).scrollTop();
        if (showTop) {
            if (y > (h * .13) && y < (h * .75)) {
                // if we are show keyboardTips
                $("#banner").fadeIn("fast");
            } else {
                $('#banner').fadeOut('fast');
            }
        }
    });
    $('.closeBanner').click(function (e) {
        e.preventDefault();
        $('.banner').hide();
        showTop = false;
    });
})

Javascript或Jquery更改表单/输入ID

0 个答案: