javascript - 存储表单输入的值，因为 onsubmit 表单将被删除？Javascript DOM

Question

我遇到了一个问题，我试图存储表单输入的值，以便稍后调用它，但在提交时，表单被删除。我试图实现的过程是，一旦表单在提交时被删除，它将使用表单输入值填充一个 div 以传递消息。

我有两个功能：

第一个函数验证 window.onload 上的输入字段，并具有输入值

第二个函数处理数据以在提交时提供结果

这些是存储在执行验证的函数中的变量：

var fnamez = document.getElementById("last_name_id").value;
var ftext = document.createTextNode(fnamez);

这是提交时执行的功能

function processForm(e) {
e.preventDefault();

if (q1_valid == true && q2_valid == true && q3_valid == true && q4_valid == true && q5_valid == true) {
    var badge = document.getElementById("badge");
    badge.setAttribute('class', 'badge');

    var form_div = document.getElementById('form');
    // remove all child nodes
    while (form_div.hasChildNodes()) {
        form_div.removeChild(form_div.lastChild);
    }

    var congrats = document.createTextNode('congratulations!');
    badge.appendChild(congrats);

    // issue occurs here; thinking its a result of the removal of form
    var zfname = document.getElementById('first_name_id').value;
    var fnametext = document.createTextNode(zfname);
    badge.appendChild(fnametext);


}

badge 是定位 div 的变量的名称 id = badge

先感谢您！