Feature: disable preview button until CSV file is selected
Added validation to prevent users from submitting the upload form without selecting a file first. The preview button is now disabled by default and only enables when a file is selected, improving user experience and preventing empty form submissions. Changes: - Added IDs to file input and preview button - Button starts in disabled state - JavaScript listener enables button when file is selected - Button disables again if file selection is cleared
This commit is contained in:
@@ -165,9 +165,9 @@ else
|
||||
|
||||
<div>
|
||||
<label class="form-label">CSV file</label>
|
||||
<input asp-for="Csv" type="file" class="form-control" accept=".csv" />
|
||||
<input asp-for="Csv" type="file" class="form-control" accept=".csv" id="csvFileInput" />
|
||||
<span asp-validation-for="Csv" class="text-danger"></span>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<fieldset class="border rounded p-3">
|
||||
@@ -228,7 +228,7 @@ else
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Preview Transactions</button>
|
||||
<button type="submit" class="btn btn-primary" id="previewButton" disabled>Preview Transactions</button>
|
||||
<div asp-validation-summary="All" class="text-danger"></div>
|
||||
</form>
|
||||
}
|
||||
|
||||
@@ -113,4 +113,14 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
if (totalRows > pageSize) {
|
||||
showPage(0);
|
||||
}
|
||||
|
||||
// Enable/disable preview button based on file selection
|
||||
const csvFileInput = document.getElementById('csvFileInput');
|
||||
const previewButton = document.getElementById('previewButton');
|
||||
|
||||
if (csvFileInput && previewButton) {
|
||||
csvFileInput.addEventListener('change', function() {
|
||||
previewButton.disabled = !this.files || this.files.length === 0;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user