request.args.get returns None from html. i want to select a option and based on that option search queries will work. i didn’t find the problem. The sql query is working with value but not with variable………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
This the HTML & JS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website</title>
<link rel="stylesheet" href="/static/css/search.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="logo2.png" alt="Your Logo">
<h3>ANPR System</h3>
</div>
<nav>
<ul>
<li><a href="/"><i class="fa fa-home"></i> Dashboard</a></li>
<li><a href="#" class="active"><i class="fa fa-search"></i> Search</a></li>
</ul>
</nav>
</header>
<main>
<section class="search-section">
<h2>Search</h2>
<form class="search-form" id="search-form" action="/data">
<div class="search-options">
<input type="radio" id="show-all" name="query-type" value="all" checked>
<label for="show-all">Show All</label>
<input type="radio" id="search-by-date" name="query-type" value="date">
<label for="search-by-date">Search by Date</label>
<input type="radio" id="search-by-range" name="query-type" value="range">
<label for="search-by-range">Search by Range</label>
<input type="radio" id="search-by-number-plate" name="query-type" value="number-plate">
<label for="search-by-number-plate">Search by Number Plate</label>
<button type="button" id="search-btn">Search</button>
</div>
</form>
<div id="search-by-date-input" style="display: none;">
<input type="text" id="date-input" placeholder="Enter date... YYYY-MM-DD">
</div>
<div id="search-by-range-input" style="display: none;">
<input type="text" id="start-date-input" placeholder="Enter start date... YYYY-MM-DD">
<input type="text" id="end-date-input" placeholder="Enter end date... YYYY-MM-DD">
</div>
<div id="search-by-number-plate-input" style="display: none;">
<input type="text" id="number-plate-input" name="number-plate-input" placeholder="Enter number plate...">
</div>
</section>
<div id="search-results">
<h2>Search Results</h2>
<table id="data-table" class="data-table">
<thead>
<tr>
<th>Number Plate</th>
<th>Date</th>
<th>Time</th>
</tr>
</thead>
<tbody id="data-body">
<!-- Data will be populated here -->
</tbody>
</table>
</div>
</main>
</div>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const showAllRadio = document.getElementById("show-all");
const searchByDateRadio = document.getElementById("search-by-date");
const searchByRangeRadio = document.getElementById("search-by-range");
const searchByNumberPlateRadio = document.getElementById("search-by-number-plate");
const searchByDateInput = document.getElementById("search-by-date-input");
const searchByRangeInput = document.getElementById("search-by-range-input");
const searchByNumberPlateInput = document.getElementById("search-by-number-plate-input");
// Function to show/hide elements based on selected radio button
function handleRadioButtonChange() {
if (showAllRadio.checked) {
hideAllInputs();
} else if (searchByDateRadio.checked) {
showSearchByDate();
} else if (searchByRangeRadio.checked) {
showSearchByRange();
} else if (searchByNumberPlateRadio.checked) {
showSearchByNumberPlate();
}
}
// Function to hide all input fields
function hideAllInputs() {
searchByDateInput.style.display = "none";
searchByRangeInput.style.display = "none";
searchByNumberPlateInput.style.display = "none";
}
// Function to show search by date input
function showSearchByDate() {
hideAllInputs();
searchByDateInput.style.display = "block";
}
// Function to show search by range input
function showSearchByRange() {
hideAllInputs();
searchByRangeInput.style.display = "block";
}
// Function to show search by number plate input
function showSearchByNumberPlate() {
hideAllInputs();
searchByNumberPlateInput.style.display = "block";
}
// Event listener for radio button change
document.querySelectorAll('input[type="radio"]').forEach(function(radio) {
radio.addEventListener("change", handleRadioButtonChange);
});
// Initial call to handle radio button change
handleRadioButtonChange();
});
</script>
<script>
function fetchData(queryType, queryParams) {
let url = `/data?type=${queryType}`;
if (queryParams) {
url += `&${queryParams}`;
}
fetch(url)
.then(response => response.json())
.then(data => {
const tableBody = document.getElementById('data-body');
tableBody.innerHTML = '';
data.forEach(entry => {
const row = document.createElement('tr');
row.innerHTML = `<td>${entry[0]}</td><td>${entry[1]}</td><td>${entry[2]}</td>`; // Assuming data structure is (number_plate, date, time)
tableBody.appendChild(row);
});
});
}
document.getElementById('search-btn').addEventListener('click', () => {
const queryType = document.querySelector('input[name="query-type"]:checked').value;
let queryParams;
if (queryType === 'range')
{
const startDate = document.getElementById('end-date-input').value;
const endDate = document.getElementById('end-date-input').value;
queryParams = `start-date-input=${startDate}&end-date-input=${endDate}`;
} else if (queryType === 'number-plate')
{
const plate = document.getElementById('number-plate-input').value;
queryParams = `number-plate-input=${encodeURIComponent(plate)}`;
//queryParams = `query-type=${queryType}&number-plate-input=${encodeURIComponent(numberPlateInput)}`;
}
else if (queryType === 'date'){
const sdate = document.getElementById('date-input').value;
queryParams = `date-input=${sdate}`;
}
fetchData(queryType, queryParams);
});
</script>
</body>
</html>
This is the flask code
@app.route('/data')
def search_data():
query_type = request.args.get('type')
conn = sqlite3.connect('Vehicle.db') # Update with your database file
cursor = conn.cursor()
if query_type == 'all':
cursor.execute('SELECT * FROM NumberPlate ORDER BY Date DESC, Time DESC')
elif query_type == 'date':
sdate = request.args.get('sdate')
print("Number plate value:", sdate)
cursor.execute('SELECT * FROM NumberPlate WHERE NumberPlate = ?', (sdate,))
elif query_type == 'range':
start_date = request.args.get('startDate')
end_date = request.args.get('endDate')
cursor.execute('SELECT * FROM NumberPlate WHERE Date BETWEEN ? AND ? ORDER BY Date, Time', (start_date, end_date))
elif query_type == 'number-plate':
plate = request.args.get('plate') # request.args.get returns None
print("Number plate value:", repr(plate))
p2 = 'H 2345 AA'
query=("SELECT * FROM NumberPlate WHERE NumberPlate = ?", (plate,))
cursor.execute("SELECT * FROM NumberPlate WHERE NumberPlate = ?", (p2,))
print(query)
else:
# Handle invalid query type
print("Error, SQL Error")
data = cursor.fetchall()
conn.close()
return jsonify(data)
app.run(debug=True, port=5001)
I want to send value from textbox and use it in flask for search query