防止页面重新加载在表单上单击按钮提交

Question

我有一个HTML表单，该表单是在单击“保存”按钮后提交的，但是页面已重新加载。

我已经将type=button设置为save按钮，但仍在发生

我的代码的功能

• 我有一个内部有HTML表的表单
• 我正在为要后端的每个文件设置属性name=quantity
• 我在Servlet Post方法中使用request.getParameter方法来获取这些值

工作代码段

 var tableDataDraft = [{ "Item Code": "1388", "Item Name": "Bakala Bhath", "Selling Price": "60.0000", "Quantity": "1478.0000" }, { "Item Code": "1389", "Item Name": "Bisibelebath", "Selling Price": "68.0000", "Quantity": "2596.0000" }, { "Item Code": "1409", "Item Name": "Puliogare", "Selling Price": "60.0000", "Quantity": "3698.0000" } ] var itemsQuantiry1 = []; function addTableDraft(tableDataDraft) { var col = Object.keys(tableDataDraft[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 < tableDataDraft.length; i++) { tr = table.insertRow(-1); tr.classList.add("item-row"); for (var j = 0; j < col.length; j++) { let tabCell = tr.insertCell(-1); var hiddenField = document.createElement("input"); hiddenField.style.display = "none"; var tabledata = tableDataDraft[i][col[j]]; if (tableDataDraft[i]['Item Code'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Code'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Item_Name'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Selling Price'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Selling_price'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Outlet Id'] === tableDataDraft[i][col[j]]) { tabCell.innerHTML = tabledata; hiddenField.setAttribute('name', 'Outlet_Id'); hiddenField.setAttribute('value', tabledata); tabCell.appendChild(hiddenField); } if (tableDataDraft[i]['Quantity'] === tableDataDraft[i][col[j]]) { var quantityField = document.createElement("input"); quantityField.style.border = "none"; quantityField.style["text-align"] = "right"; quantityField.setAttribute("name", "Quantity"); quantityField.setAttribute("autocomplete", "on"); if (itemsQuantiry1[i]) { quantityField.setAttribute("value", itemsQuantiry1[i]); } else { quantityField.setAttribute("value", tabledata); } quantityField.setAttribute("index", i); quantityField.setAttribute("type", "number"); quantityField.setAttribute("onfocus", "this.value=''"); quantityField.setAttribute("required", "required"); quantityField.classList.add("dataReset"); quantityField.toLocaleString('en-IN'); tabCell.appendChild(quantityField); } 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"); $(".dataReset").focus(function() { $("#loadDraft").hide(); $("#saveDraft").show(); }); $(".dataReset").on("change", function(e) { itemsQuantiry1[$(this).attr('index')] = e.target.value; }); } addTableDraft(tableDataDraft); var btnSave = document.getElementById("save"); var form = document.getElementById("indentForm"); btnSave.addEventListener("click", function(elem) { //setting form action here for save form.setAttribute("action", "InsertQuantityIndent"); form.setAttribute("method", "Post"); form.submit(); }); 

 <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"> <div class="container" id="divHide"> <form action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on"> <div class="row position-relative"> <div class="col-lg-4"> <h5 id="commonHeader">Outlet Code</h5> <select class="test" id="outletCode" name="outletCode"> <option>S0001</option> <option>S0002</option> <option>S0003</option> </select> </div> <div class="col-lg-4"> <h5 id="commonHeader">Category</h5> <select class="test" id="CategoryName" name="categoryCode"> <option>C001</option> <option>C002</option> <option>C003</option> </select> </div> </div> <hr style="border: 1px solid black"> <div> <button type="button" id="save" class="commonButton"> <i class="fas fa-save"></i>Save </button> </div> <div class="table-responsive"> <table class="w-100" id=HourlysalesSummary></table> </div> </form> </div> 

当我单击保存时，它进入我的servlet，页面加载为空白。

我知道$("#indentForm").submit(function(event){event.preventDefault()....}) ，但是我该如何使用呢？

然后，当我通过帖子中的request.getParameter时，我将能够在后端获取表单值。

我只是想防止在表单上提交，我不想使其变得复杂，因为我必须使用其他方法将数据发布到我不知道的后端。

Answer 1

您应该使用Ajax发送请求，而不要使用默认的html表单提交。 这是一个例子。

 $(document).ready(function(e) { $("form[ajax=true]").submit(function(e) { e.preventDefault(); var form_data = $(this).serialize(); var form_url = $(this).attr("action"); var form_method = $(this).attr("method").toUpperCase(); $.ajax({ url: form_url, type: form_method, data: form_data, cache: false, success: function(returnhtml){ $("#result").html(returnhtml); } }); }); }); 

 body{ font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif; font-size: 13px; } form span{ display: block; margin: 10px; } label{ display: inline-block; width: 100px; } input[type="text"]{ border: 1px soild #ccc; width: 200px; padding: 5px; } input[type="submit"]{ padding: 5px 15px; } span#result{ padding: 5px; background: #ff9; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" action="/url/of/your/backend/endpoint" ajax="true"> <span id="result">jQuery + AJAX form submit script.</span> <span> <label>Message: </label> <input type="text" name="html" placeholder="Howdy..." /> </span> <span> <input type="submit" value="Submit" /> </span> </form>