Question

我正在尝试从输入中读取值并将其填入一个空div中。但是，正在读取该值但是当我单击提交按钮时，该值在空div上显示为0.2秒，并且然后，消失......任何建议为什么？

HTML：

 <div id="vuvedenaSuma">

 </div>

        <form action="">
            <input type="text" id="suma" required="required" placeholder="Въведи сума" name="Suma" />

            <button id="submit">Submit!</button>
        </form>

Javascript：

function valueRead(){
    var vuvedenaSuma = document.getElementById('suma').value;
    document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
}

document.getElementById('submit').addEventListener('click',valueRead);

我想用eventListener创建它，而不是按钮上的onclick属性。

Answer 1

您的事件正在触发，然后由于表单触发，页面可能正在重新加载。尝试使用

event.preventDefault()

它会阻止表单提交。

编辑：此外，我下面的评论绝对正确。记得将事件传递给函数。

Answer 2

您的表单在执行该功能后立即提交。

您可以阻止使用event.preventDefault()调用默认事件（表单提交），如下所示：

function valueRead(e){
    var vuvedenaSuma = document.getElementById('suma').value;
    document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
    e.preventDefault();
}

https://jsfiddle.net/ez0qchyq/

Answer 3

表单＆＃34;提交的默认方式＆＃34;是使用给定的输入作为参数向服务器发送新的页面请求。从那里，像PHP这样的服务器端语言可能会保存它们。通常情况下，这会产生一个成功的操作！＆＃34;页面或类似。

在您的情况下，您的表单操作是空白的，这意味着它将提交＆＃34;提交＆＃34;到它所在的页面。由于您的页面非常基本，因此会重新加载，而不会显示任何已发送的信息。

正如John Kossa建议的那样，您可以通过添加一个参数来拦截这一点，让我们说，＆＃34; evt＆＃34;，到valueRead函数的括号，然后调用evt.preventDefault()。

Answer 4

单击按钮后，您将发送表单，页面将自动刷新。要防止出现此问题，请尝试此解决方案

function valueRead(e){
    e.preventDefault();
    var vuvedenaSuma = document.getElementById('suma').value;
    document.getElementById('vuvedenaSuma').innerHTML = vuvedenaSuma;
}

Answer 5

此外，您可能希望在提交时使用事件侦听器：

document.getElementById('formName').addEventListener('submit', valueRead);

阅读表单值失败 - Javascript

5 个答案: