how to reset/clear the input field without reloading the input field

Question

I am trying to clear the input field of my HTML table without reloading table In my HTML table i have three columns ItemCode ItemName and Quantity the Quantity column is editable so i want to clear that whenever user clicks on clear button without reloading the page

Snippet

 $(document).ready(function() { var tableData = [{ "Category Code": "C001", "Category Name": "Beverages", "Quantity": "0" }, { "Category Code": "C003", "Category Name": "Juices", "Quantity": "0" }, { "Category Code": "C004", "Category Name": "Soups", "Quantity": "0" }, { "Category Code": "C005", "Category Name": "Cookies", "Quantity": "0" }, { "Category Code": "C006", "Category Name": "Buns", "Quantity": "0" }, { "Category Code": "C007", "Category Name": "Breads", "Quantity": "0" }, { "Category Code": "C008", "Category Name": "Rusks", "Quantity": "0" }, { "Category Code": "C009", "Category Name": "Biscuits", "Quantity": "0" }, { "Category Code": "C010", "Category Name": "Puff", "Quantity": "0" }, { "Category Code": "C011", "Category Name": "Savouries", "Quantity": "0" }, { "Category Code": "C008", "Category Name": "Rusks", "Quantity": "0" }, { "Category Code": "C009", "Category Name": "Biscuits", "Quantity": "0" }, { "Category Code": "C010", "Category Name": "Puff", "Quantity": "0" }, { "Category Code": "C011", "Category Name": "Savouries", "Quantity": "0" }, { "Category Code": "C012", "Category Name": "Cake", "Quantity": "0" } ] function addTable(tableValue) { var col = Object.keys(tableValue[0]); var countNum = col.filter(i => !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. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); tr.classList.add("text-center"); tr.classList.add("head") } for (var i = 0; i < tableValue.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { let tabCell = tr.insertCell(-1); var tabledata = tableValue[i][col[j]]; if (tabledata && !isNaN(tabledata)) { tabledata = parseInt(tabledata).toLocaleString('en-in') } if (tableData[i]['Quantity'] === tableData[i][col[j]]) { tabCell.setAttribute('contenteditable', true); tabCell.classList.add("dataReset"); //this column i am trying to clear/reset tabCell.innerHTML = tabledata; } else { span = document.createElement("span"); span.innerHTML = tabledata; tabCell.appendChild(span) } if (j > 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"); } addTable(tableData); $("#clear").click(function() { //this to reset the data to 0 $(".dataReset")[0].reset(); return false; }); }); 

 head.table-bordered>tbody>tr>td, table.table-bordered>tbody>tr>th { border: 1px solid white; white-space: nowrap; border-collapse: collapse; font-family: Verdana; font-size: 9pt; background-color: rgba(29, 150, 178, 1); font-weight: normal; text-align: center; color: white; } table.table-bordered>tbody>tr>td { border: 1px solid rgba(29, 150, 178, 1); white-space: nowrap; border-collapse: collapse; font-family: Verdana; font-size: 8pt; background-color: rgba(84, 83, 72, .1); padding: 5px 5px 5px 5px; } select { width: 283px; height: 30px; padding: 0px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <form action="" id="form1"> <div class="container" align="center"> <div class="row"> <div class="col-lg-12"> <h6>OUTLET :</h6> <select style="font-family: Verdana;font-size: 8pt;"> <option>JAYANAGAR</option> <option>MALLESHWARAM</option> <option>KOLAR</option> </select> </div> </div> <div class="row"> <div class="col-lg-12"> <h6>CATEGORY :</h6> <select style="margin-bottom:10px;font-family: Verdana;font-size: 8pt;"> <option>C001</option> <option>C002</option> <option>C003</option> </select> </div> </div> <div class="row"> <div class="col-lg-12 table table-responsive" style="margin-bottom:1px;"> <table id="HourlysalesSummary"></table> </div> </div> <div> <button type="submit" class="btn btn-success"> <i class="fas fa-save"></i> Save </button> <button id="clear"> Clear </button> </div> </div> </form> 

another j query method i am trying to reset

  $('#clear').click(function(e){    

            if(confirm("Want to clear?")){
                /*Clear all input type="text" box*/
                $('#form1 input[type="text"]').val('');

            }                   
        });

the above one also reloads the page

am i am trying the write approach but not working it is,anyone have any idea please correct me

Answer 1

Since you are trying to reset to 0 <td> elements you can set their values by using .text() property like following:

$("#clear").click(function() { 
    $('.dataReset').text(0);
    return false;
});

Here's a Fiddle implementing the above with your code.

EDIT : If you want to implement a confirm box just simply do:

$("#clear").click(function() {
    if (confirm('Are you sure?')) {
       $('.dataReset').text(0);
    }
    return false;
});

Updated fiddle.

Answer 2

first i added type="button" to your clear button so it will not be treated as a submit-button:

<button type="button" id="clear"> Clear </button>

Then i changed your reset function to clear the values

$("#clear").click(function() {  //this to reset the data to 0
  if(confirm("Want to clear?"))
    $(".dataReset").text(0)
});

working fiddle

cheers

edit: no need to loop, as Jeremy Thille stated in the comments