Encountering an issue with two identical pages showing the same loading image upon clicking the submit button. Below is a snippet of the code:
<div class="content">
<img src="/images/stroomschema.png" style="padding: 10px;">
<form method="post" action="/result" enctype="multipart/form-data">
<h3>1. Select a PDF version of your schedule.<a href="instruction.html" target="_blank"><img src="/images/questionmark.png" /></a></h3>
<input type="file" name="infile" id="roosterIn"/>
<h3>2. Click on the button below to prepare the schedule.</h3>
<input type="submit" name="upload" value="Please select a schedule first" id="submitIndex" disabled="disabled" />
</form
<img src="/images/loading.gif" style="display: none;" class="loading_image">
<br>
<h5><a href={{ logout_url }}>Logout</a></h5>
</div>
</div>
<script>
$('#roosterIn').change(function() {
$('#submitIndex').removeAttr('disabled');
$('#submitIndex').attr('value', 'Next')
})
$('input[type=submit]').click(function() {
$('.loading_image').attr('style', 'display: block;')
$(this).parents('form').hide()
$(this).parents('form').submit()
})
</script>
Oddly, the .loading_image doesn't appear when expected. Upon inspecting the page in Chrome, the following code is displayed:
<div class="content">
<img src="/images/stroomschema.png" style="padding: 10px;">
<form method="post" action="/result" enctype="multipart/form-data">
<h3>1. Select a PDF version of your schedule.<a href="instruction.html" target="_blank"><img src="/images/questionmark.png" /></a></h3>
<input type="file" name="infile" id="roosterIn"/>
<h3>2. Click on the button below to prepare the schedule.</h3>
<input type="submit" name="upload" value="Please select a schedule first" id="submitIndex" disabled="disabled" />
</form
<br>
<h5><a href={{ logout_url }}>Logout</a></h5>
</div>
</div>
<script>
$('#roosterIn').change(function() {
$('#submitIndex').removeAttr('disabled');
$('#submitIndex').attr('value', 'Next')
})
$('input[type=submit]').click(function() {
$('.loading_image').attr('style', 'display: block;')
$(this).parents('form').hide()
$(this).parents('form').submit()
})
</script>
Curiously, the entire image tag seems to be missing. How could this be happening?