PHP轮播图多表单提交问题：表单值重置与数据传递故障

先修复你的HTML结构错误 #

你当前代码里第一个表单存在标签嵌套错误：<form>放在了<div class="item active">内部，但闭合标签</form>却在div外面，这会导致浏览器解析混乱，直接让form1失效。先把结构修正：

<div id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li class="item1 active"></li>
        <li class="item2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <!-- 第一个幻灯片的表单 -->
        <div class="item active">
            <form method="post" name="form1">
                <!-- 这里放第一个表单的输入控件 -->
                <input type="text" name="form1_input" placeholder="表单1输入">
                <!-- 如果要单独提交这个表单，放提交按钮在这里 -->
                <button type="submit" name="submit_form1">提交表单1</button>
            </form>
        </div>

        <!-- 第二个幻灯片的表单 -->
        <div class="item">
            <form method="post" name="form2">
                <!-- 这里放第二个表单的输入控件 -->
                <input type="text" name="form2_input" placeholder="表单2输入">
                <button type="submit" name="submit_form2">提交表单2</button>
            </form>
        </div>
    </div>
</div>

关于isset($_POST['form1'])的误区 #

HTML表单的name属性不会被作为参数提交到服务器，所以你没法通过isset($_POST['form1'])判断表单。想要区分不同表单的提交，需要在每个表单里加隐藏标识字段：

比如在form1里加：

<input type="hidden" name="form_id" value="form1">

form2里加：

<input type="hidden" name="form_id" value="form2">

这样后端就能通过$_POST['form_id']来判断是哪个表单提交的数据：

if(isset($_POST['form_id'])){
    switch($_POST['form_id']){
        case 'form1':
            // 处理表单1的数据
            break;
        case 'form2':
            // 处理表单2的数据
            break;
    }
}

解决“独立表单+统一提交按钮”的问题 #

你现在把提交按钮放在单独的表单里，肯定拿不到其他表单的数据。有两种可行方案：

方案1：用JavaScript收集所有表单数据后统一提交 #

给统一提交按钮绑定点击事件，遍历所有表单的输入控件，把数据整合到一个FormData对象里，再通过AJAX提交：

<!-- 统一提交按钮 -->
<button id="unified_submit">统一提交所有表单</button>

<script>
document.getElementById('unified_submit').addEventListener('click', function(e){
    e.preventDefault();
    const formData = new FormData();
    
    // 收集form1的所有数据
    const form1 = document.forms['form1'];
    Array.from(form1.elements).forEach(el => {
        if(el.name && !el.disabled){
            formData.append(el.name, el.value);
        }
    });
    
    // 收集form2的所有数据
    const form2 = document.forms['form2'];
    Array.from(form2.elements).forEach(el => {
        if(el.name && !el.disabled){
            formData.append(el.name, el.value);
        }
    });
    
    // 用AJAX提交数据
    fetch('你的处理脚本.php', {
        method: 'POST',
        body: formData
    }).then(response => {
        // 处理提交后的响应
        console.log('提交成功');
    }).catch(error => {
        console.error('提交失败', error);
    });
});
</script>

方案2：把所有输入控件放在单个表单里，用JS避免切换幻灯片时重置 #

你之前担心单个表单会导致切换幻灯片时重置，其实是因为切换时可能触发了表单的默认行为？或者是轮播插件的问题？可以试试给轮播切换事件绑定逻辑，保存当前输入值，切换后再恢复：

<!-- 单个表单包裹所有输入 -->
<form method="post" name="main_form">
    <div id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li class="item1 active"></li>
            <li class="item2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <!-- 表单1的输入 -->
                <input type="text" name="form1_input" id="form1_input">
            </div>
            <div class="item">
                <!-- 表单2的输入 -->
                <input type="text" name="form2_input" id="form2_input">
            </div>
        </div>
    </div>
    <!-- 统一提交按钮 -->
    <button type="submit" name="submit_all">提交所有数据</button>
</form>

<script>
// 保存输入值的对象
const inputValues = {};

// 监听轮播切换事件（以Bootstrap Carousel为例）
$('#myCarousel').on('slide.bs.carousel', function(){
    // 保存当前活跃幻灯片里的输入值
    const activeInputs = $(this).find('.item.active input');
    activeInputs.each(function(){
        inputValues[$(this).attr('id')] = $(this).val();
    });
});

// 轮播切换完成后恢复输入值
$('#myCarousel').on('slid.bs.carousel', function(){
    const activeInputs = $(this).find('.item.active input');
    activeInputs.each(function(){
        const id = $(this).attr('id');
        if(inputValues[id]){
            $(this).val(inputValues[id]);
        }
    });
});
</script>

内容的提问来源于stack exchange，提问作者John Lyons