如何使用jQuery将表单值传递到div并显示该div？

方案一：传统表单提交（页面刷新） #

这种方式利用表单的submit按钮提交数据，后端PHP接收后控制Div的显示状态并输出值。

修正后的完整代码 #

<form method="post">
    <input type="text" name="value_a" value="A">
    <input type="text" name="value_b" value="B">
    <!-- 修正原按钮的语法错误，移除多余的`;"` -->
    <input type="submit" name="submitX" value="submit">
</form>

<!-- 根据是否提交表单来设置Div的显示状态 -->
<div id="myDiv" style="display: <?php echo isset($_POST['submitX']) ? 'block' : 'none'; ?>">
    <?php 
    if(isset($_POST['submitX'])) {
        $AA = $_POST['value_a'];
        $BB = $_POST['value_b'];
        // 输出获取到的值，可根据需求调整格式
        echo "Value A: {$AA}<br>";
        echo "Value B: {$BB}";
    }
    ?>
</div>

原理说明 #

• 点击submit按钮时，表单会以POST方式提交到当前页面
• PHP通过isset($_POST['submitX'])判断是否有提交动作，若为真则：
  1. 将myDiv的display样式设为block，使其显示
  2. 从$_POST中获取value_a和value_b的值并输出

方案二：AJAX无刷新提交（页面不刷新） #

这种方式通过JavaScript发送异步请求，无需刷新页面即可完成数据传递和Div显示，用户体验更流畅。

完整代码 #

<form id="myForm" method="post">
    <input type="text" name="value_a" value="A">
    <input type="text" name="value_b" value="B">
    <input type="button" name="submitX" value="Submit" onclick="submitForm()">
</form>

<div id="myDiv" style="display: none;"></div>

<script>
function submitForm() {
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    // 手动添加submitX标识，后端用于判断提交动作
    formData.append('submitX', '');

    // 发送异步请求到当前页面
    fetch('', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        const myDiv = document.getElementById('myDiv');
        // 将后端返回的值填充到Div中
        myDiv.innerHTML = `Value A: ${data.a}<br>Value B: ${data.b}`;
        // 显示Div
        myDiv.style.display = 'block';
    })
    .catch(error => console.error('提交出错:', error));
}
</script>

<?php
// 后端处理逻辑，仅在收到POST请求时执行
if(isset($_POST['submitX'])) {
    $AA = $_POST['value_a'];
    $BB = $_POST['value_b'];
    // 可在此添加数据验证、存储等逻辑
    // 返回JSON格式的数据给前端
    echo json_encode(['a' => $AA, 'b' => $BB]);
    exit;
}
?>

原理说明 #

• 点击按钮时触发submitForm()函数，通过FormData收集表单数据
• 用fetch发送POST请求到后端，后端处理后返回JSON格式的结果
• 前端接收结果后，将值填充到myDiv并设置其显示状态为block

为什么你之前的按钮无法传递值？ #

你使用的是普通button按钮，它只会执行onclick中的JS代码，不会触发表单的提交动作，因此后端$_POST中无法获取到表单值。如果要保留button按钮，需要像方案二那样用JS手动处理表单提交逻辑。

内容的提问来源于stack exchange，提问作者Eis Zych