使用JS在同一頁上呈現表單數據時，數據在一秒鐘後消失

我試圖使用JavaScript在同一頁上呈現表單數據。使用JS在同一頁上呈現表單數據時，數據在一秒鐘後消失

的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爲「顯示」只是一瞬間的股利，然後如果提交場放置在窗體元素中消失。

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>

我似乎無法讓我的頭解決這個問題。這是爲什麼發生？

來源

2016-11-07 etSingh

當你提交表單，瀏覽器的「負荷」的形式是「行動」的網址 - 爲您的形式有沒有「行動」，那麼瀏覽器重新加載當前頁面 - 這是發生了什麼 –

謝謝！如果我沒有行動領域，我錯誤地認爲表格是無所事事。 – etSingh

您應該提交，通過與onclick事件這樣返回false停止形式：

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

來源

2016-11-07 06:02:34 jkp

將監聽器放在窗體上會更好，因爲它可以在不點擊按鈕的情況下提交。 – RobG

我正在問這個問題，否則聽表格提交是最好的。 – jkp

使用JS在同一頁上呈現表單數據時，數據在一秒鐘後消失

回答

相關問題