Javascript或Jquery更改表单/输入ID

我有一个页面在折叠上方有一个表单。当用户在页面上向下滚动并且表单不再可见时，页面顶部会出现一个固定的横幅，其中包含相同的表单。当用户向后滚动并可以再次查看原始表单时，横幅将消失。由于我正在处理的站点的限制，这两个表单需要具有相同的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 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>

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;
    });
})

此表单出现在表单的主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>

默认情况下，在用户滚动之前隐藏的横幅表单如下所示：

<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="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>

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;
    });
})

如何切换这两个表单中的ID，以便在隐藏横幅时与主div中的表单具有不同的ID。然后，当我滚动时，两个表单的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 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>

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;
    });
})

var showTop=true；
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
//获取#wrap的高度
var h=$（“body”）.height（）；
变量y=$（窗口）.scrollTop（）；
如果（显示顶部）{
如果（y>（h*.13）和&y<（h*.75））{
//如果我们正在播放键盘提示
$（#banner”）.fadeIn（“fast”）；
}否则{
$（“#banner”）.fadeOut（'fast'）；
}
}
});
$（'.closeBanner'）。单击（函数（e）{
e、 预防默认值（）；
$（'.banner'）.hide（）；
showTop=false；
});
})

为什么不只使用一个html结构，并使用CSS来显示任意位置，而不是使用两个html结构？你只需要一次ID，你的提交将不会发出声音。不幸的是，这不起作用。你只能在一个页面上使用一次ID。您应该考虑其他解决方案，比如只使用一个ID使用一个窗体，并使用jQuery使用“CSS”或“Ad/ReaveCuLASS”函数更改样式。