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>
|
<div>
|
||||||
<label class="form-label">CSV file</label>
|
<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>
|
<span asp-validation-for="Csv" class="text-danger"></span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<fieldset class="border rounded p-3">
|
<fieldset class="border rounded p-3">
|
||||||
@@ -228,7 +228,7 @@ else
|
|||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</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>
|
<div asp-validation-summary="All" class="text-danger"></div>
|
||||||
</form>
|
</form>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -113,4 +113,14 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
if (totalRows > pageSize) {
|
if (totalRows > pageSize) {
|
||||||
showPage(0);
|
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