Отображение данных за пределами <form>

Question

Заранее скажу, что я новичок. У меня проблема. Я хочу отображать информацию с входов, но они отображаются только на секунду и исчезают.

Я знаю почему: потому что я использую <form>.

Я использую <form>, потому что мне нужна кнопка для сброса формы. Таким образом, в данный момент кнопка сброса работает, а отображать информацию - нет. Я попытался использовать другой блок "раздел", например, и здесь, кнопка отображения работала, но сброс не ->, потому что он работает только с <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 событие button, которое вы должны настраивать, это submit событие form. Прямо сейчас вы пытаетесь установить событие submit для button вверх, но button не имеет события submit, а form делает.

Затем простособытие (form.submit) будет отменено.

Кроме того, не устанавливает события с помощью встроенных обработчиков событий HTML (то есть onclick). Используйте .addEventListener(), как показано ниже (и обсуждено в ссылке, которой я поделился).

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>

Но, что еще лучше, поскольку вы нигде не отправляете данные, вам не нужен элемент form. Просто сделайте сброс вручную, и тогда вам не придется беспокоиться об отправке и отмене.

Кроме того, не используют самозавершающиеся теги (то есть <br/>).

Я также реорганизовал ваш код для эффективности ниже.

// Get your DOM references just once, not every time the event happens.
// Also, make your variables reference the elements directly, not a property
// of the element, like .value. That way, if you ever need to access the
// element for a different reason, you don't have to scan the DOM for it again.
var name = document.getElementById("userName");
var surname = document.getElementById("surname");
var mail = document.getElementById("mail");
var service = document.getElementById("service");
var output = document.getElementById("info");
var reset = document.getElementById("reset");

document.getElementById("press").addEventListener("click", function (event) { 

  var mail_low = mail.value.toLowerCase(); 
  
  output.innerHTML = userName.value + " " + surname.value + "<br>" + 
                       mail_low + "<br>Service: " + service.value;  

});

reset.addEventListener("click", function(){
  name.value = "";
  surname.value = "";
  mail.value = "";
  service.value = "";
  output.innerHTML = "";
});

<div>
    <!-- 
       The default type for an input is text, so: type="text" is not needed. 
       Also, since you won't be submitting data anywhere, the name attribute isn't needed either.
    -->
    Name: <input id="userName"><br>
    Surname: <input id="surname"><br>
    E-mail: <input 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 id="reset" value="Reset">Reset</button>
    <button type="button" value="Send" id="press">Send</button>
</div>

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

Answer 2

Самый быстрый способ сделать это - изменить тип кнопки с "submit" на "button". Таким образом, ваша кнопка не будет отправлять форму, и, следовательно, страница не будет обновляться.

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