Question

提前，我说我是一个初学者。我有个问题。我想显示来自输入的信息，但它们仅显示一秒钟然后消失。

我知道原因：因为我使用<form>。

我使用<form>是因为我需要一个按钮来重置表单。因此，目前，使用，按钮重置有效，但显示信息无效。例如，我尝试使用另一个块“ section”，在这里，显示按钮可以使用，但是reset不能->因为它仅适用于<form>。

我尝试为重置输入创建函数，我使用了reset()，但它也仅适用于<form>。我发现我可以使用preventDefault();，但是我不太清楚，我也不知道它是如何工作的。有人可以帮我吗？

<script type="text/javascript">
    function show()
    {
        var button = document.getElementById("press"); 
        var name = document.getElementById("name").value;
        var surname = document.getElementById("surname").value;
        var mail = document.getElementById("mail").value;
        var service = document.getElementById("service").value;
        var mail_low = mail.toLowerCase(); 

        button.addEventListener("submit", function(e)
        {
            document.getElementById("info").innerHTML = name+" "+surname+"<br/>"+mail_low+"<br/>"+"Service: "+usluga;
            e.preventDefault();
        }, false);
    }

<form>
    Name: <input type="text" id="name"/><br/>
    Surname: <input type="text" id="surname"/><br/>
    E-mail: <input type="text" id="mail"/><br/>
    Serivce: 
    <select id="service">
        <option>naprawa komputera</option>
        <option>odzyskiwanie danych</option>
        <option>problemy z oprogramowaniem</option>
        <option>konfiguracja sieci LAN</option>
        <option>inne</option>
    </select><br/>
    <input type="checkbox" checked="checked"/>Send copy information<br/>
    <button type="reset" value="Reset">Reset</button>
    <button type="submit" value="Send" onclick="show()" id="press">Send</button>
</form>

<p id="info"></p>

Answer 1

这不是您应该设置的click的{{1}}事件，而是button的{{1}}事件。目前，您正在尝试设置submit的{{1}}事件，但是form没有submit事件。

然后，只需取消事件（button）。

另外，don't set up your events with inline HTML event handlers（即button）。如下所示使用.addEventListener()（并在我共享的链接中进行了讨论）。

submit

form

但是，更好的是，由于您不在任何地方提交数据，因此首先不需要form.submit元素。只需手动进行重置，就不必担心提交和取消。

另外，don't use self-terminating tags（即onclick）。

为了提高效率，我还重新组织了您的代码。

document.querySelector("form").addEventListener("submit", function (event) {
  event.preventDefault(); // <-- Prevents the native behavior of the event
  
  var button = document.getElementById("press"); 
  var name = document.getElementById("name").value;
  var surname = document.getElementById("surname").value;
  var mail = document.getElementById("mail").value;
  var service = document.getElementById("service").value;
  var mail_low = mail.toLowerCase(); 

  document.getElementById("info").innerHTML = name+" "+surname+"<br/>"+mail_low+"<br/>"+"Service: "+service;  

});

<form action="#">
    Name: <input type="text" id="name"><br/>
    Surname: <input type="text" id="surname"><br/>
    E-mail: <input type="text" id="mail"><br/>
    Serivce: 
    <select id="service">
        <option>naprawa komputera</option>
        <option>odzyskiwanie danych</option>
        <option>problemy z oprogramowaniem</option>
        <option>konfiguracja sieci LAN</option>
        <option>inne</option>
    </select><br/>
    <input type="checkbox" checked="checked">Send copy information<br>
    <button type="reset" value="Reset">Reset</button>
    <button type="submit" value="Send" id="press">Send</button>
</form>

<p id="info"></p>

Answer 2

最快的方法是将按钮的类型从"submit"更改为"button"。这样，您的按钮将不会提交表单，因此页面不会刷新。

<button type="button" value="Send" onclick="show()" id="press">Send</button>

在<form>之外显示数据

2 个答案: