Not able to call AJAX

Question

I am working to create some HTML table by JSON data. I have a servlet from where I am returning some data into JSON format and manipulating this JSON data with javascript. Where I am stuck is my AJAX is not calling.

I have a form where 3 inputs are there FROMDATE, TO DATE and OUTLET outlet is in select option having options 1 as "ALL" and 3 more are there

Here is my HTML form:

      <form id="formId" method="get">
            <div class="container">
                <h4>Start Date:</h4>
                <input type="text" id="startdate" name="fromdate" width="276"
                    placeholder="dd/mm/yyyy" required />

                <h4>End Date:</h4>
                <input type="text" id="enddate" name="todate" width="276"
                    placeholder="dd/mm/yyyy" required />


                <h4>Outlets:</h4>
                <select name="outlet" id="all">
                    <option>ALL</option>
                    <c:forEach var="item" items="${obj.outlet}">
                        <option>${item}</option>
                    </c:forEach>
                </select>

                <br>

                <br>
                <div>

                    <button id="button" class="btn btn-default" type="submit">Search</button>
                </div>

            </div>

        </form>
    <div id="tbl"></div>     //after calling AJAX successfully  here i would populate my table

<script type="text/javascript" src="JavaScript/DateWiseOlWiseCounterWisejs.js"></script>

Now in my JavaScript, I am writing some logic to populate table as I want and calling ajax but that's not successful

Here is my JavaScript:

$(document).ready(function() {
    $("#formId").submit(function(event) {




        $.ajax({
            url : "DateWiseOlwiseCounterWiseServlet",
            method : "GET",
            dataType : "json",
            contentType: "application/json; charset=utf-8",
            data : {
                   fromdate : $("#startdate").val(),
                   todate : $("#enddate").val(),
                   outlet : $("#all").val()

                 },

            success : function(data) {

//          console.log("test",tableValue);
            $("#formId").hide();
            var dataObj = formatData(data);
            addTable(dataObj);



            }

        });






function formatData(data) {
          let toReturn = [];
          let dateWiseObj = {};
          let maxUniqueForOutlets = {};
          data.forEach(function(d) {
            if (!maxUniqueForOutlets[d["outlet"]]) {
              maxUniqueForOutlets[d["outlet"]] = [];
            }
            if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
              maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
            }

            if (!dateWiseObj[d["billdate"]]) {
              dateWiseObj[d["billdate"]] = {};
              dateWiseObj[d["billdate"]][d["outlet"]] = {};
              dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
            } else {
              if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
                dateWiseObj[d["billdate"]][d["outlet"]] = {};
                dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
              } else {
                if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
                  dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
                }
              }
            }

          });

          return {
            dateWiseObj: dateWiseObj,
            maxUniqueForOutlets: maxUniqueForOutlets
          };
        };


        function addTable(dataObj) {
          let dateWiseObj = dataObj.dateWiseObj;
          let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
          let table = document.createElement("table");
          let thead = document.createElement("thead");
          let headerRow = document.createElement("tr");
          let th = document.createElement("th");
          th.innerHTML = "Outlet";
          headerRow.appendChild(th);
          th = document.createElement("th");
          th.innerHTML = "Total";
          headerRow.appendChild(th);
          Object.keys(maxUniqueForOutlets).forEach(function(d) {
            th = document.createElement("th");
            th.innerHTML = d;
            th.colSpan = maxUniqueForOutlets[d].length + 1;
            headerRow.appendChild(th);
          });
          table.appendChild(thead);
          thead.appendChild(headerRow);

          headerRow = document.createElement("tr");
          th = document.createElement("th");
          th.innerHTML = "Date";
          headerRow.appendChild(th);
          th = document.createElement("th");
          th.innerHTML = "Counter";
          headerRow.appendChild(th);
          Object.keys(maxUniqueForOutlets).forEach(function(k) {
            th = document.createElement("th");
            th.innerHTML = "Total";
            headerRow.appendChild(th);
            maxUniqueForOutlets[k].forEach(function(d) {
              th = document.createElement("th");
              th.innerHTML = d;
              headerRow.appendChild(th);
            });
          });
          table.appendChild(thead);
          thead.appendChild(headerRow);

          let tbody = document.createElement("tbody");
          Object.keys(dateWiseObj).forEach(function(k) {
            let row = document.createElement("tr");

            let td = document.createElement("td");
            td.innerHTML = k;
            row.appendChild(td);

            grandTotal = 0;
            outletWiseTotal = {};
            Object.keys(maxUniqueForOutlets).map(function(d) {
              outletWiseTotal[d] = 0;
              if (dateWiseObj[k][d]) {
                Object.keys(dateWiseObj[k][d]).forEach(function(i) {
                  outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
                });
              }
              grandTotal += outletWiseTotal[d];
            });
            td = document.createElement("td");
            td.innerHTML = grandTotal;
            row.appendChild(td);

            Object.keys(maxUniqueForOutlets).map(function(d) {
              td = document.createElement("td");
              td.innerHTML = outletWiseTotal[d];

              row.appendChild(td);
             maxUniqueForOutlets[d].forEach(function(i) {
                td = document.createElement("td");
                td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"] : "0";
                row.appendChild(td);
              });
            });
            tbody.appendChild(row);
            //console.log(outletWiseTotal);
          });
          table.appendChild(tbody);
          let divContainer = document.getElementById("tbl");
          divContainer.innerHTML = "";
          divContainer.appendChild(table);
          table.classList.add("table");
          table.classList.add("table-striped");
          table.classList.add("table-bordered");
        }
    });
});

I am calling the function call inside the success function but nothing is happening. as on clicking on submit button it just reloads the page not even calling the JavaScript file. I am calling my JS file externally or internally nothing is happening.

Answer 1

Change this

<button id="button" class="btn btn-default" type="submit">Search</button>

to

<button id="button" class="btn btn-default" type="button">Search</button>

and Use click event instead of form.submit

$("#button").click(function(event) {

Or you can use event.preventDefault();

Answer 2

Stop the default behavior with event.preventDefault():

 $("#formId").submit(function(event) {
    event.preventDefault();

Because you bound a submit event on the form and in turn you are calling one ajax request. Thus you need to stop the default behavior of the form via as suggested.