Question

我只想尝试制作一个简单的javascript表单，每当您键入并提交内容时，它都显示在页面中。

<form id="myForm">
   <input id="text" type="text" name="name" value="">
   <input id="submit" type="submit">
</form>

的javascript：

 document.getElementById("myForm").addEventListener('submit', function(){

        var input = document.getElementById("text")
        var output = input.value;

        var printOutput = document.createElement('h1');
        printOutput.innerHTML = output;
        document.body.appendChild(printOutput);

 });

这显示一秒然后消失。我理解它正在发生，因为dom操作发生在提交事件中。但我不确定如何解决这个问题。

我的第一直觉是使用

return output;

然后在我从外面追加孩子时引用整个函数。但那也没有用。我猜测它是一个Eventlistener而不是一个正常的函数......关于如何使用它的任何想法？

Answer 1

在事件侦听器的末尾添加return false;。这将停止实际发生的提交，刷新页面

Answer 2

请改为尝试：

   document.getElementById("myForm").addEventListener('submit', function(event){
            event.preventDefault();

            var input = document.getElementById("text")
            var output = input.value;

            var printOutput = document.createElement('h1');
            printOutput.innerHTML = output;
            document.body.appendChild(printOutput);

     });

Answer 3

您忽略了通过服务器发送数据的form原始意义。

根据您的意图，您不需要form。您只需要input上的button元素和处理程序。

＆＃13;

function handler (){ 

  var input = document.getElementById("text")
  var output = input.value;

  var printOutput = document.createElement('h1');
  printOutput.innerHTML = output;
  document.body.appendChild(printOutput);
   document.getElementById("text").value='';

}

document.getElementById("submit").addEventListener('click', handler);
   document.getElementById("text").addEventListener('keypress', function(e){ (e.charCode == 13) && handler();});

＆＃13;

<div id="myForm">
  <input id="text" type="text" name="name" value="">
  <input id="submit" type="submit">
</div>

＆＃13;

Answer 4

在同一页面上获取输入和显示的最简单方法是

＆＃13;

if (arrayDayMinutes.get(i).getTimeStamp().equals(ConvertDateTime(rows.get(j).getTIMESTAMP().toGregorianCalendar())))

＆＃13;

function display()
{
var input=document.getElementById("text").value;
document.getElementById("display").innerHTML=input;
}

＆＃13;

如果要显示多个输入，即用户输入的每个输入。

<form id="myForm">
   <input id="text" type="text" name="name" value="">
   <input id="submit" type="button" onclick=display() value="submit">
   <div id="display"></div>
</form>

注意：始终尝试为优化结果编写最简单和最短的代码。

Answer 5

是的，它表现得如何。它的形式和它的作用是将所有信息提交给新页面。你没有提供action =''参数，意味着它在同一页面上发送信息。当你点击提交时会发生什么，首先你追加h1元素，然后重新加载，这就是它消失的原因。如果你没有其他页面提交信息摆脱表格。

<input id="text" type="text" name="name" value="">
<input id="submit" onclick='return getoutup();'  type="submit">
<h1 id='output'></h1>

<script type="text/javascript">

function getoutup(){
document.getElementById('output').innerText=document.getElementById('text').value;
return false;
}

</script>

所以你看到我预先创建了h1标签，所以你不需要太多编码就可以随函数进行追加。只需预先创建值为none，然后使用一行代码进行更改。希望能帮助到你。也许这是不正确的答案改变了你的方式。

Javascript - 如何正确地将表单输入添加到dom中？

5 个答案: