HTML Form resets my Javascript variable

Question

Good day!

My form has javascript functions for my buttons for adding rows from table and resetting the text fields in the form itself.

In my add button, I have an incrementing variable, rowCount, for counting the row. It works well and works what I expected. When I put it inside the <form></form> tag, it stuck at 2, doesn't increment and doesn't add rows at all.

Here's my code for our reference and also to be debugged. Thanks in advance!

var rowCount = 1;

function addRow() {
 var table = document.getElementById('tblOrder');
 rowCount = rowCount + 1;
 var row = table.insertRow(rowCount);
 var cell0 = row.insertCell(0);
 var cell1 = row.insertCell(1);
 var cell2 = row.insertCell(2);
 var cell3 = row.insertCell(3);
 var cell4 = row.insertCell(4);
 var cell5 = row.insertCell(5);
 
 cell0.innerHTML = "<input type='text'>";
 cell1.innerHTML = "<input type='number'>";
 cell2.innerHTML = "<input type='text'>";
 cell3.innerHTML = "<input type='text'>";
 cell4.innerHTML = "<input type='text'>";
 cell5.innerHTML = "<input type='text'>";
 alert(rowCount)
}

function resetForm() {
 document.getElementById('orderForm').reset();
 alert('All cleared!')
}

body {
 font-family: Calibri;
 font-weight: bold;
}

#main {
 width: 90%;
 border: 1px solid black;
 margin: auto;
 position: relative;
 padding-bottom: 10px;
}

#mainTitle {
 text-align: center;
 text-decoration: underline;
 /* font-weight: bold; */
 font-size: 36px;
 margin-top: 20px;
 margin-bottom: 20px;
}

#cust, #prod {
 width: 90%;
 position: relative;
 margin: auto;
 border: 1px solid black;
 padding: 20px;
}

#cust {
 margin-bottom: 20px;
}

#prod {
 margin-bottom: 10px;
}

#custTitle, #prodTitle {
 color: blue;
 font-size: 25px;
 /* font-weight: bold; */
 text-decoration: underline;
 margin-bottom: 20px;
 /* position: relative; */
}

#cust p {
 display: block;
}

#cust input {
 display: inline;
}

#right {
 position: absolute;
 top: 0;
 right: 0;
 padding: 10px;
 /* border: 1px solid black; */
}

#right p {
 right: 0;
}

#tblOrder  {
 width: 100%;
 border: 1px solid black;
}

#tblOrder thead {
 background-color: darkgreen;
 color: white;
 font-size: 18px;
}

#tblOrder td {
 text-align: center;
 padding: 5px;
}

#inp1 {
 width: 5%;
}

#inp2 {
 width: 10%;
}

#inp3, #inp5, #inp6 {
 width: 15%;
}

#inp4 {
 width: 40%;
}

#tblOrder tr td input {
 width: 95%;
}

#add {
 color: blue;
 font-weight: bold;
 background-color: white;
 border: 1px solid white;
 margin-top: 10px;
}

#foot {
 position: relative;
 width: 90%;
 margin: auto;
 /* border: 1px solid black; */
}

#buttons {
 position: relative;
 left: 0;
 /* display: inline; */
}

#total {
 position: absolute;
 right: 0;
 /* display: inline; */
}

<!DOCTYPE html>
<html>
 <head>
  <title>Forms</title>
  <link type='text/css' rel='stylesheet' href='style.css'>
  <script type='text/javascript' src='script.js'></script>
 </head>
 <body>
  <div id='main'>
   <div id='mainTitle'>
    Order Form
   </div>
   <form id='orderForm'>
    <div id='cust'>
     <div id='custTitle'>
      Customer
     </div>
     <div id='left'>
      <p>Customer Name: <input type='text' size=80></p>
      <p>Address: <input type='text' size=100></p>
      <p>Contact Name: <input type='text' size=80></p>
      <p>Phone: <input type='text' size=15>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Mobile: <input type='text' size=15></p>
      <p>E-mail Address: <input type='text' size=30>@<input type='text' size=10>.com</p>
     </div>
     <div id='right'>
      <p>Order Date: <input type='text' placeholder='mm/dd/yyyy' size=11></p>
      <p>Order Number: <input type='text' size=5></p>
     </div>
    </div>
    <div id='prod'>
     <div id='prodTitle'>
      Products to Order
     </div>
     <div id='order'>
      <table id='tblOrder'>
       <thead>
        <td id='inp1'>Unit</td>
        <td id='inp2'>Quantity</td>
        <td id='inp3'>Product Code</td>
        <td id='inp4'>Description</td>
        <td id='inp5'>Unit Price</td>
        <td id='inp6'>Total Price</td>
       </thead>
       <tbody>
        <tr>
         <td><input type='text'></td>
         <td><input type='number'></td>
         <td><input type='text'></td>
         <td><input type='text'></td>
         <td><input type='text'></td>
         <td><input type='text'></td>
        </tr>
       </tbody>
      </table>
      <button id='add' onclick='addRow()'>+Row</button>
     </div>
    </div>
    <div id='foot'>
     <div id='total'>
      Total: <input type='text' disabled>
     </div>
     <div id='buttons'>
      <button>Submit</button>
      <button onclick='resetForm()'>Reset</button>
     </div>
    </div>
   </form>
  </div>
 </body>
</html>

The default behavior of a `button` in `form` is to submit. You can either replace the button with an `` tag. Or in the click event prevent the default behavior — karan3112, Feb 28 '18 at 12:27

Lennholm · Answer 1 · 2018-02-28T12:48:48.937

1

If buttons are put inside a form, they become submit buttons by default, meaning they submit the form when clicked. If the form doesn't have an action specified, it will be submitted to the same URL as the page, which results in the page being refreshed. This is what happens in your case.

To prevent a button from submitting the form, set its type to be a generic button instead of a submit button:

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

edited Feb 28 '18 at 12:48

answered Feb 28 '18 at 12:30

Lennholm

7,205
1
21
30

It worked when I put a type attribute in the button :) Thanks – xanderp Mar 09 '18 at 01:42

HTML Form resets my Javascript variable

1 Answers1