Javascript update text without page refresh

Question

Just learning javascript now. I want to make a remembrance ribbon where a persons name is added via a form. I have it working but just after it happens the page refreshes and it ends up blank. Is there a quick way to achieve this without a page refresh.

https://thimbleprojects.org/mrcpower/573757

share the code first. you can use the id to show data from the input field. but we need to see the code. — Ashiqur Rahman, Nov 01 '18 at 07:02
I just viewed your link and i think your solution is already given in https://stackoverflow.com/questions/45634088/how-to-prevent-page-from-reloading-after-form-submit-jquery — Mohan Rajput, Nov 01 '18 at 07:14

score 0 · Answer 1 · answered Nov 01 '18 at 07:03

0

By default, when you submit a form the page will refresh. So to prevent that you can add this to the top of your submit event handler function.

function changeText(event) {
    event.preventDefault();
}

answered Nov 01 '18 at 07:03

Osman Ali

135
7

score 0 · Answer 2 · answered Nov 01 '18 at 07:08

try this code:

<input type="text" name="" id="yourInputId">
<button onclick="submit()">submit</button>
<div id="ribbonId"></div>
<script type="text/javascript">
function submit(){
    var a = document.getElementById('yourInputId').value;
    document.getElementById('ribbonId').innerHTML = a;
}

Javascript update text without page refresh

2 Answers2