title: don't want to refresh page on button click
body: <p>I have A HTML table having input field inside which is <code>autocomplete=on</code> to store the data,what i am doing is i have one drop-down inside the form and having buttons according to requirement.When user clicks on any drop-down table populates according to it and user enter some inputs to the input field</p>
  
  <p>i have provided a <code>View</code> button when user clicks then it shows what user has entered into input fields (all non-zero rows gets populated),on click of view i am hiding view button and showing <code>edit</code> button so that user again can edit after viewing the data</p>
  
  <p>when user clicks on <code>edit</code> i am calling <code>addTable(tableData)</code> my table function and again displaying the table,but on clicking on edit it shows up the Table but all input fields resets to <code>0</code> which not the expected behavior of code,as i am using <code>autocomplete=on</code> it should store the values into the input field until user refresh the page
  I am using <code>autocomplete=on</code> for that,but still it gets refresh</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var tableData = [{
      "Item Code": "1978",
      "Item Name": "Alu Chat-S",
      "Category Name": "Chats"
    },
  
    {
      "Item Code": "1981",
      "Item Name": "SamosaChat-S",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1982",
      "Item Name": "Dahi Samosa Chats-S",
      "Category Name": "regular"
    },
    {
      "Item Code": "1984",
      "Item Name": "Kachori Chats-S",
      "Category Name": "regular"
    },
    {
      "Item Code": "1985",
      "Item Name": "Garam Kachori Chat-S",
      "Category Name": "regular"
    },
    {
      "Item Code": "1986",
      "Item Name": "Dahi Kachori Chat-S",
      "Category Name": "fastfood"
    },
    {
      "Item Code": "1987",
      "Item Name": "Dai Raj Kachori-S",
      "Category Name": "fastfood"
    },
    {
      "Item Code": "1989",
      "Item Name": "Dahi Baby Kachori-S",
      "Category Name": "fastfood"
    },
    {
      "Item Code": "1990",
      "Item Name": "Anar Bhalla-S",
      "Category Name": "fastfood"
    },
    {
      "Item Code": "1992",
      "Item Name": "Jhal Muri-S",
      "Category Name": "fastfood"
    },
    {
      "Item Code": "1994",
      "Item Name": "Dahi Papdi Chat-S",
      "Category Name": "GIFT PACK"
    },
    {
      "Item Code": "2402",
      "Item Name": "ALMOND CHBAR",
      "Category Name": "GIFT PACK"
    },
    {
      "Item Code": "333",
      "Item Name": "A BR SB EX",
      "Category Name": "EXEMPTED"
    },
    {
      "Item Code": "603",
      "Item Name": "AMUL FRESH CREAM",
      "Category Name": "EXEMPTED"
    }
  ]
  
  function addTable(tableData) {
    var col = Object.keys(tableData[0]);
    var countNum = col.filter(i =&gt; !isNaN(i)).length;
    var num = col.splice(0, countNum);
    col = col.concat(num);
    var table = document.createElement("table");
    var tr = table.insertRow(-1); // TABLE ROW.
    var colNum = col.length; //to improve the speed
  
    for (var i = 0; i &lt; colNum + 1; i++) {
      var th = document.createElement("th"); // TABLE HEADER.
      if (i &gt;= colNum) {
        th.innerHTML = "Quantity";
        tr.appendChild(th);
        tr.classList.add("text-center");
        tr.classList.add("head");
      } else {
        th.innerHTML = col[i];
        tr.appendChild(th);
        tr.classList.add("text-center");
        tr.classList.add("head");
      }
    }
    for (var i = 0; i &lt; tableData.length; i++) {
      tr = table.insertRow(-1);
      tr.classList.add("item-row");
      for (var j = 0; j &lt; col.length + 1; j++) {
        //here i am adding a class with the name of the category to each items row.
        var categoryName = tableData[i]["Category Name"];
        tr.dataset.category = categoryName;
  
        let tabCell = tr.insertCell(-1);
        var hiddenField = document.createElement("input");
        hiddenField.style.display = "none";
        var quantityField = document.createElement("input");
        var tabledata = tableData[i][col[j]];
        if (i &gt; -1 &amp;&amp; j &gt;= colNum) {
  
          quantityField.style.border = "none";
          quantityField.style["text-align"] = "right";
          quantityField.setAttribute("name", "Quantity");
          quantityField.setAttribute("autocomplete", "on");
          quantityField.setAttribute("value", "0");
          quantityField.setAttribute("type", "number");
          quantityField.setAttribute("required", "required");
          quantityField.classList.add("dataReset");
          quantityField.toLocaleString('en-IN');
          tabCell.appendChild(quantityField);
        } else {
          if (tableData[i]["Item Code"] === tableData[i][col[j]]) {
            tabCell.innerHTML = tabledata;
            hiddenField.setAttribute("name", "Item_Code");
            hiddenField.setAttribute("value", tabledata);
            tabCell.appendChild(hiddenField);
          }
          if (tableData[i]["Item Name"] === tableData[i][col[j]]) {
            tabCell.innerHTML = tabledata;
            hiddenField.setAttribute("name", "Item_Name");
            hiddenField.setAttribute("value", tabledata);
            tabCell.appendChild(hiddenField);
          }
  
          if (tableData[i]["Category Name"] === tableData[i][col[j]]) {
            tabCell.innerHTML = tabledata;
            hiddenField.setAttribute("name", "Category_Name");
            hiddenField.setAttribute("value", tabledata);
            tabCell.appendChild(hiddenField);
          }
          if (j &gt; 1) tabCell.classList.add("text-right");
        }
      }
  
    }
    var divContainer = document.getElementById("HourlysalesSummary");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
    table.classList.add("table-hover");
    $("#view").on("click", function() {
      var itemRows = document.getElementsByClassName("item-row");
      if (quantityField === 0) {
        tabCell.innerHTML = tabledata.hide();;
  
      }
    });
  }
  
  addTable(tableData);
  var selectedOption = "";
  $("#CategoryName").on("change", function() {
    selectedOption = this.value;
  
    //getting all item rows so i can target them.
    var itemRows = document.getElementsByClassName("item-row");
  
    if (selectedOption === "All") {
      //If "All" then style all rows with visibility: visible.
      for (var i = 0; i &lt; itemRows.length; i++) {
        itemRows[i].style.visibility = "visible";
      }
    } else {
      //If the selectedOption is anything other than "All",
      // firstly i am style all rows with visibility: collapse
      for (var i = 0; i &lt; itemRows.length; i++) {
        itemRows[i].style.visibility = "collapse";
  
      }
      /* alert(itemRows); */
      // then getting all rows which have the selectedOption as a class and style those rows with visibility: visible.
      var selectedItemRows = document.querySelectorAll("[data-category='" + selectedOption + "']");
  
      for (var i = 0; i &lt; selectedItemRows.length; i++) {
        selectedItemRows[i].style.visibility = "visible";
      }
    }
  
  });
  
  function view() {
    //getting all quantity input fields
    var quantityFields = document.getElementsByClassName("dataReset");
    //iterating through all quantity input fields
    for (var i = 0; i &lt; quantityFields.length; i++) {
      if (quantityFields[i].value != 0) {
        //if the input value of this quantity field is not equal to zero then find the closest "item-row"
        //so that we can set this table row to visible
        quantityFields[i].closest(".item-row").style.visibility = "visible";
      } else {
  
        quantityFields[i].closest(".item-row").style.display = "none";
      }
    }
    //change the value of the select menu to "All"
    $('#CategoryName').val('All');
    $('#see').hide();
    $('#edit').show();
  
  
  }
  
  function edit1(event) { //this is what i am trying
    event.preventDefault();
    addTable(tableData);
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"&gt;
  &lt;div class="container" id="divHide"&gt;
    &lt;form id="indentForm" autocomplete="on"&gt;
      &lt;div class="row position-relative"&gt;
  
        &lt;div class="col-lg-4"&gt;
          &lt;h5 id="commonHeader"&gt;Category&lt;/h5&gt;
          &lt;select class="test" id="CategoryName" name="categoryCode"&gt;
            &lt;option&gt;All&lt;/option&gt;
            &lt;option&gt;Chats&lt;/option&gt;
            &lt;option&gt;regular&lt;/option&gt;
            &lt;option&gt;fastfood&lt;/option&gt;
            &lt;option&gt;GIFT PACK&lt;/option&gt;
            &lt;option&gt;EXEMPTED&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr style="border: 1px solid black"&gt;
      &lt;div class="table-responsive"&gt;
        &lt;table class="w-100" id=HourlysalesSummary&gt;&lt;/table&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;button type="submit" id="save"&gt;
        Save
      &lt;/button&gt;
        &lt;button id="see" type="button" onclick="view()"&gt;view&lt;/button&gt;
        &lt;button id="edit" type="button" onclick="edit1(event)" style="display:none"&gt;edit&lt;/button&gt;
  
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying <code>event.preventDefault();</code>but not working</p>
  
  <p>UPDATE: I've added the <code>event</code> to the onclick of the edit button.</p>