У меня есть HTML-форма, которую я отправляю при нажатии кнопки сохранения, но страница перезагружается.
Я дал type=button кнопке сохранения, но все еще происходит
функциональность моего кода
- У меня есть форма с таблицей HTML внутри
- Я задаю атрибут
name=quantity для каждого поля, которое я хочу получить в своей внутренней части - Я использую метод
request.getParameter в своем сервлете * Метод 1017 * для получения этих значений
Фрагмент рабочего кода
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>
Когда я нажимаю "Сохранить", он переходит к моему сервлету, и страница загружается как пустая.
Я знаю о $("#indentForm").submit(function(event){event.preventDefault()....}), нокак я могу использовать это?
Тогда смогу ли я получать значения формы на своем бэкэнде, когда я получаю request.getParameter в своем сообщении.
Я просто хочу запретить отправку в моей форме, и я не могуЯ не хочу усложнять ситуацию, так как я должен использовать другие методы для отправки данных в свой бэкэнд, которые я не знаю.
