Question

提交表单后，我在页面下方的div中将数据显示在页面上，该页面的可见性最初设置为隐藏

使用JavaScript，我将其设置为在单击按钮后变为可见

HTML：

<form action = "page2.php" method = "POST">
<select>
    <option selected>Choose...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select>
    <option selected>Choose...</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<button type="submit" name="btn1" onclick="showDiv()">Next</button>
</form>

<div style = "visibility:hidden" id = "aftersubmit">
    <p>Data</p>
    ...
</div>

JS：

function showDiv() {
document.getElementById("aftersubmit").style.visibility = 'visible';
}

我希望在单击表单上的“提交”按钮后div可见，但是由于表单已发布，因此页面会刷新并且样式会变回隐藏。

Answer 1

您可以使用Ajax发送表单而无需刷新。

为方便起见，可以在url中设置一个GET变量，然后检查该变量是否已设置。我假设您将数据发送到同一页面，并且只需要JavaScript解决方案。

HTML

getById: function (req, res) {
    User.findOne({ _id: req.params.id }, function (err, user) {

        // Get images related to the user
        Image.find({userId: req.params.id}, function(err, images) {
            user.images = images;

            return res.status(200).send({
                msg: 'User retrieved successfully',
                data: user
            });
        });
    });
}

JS

<form action = "page2.php?submitted" method = "POST">
<select>
    <option selected>Choose...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select>
    <option selected>Choose...</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<button type="submit" name="btn1" onclick="showDiv()">Next</button>
</form>

<div style = "visibility:hidden" id = "aftersubmit">
    <p>Data</p>
    ...
</div>

Answer 2

如果您不打算使用AJAX，那么也许捷径三元数交换类是一个不错的选择。

我在示例（a<- data.frame("texts" = bookparagraphs$text[1:10], stringsAsFactors = FALSE) str(a) 'data.frame': 10 obs. of 1 variable: $ text: Factor w/ 6552 levels）中使用实用程序类。

HTML / PHP

u-visible

CSS

<div id="aftersubmit" class="<?php echo (isset($_POST) ? 'u-visible' : 'u-hidden'); ?>">
    <p>Data</p>
    ...
</div>

编辑：我在这里单独使用.u-hidden { visibility: visible } .u-visible { visibility: hidden; }，但是您可以附加输入名称，也可以在表单中添加隐藏的输入以代替使用，例如

$_POST

<input type="hidden" name="formSubmitted">

我希望这会有所帮助。：-）

Answer 3

为此，您需要通过Ajax发送数据并使用always（）和done（）等功能！

提交表单后如何更改CSS

3 个答案: