Question

以下代码仅显示页面加载期的“测试”，然后消失。请提示

<input style="margin-left:40px;" type="submit" value="submit" name="submit" onclick="myFunction()"></input>

<script>
function myFunction()
{
document.getElementById("div6").innerHTML="Test";
}
</script>

Answer 1

提交表单后，将重新加载页面而不显示“测试”消息。

由于您希望在表单提交后保留“Test”消息，我建议使用一些服务器端代码来有条件地显示它（如果表单已提交）。

使用PHP，它会是这样的：

<?php

// determine if the form was submitted
$submitted=isset($_POST['submitted']) ? true : false;

?>

<form method="post" onsubmit="myFunction();" >
    <input type="submit" value="submit" name="submitted" />
</form>

<!-- echo message if form was submitted -->
<div id="div6"><?php echo $submitted ? "Test" : ""; ?></div>

<script>
function myFunction() {
    document.getElementById("div6").innerHTML="Test";
}
</script>

或者，您可以submit the form using AJAX以便页面不会重新加载。
但这是一个不同的故事。

Answer 2

使用此：

function myFunction(event) {
    event.preventDefault();
    document.getElementById("div6").innerHTML="Test";
}

干杯。

Answer 3

表单正在提交，页面正在重新加载。这就是你的文字“消失”的原因。由于该按钮是一个提交按钮，只要函数返回true（默认），表单就会提交。你可以通过返回false来阻止这个：

<input style="margin-left:40px;" type="submit" value="submit" name="submit" onclick="myFunction(); return false"/>

<script>
function myFunction()
{
    document.getElementById("div6").innerHTML="Test";
}
</script>

为什么我的html输出会消失？

3 个答案: