Displaying data outside

Question

In advance, I say I'm a beginner. I have a problem. I want to display information from inputs but they show only for a second and disappear.

I know why: because I use <form>.

I use <form> because I need a button to reset the form. So, at the moment, with , the button reset works, but to display information doesn't. I tried to use another block "section" for instance and here, display button worked but reset doesnt -> because it work only with <form>.

I've tried create a function for reset inputs, I used reset() but it also works only with <form>. I found out I can use preventDefault(); but I don't know this well and I don't know how it works exactly. May someone help me?

<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>

Scott Marcus · Answer 1 · 2019-11-02T21:17:05.360

It's not a click event of a button you should be setting up, it's the submit event of the form. Right now you are attempting to set the submit event of the button up, but a button doesn't have a submit event, a form does.

Then, simply have the event (the form.submit) be cancelled.

Also, don't set up your events with inline HTML event handlers (i.e. onclick). Use .addEventListener() as shown below (and discussed in the link I shared).

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>

But, better yet, since you aren't submitting data anywhere, you don't need a form element in the first place. Just manually do your reset and then you don't have to worry about submitting and cancelling.

Additionally, don't use self-terminating tags (i.e. <br/>).

I've also reorganized your code for efficiency below.

// 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>

Thanks for help. One quick question yet, What's a different way to set up events? — Constant, Nov 02 '19 at 21:08
@Constant What do you mean a different way? Using `.addEventListener()` in your JavaScript is the proper way. — Scott Marcus, Nov 02 '19 at 21:10
I mean, methods in JS. You said to don't set up them in HTML(in my case show() ) unless you meant something else... — Constant, Nov 02 '19 at 21:15
@Constant Right, don't set them up in HTML. Do what I've shown in both my examples and what I talk about in the link I shared on that topic, use `.addEventListener()` in your JavaScript. — Scott Marcus, Nov 02 '19 at 21:17

Anis R. · Answer 2 · 2019-11-02T21:10:10.153

-1

The quickest way to do this would be to change the button's type from "submit" to "button". Like so, your button will not submit the form, and hence the page will not refresh.

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

edited Nov 02 '19 at 21:10

answered Nov 02 '19 at 20:59

Anis R.

6,656
2
15
37

buttons don't have submit events. Also this listener won't be attached until the first click occurs ....which isn't practical – charlietfl Nov 02 '19 at 21:01
Will also get multiple listeners if used more than once. Just a poor structure overall – charlietfl Nov 02 '19 at 21:06

Displaying data outside

2 Answers2