Debugging JavaScript Code Using Browser Developer Tools
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Order Information Lookup</title>
<style>
.container { margin: 20px; }
.search-form { margin-bottom: 20px; }
.field-group { display: flex; gap: 15px; }
.input-field { flex: 1; }
.search-btn { margin-top: 25px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { border: 1px solid #ddd; padding: 8px; }
</style>
</head>
<body>
<div class="container">
<form class="search-form">
<div class="field-group">
<div class="input-field">
<label>Order Number</label>
<input type="text" name="orderNumber" id="orderNumber" maxlength="50">
</div>
<div class="input-field">
<label>Sort By</label>
<select name="sortField" id="sortField">
<option value="order_number">Order Number</option>
</select>
</div>
<div class="search-btn">
<button type="button" id="searchButton" class="primary-btn">Search</button>
</div>
</div>
</form>
<div class="table-section">
<table class="data-table" id="resultTable">
<thead>
<tr>
<th>Hotel ID</th>
<th>Hotel Name</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./js/searchHandler.js"></script>
</body>
</html>
JavaScript Implementation
$(document).ready(function() {
$('#searchButton').on('click', performSearch);
function performSearch() {
const orderNumber = $('#orderNumber').val();
const sortField = $('#sortField').val();
const tableBody = document.getElementById('tableBody');
$.ajax({
method: 'POST',
dataType: 'json',
url: '/orderSearch',
data: {
orderNumber: orderNumber,
sortField: sortField
},
success: function(response) {
let htmlContent = '';
const firstRecord = response[0];
htmlContent += `<tr>
<td>${firstRecord.hotelId}</td>
<td>${firstRecord.hotelName}</td>
</tr>`;
tableBody.innerHTML = htmlContent;
},
error: function() {
alert('Search operation failed');
}
});
}
});
Browser Debugging Process
-
Start Server and Open in Chrome - Launch your web server and navigate to the HTML page in Chrome
-
Access Developer Tools - Press F12 or right-click and select "Inspect"
-
Set Breakpoints - Go to the Sources tab and set breakpoints in your JavaScript code
-
Trigger Debugging - Click the search button to execute the JavaScript and hit breakpoints
-
Debug Interface - Use the debugging controls (step over, step into, continue) to analyze code execution
Alternative Form Submission Method
<input type="button" value="Update Information" onclick="submitFormData(form1.code, form1.name, form1.details, form1.quantity)">
<script>
function submitFormData(codeField, nameField, detailsField, quantityField) {
const codeValue = codeField.value;
const nameValue = nameField.value;
const detailsValue = detailsField.value;
const quantityValue = quantityField.value;
document.getElementById('form1').action =
`dataProcessor?operation=update&code=${codeValue}&name=${nameValue}&details=${detailsValue}&quantity=${quantityValue}`;
document.getElementById('form1').submit();
}
</script>
Retrieve parameters in server-side code using request.getParameter() method.
