<form>禁用我的JavaScript代码

Question

I create a small program for developing my own feelings, but there is a problem. Everything is ok until the <form> tag is used, JavaScript stops working completely.

 var tytul = document.getElementById("k-title"); var opis = document.getElementById("k-description"); var popup = document.getElementById("info_box"); var overlay = document.getElementById("overlay"); var podsumowanie = document.getElementById("summary"); $("#add").on("click", function() { var id = $(".wiersz").length; $('#tabela').append('<tr class="wiersz"><td class="komorka-lewa"> <input id="cecha_' + id + '" type="text" placeholder="Cecha produktu"> </td><td class="komorka-prawa"><input id="cecha-opis_' + id + '" type="text" placeholder="Opis cechy produktu"></td></tr>'); document.getElementById("default-table").style = "display: none"; }); $("#add_photo").on("click", function() { var sciezka = prompt("Podaj link do zdjęcia"); var opis = prompt("Podaj opis zdjęcia dla wyszukiwarek"); $("#gallery").append('<div class="photo-container"><button class="del">Usuń zdjęcie</button><img src="' + sciezka + '" class="photo" alt="' + opis + '"/></div>'); if ($(".photo").length > 0) { document.getElementById("default-gallery").style = "display: none"; } $(".del").on("click", function() { $(this).parent().css("display", "none"); document.getElementById("default-gallery").style = "display: block"; }); }); $("#gen").on("click", function() { if (opis.value.length < 1 || tytul.value.length < 1) { popup.style = "display: block"; overlay.style = "display: block"; document.getElementById("infobox-content").innerHTML = "Uzupełnij wszystkie potrzebne dane, zanim wygenerujesz kartę produktu."; } else { popup.style = "display: block"; overlay.style = "display: block"; document.getElementById("infobox-content").innerHTML = "Karta została wygenerowana, plik z kodem znajduje się w katalogu generate."; podsumowanie.innerHTML = "Tytuł: " + tytul.value + "<br>" + "Opis produktu: " + opis.value + "<br>" + "Cecha produktu: " + cecha + "<br>" + "Opis cechy produktu: " + cechaopis; } }); $("#close").on("click", function() { popup.style = "display: none"; overlay.style = "display: none"; }); 

 body { margin: 0; font-family: 'open sans', sans-serif; font-size: 15px; } .wiersz { background-color: #eee; margin: 0; } #tabela {} .komorka-lewa { padding: 3px 10px; text-align: right; border-right: 1px solid #dbdbdb; } .komorka-prawa { padding: 3px 10px; text-align: left; } #tabela { font-size: 14px; border: none; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; width: 100%; } .cecha, .cecha-opis { border: 0; margin: 0; background: 0; } #gen { display: block; width: 100%; margin-top: 10px; } #add, #gen, #add_photo { border: 0; padding: 10px; background: #222; color: #fff; border-radius: 3px; font-family: 'open sans', sans-serif; font-size: 15px; } #add:hover, #gen:hover, #add_photo:hover { background: green; cursor: pointer; transition-duration: 1s; } #container { max-width: 1050px; margin-left: auto; margin-right: auto; } #overlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 2; position: absolute; } #info_box { background: #fff; position: absolute; z-index: 3; width: 500px; top: 50%; transform: translateY(-50%); padding: 10px; padding-top: 0; left: 50%; margin-left: -250px; } #info_box p:first-child { font-size: 20px; border-bottom: 1px solid #eaeaea; padding-bottom: 10px; } #info_box, #overlay { display: none; } #info_box>p span { cursor: pointer; color: red; } .photo { display: block; width: 100%; } .photo:first-child { margin-top: 25px; } .photo:last-child { margin-bottom: 25px; } #default-gallery { font-size: 14px; border-bottom: 1px solid #dbdbdb; padding: 5px; } .photo-container { position: relative; overflow: hidden; margin-bottom: 25px; } .photo-container:first-child { margin-top: 25px; } .photo-container:last-child { margin-bottom: 25px; } .del { position: absolute; bottom: 50px; right: 25px; background: transparent; border: 3px solid #fff; padding: 10px; font-family: 'open sans', sans-serif; font-size: 15px; color: #fff; border-radius: 3px; } .del:hover { background: #fff; cursor: pointer; transition-duration: 0.5s; color: #222; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="info_box"> <p>Informacja <span id="close" style="float: right;">x</span></p> <p id="infobox-content"></p> </div> <div id="overlay"></div> <div id="container"> <form method="post" action=""> <div style="padding-top: 50px; padding-bottom: 50px;"> <input type="text" value="" id="k-title" placeholder="Tytuł karty" style="display: block; width: 100%; font-size: 30px; border: 0; background: 0; margin-bottom: 25px; text-align: center;"> <input type="text" value="" id="k-description" placeholder="Krótki opis" style="display: block; width: 100%; border: 0; background: 0; text-align: justify; padding: 10px;"> </div> <div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">Specyfikacja techniczna</div> <table id="tabela" border="0" cellspacing="0" cellpadding="5px"> <tbody> <tr> <td colspan="2" id="default-table">Brak dodanej specyfikacji</td> <tr> </tbody> </table> <button style="margin-top: 25px; margin-bottom: 25px;" id="add">Dodaj wiersz</button> <div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">Galeria zdjęć</div> <div id="default-gallery">Brak dodanych zdjęć</div> <div id="gallery"> </div> <button style="margin-top: 25px; margin-bottom: 25px;" id="add_photo">Dodaj zdjęcia</button> <input id="gen" type="submit" value="Generuj kartę" /> </div> </form> <div id="summary"> </div> 

jsfiddle

Answer 1

just change this part of button element code

<button style="margin-top: 25px; margin-bottom: 25px;" id="add">Dodaj wiersz</button>

to:-

<button style="margin-top: 25px; margin-bottom: 25px;" id="add" type="button">Dodaj wiersz</button>

type attribute button is required if we are using javascript on button or else it acting by default as a submit button in form tag

Answer 2

The thing is that inside the form, the first button is considered to be the submit button if no buttons have their type defined.

It's always best to explicitly specify the button type.

So instead of

<button ...></button

use

<button type="button" ...></button>