Question

我尝试使用JavaScript在同一页面上呈现表单数据。

的JavaScript

function renderInput(age) {
    document.getElementById('display').innerHTML += age;
}

当提交按钮放在表单元素之外时，它可以正常工作。

HTML - 工作时

<form>
  <label><b>Enter your age</b></label>
  <input type="text" name="age" id="user_input">
</form>

<input type="submit" 
onclick='renderInput(document.getElementById("user_input").value);'><br/>

<div id='display'>Your age is </div>

虽然它只是瞬间呈现id为“display”的div，但如果将submit字段放在form元素中，则会消失。

HTML - 当它不起作用时

<form>
  <label><b>Enter your age</b></label>
  <input type="text" name="age" id="user_input">
  <input type="submit" 
onclick='renderInput(document.getElementById("user_input").value);'><br/>
</form>

<div id='display'>Your age is </div>

我似乎无法理解这一点。为什么会这样？

Answer 1

您应该停止提交表单，方法是返回false这样的onclick事件：

<input type="submit" onclick='renderInput(document.getElementById("user_input").value); return false;'>

使用JS在同一页面上呈现表单数据后，数据在瞬间消失

1 个答案: