Formularz i dodawanie wierszy do tabeli JS HTML

0

Witam,
Natrafiłem na zadanie, w którym muszę dodać funkcjonalność pozwalającą na dodawanie nowych przedmiotów do tabeli i ich wyświetlanie oraz pokazanie nowej łącznej sumy kosztów wszystkiego.
Kod, do którego mam dodać funkcjonalność:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Zadanko</title>
</head>
<body>
  <header>
    <h1>PRZEDMIOTY</h1>
  </header>
  <main>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>NAZWA_PRZEDMIOTU</th>
          <th>LICZBA</th>
          <th>KOSZT</th>
          <th>RAZEM</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Plecak</td>
          <td>1</td>
          <td>50,99 zł</td>
          <td>50,99 zł</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Krzesło</td>
          <td>4</td>
          <td>25 zł</td>
          <td>100 zł</td>
        </tr>
        <tr>
          <td>KOSZT WSZYSTKICH RAZEM</td>
          <td>150,99 zł</td>
        </tr>
      </tbody>
    </table>
  </main>
  <form>
    <table>
      <thead>
        <tr><td>
          <h2>DODAWANIE NOWEGO PRZEDMIOTU</h2>
        </td></tr>
      </thead>
      <tr>
        <td>NAZWA_PRZEDMIOTU:</td>
        <td><input></td>
      </tr>
      <tr>
        <td>LICZBA:</td>
        <td><input></td>
      </tr>
      <tr>
        <td>KOSZT:</td>
        <td><input></td>
      </tr>
      <tr>
        <td>
          <input type="button" value="dodaj">
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

A więc najpierw zająłem się dodawaniem nowych przedmiotów do tabeli w tym celu tak zmodyfikowałem kod i dodałem plik main.js

HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Zadanko</title>
  <script type="text/javascript" src="main.js"></script>
</head>
<body>
  <header>
    <h1>PRZEDMIOTY</h1>
  </header>
  <main>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>NAZWA_PRZEDMIOTU</th>
          <th>LICZBA</th>
          <th>KOSZT</th>
          <th>RAZEM</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Plecak</td>
          <td>1</td>
          <td>50,99 zł</td>
          <td>50,99 zł</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Krzesło</td>
          <td>4</td>
          <td>25 zł</td>
          <td>100 zł</td>
        </tr>
        <tr>
          <td>KOSZT WSZYSTKICH RAZEM</td>
          <td>150,99 zł</td>
        </tr>
      </tbody>
    </table>
  </main>
  <form>
    <table>
      <thead>
        <tr><td>
          <h2>DODAWANIE NOWEGO PRZEDMIOTU</h2>
        </td></tr>
      </thead>
      <tr>
        <td>NAZWA_PRZEDMIOTU:</td>
        <td><input type="text" name="nazwa" id="nazwa" /></td>
      </tr>
      <tr>
        <td>LICZBA:</td>
        <td><input type="text" name="liczba" id="liczba" /></td>
      </tr>
      <tr>
        <td>KOSZT:</td>
        <td><input type="text" name="koszt" id="koszt" /></td>
      </tr>
      <tr>
        <td>
          <button onclick="addRow();">Add Row</button>
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

JS:

function addRow(){
	// get input values
    var nazwa = document.getElementById('nazwa').value;
    var liczba = document.getElementById('liczba').value;
    var koszt = document.getElementById('koszt').value;
	var suma = (cena*ilosc);
                  
    // get the html table
    // 0 = the first table
    var table = document.getElementsByTagName('table')[0];
                  
    // add new empty row to the table
    // 0 = in the top 
    // table.rows.length = the end
    // table.rows.length/2+1 = the center
    var newRow = table.insertRow(table.rows.length);
	var id = table.rows.length;
                  
    // add cells to the row
    var cel1 = newRow.insertCell(0);
    var cel2 = newRow.insertCell(1);
	var cel3 = newRow.insertCell(2);
	var cel4 = newRow.insertCell(3);
	var cel5 = newRow.insertCell(4);
                  
    // add values to the cells
	cel1.innerHTML = id;
    cel2.innerHTML = nazwa;
    cel3.innerHTML = liczba;
    cel4.innerHTML = koszt;
	cel5.innerHTML = suma;
}

Problem w tym, że nie dodaje mi na koniec tabeli... albo doda na ułamek sekundy i znika tzn. czasem w ogole nic nie dodaje a czasem jest tak ze jak klikne button to doda na mili sekunde i znika, ktos wie gdzie robię błąd?

0

Nie wiem, jakkolwiek próbuje zmodyfikować i dodać funkcjonalność to np. pojawia się nowy wiersz w tabeli na ułamek sekundy i znika
@Edit
Zdaje mi się, że problem tkwi w tym "form" ponieważ po kliknięciu przycisku następuje odświeżenie strony hmmm, jak takie cos rozwiązać? Nie jestem pewny czy moge ingerować i np. usunąć tego "forma"

1 użytkowników online, w tym zalogowanych: 0, gości: 1