I am attempting to extract the content of an input using document.getElementById. It successfully retrieves other values, but it fails specifically for this one.
let title_input = document.getElementById('HomeworkTitle').value;function saveHomework() {
let title_input = document.getElementById('HomeworkTitle').value;
let image_input = document.getElementById('image').value;
let progress_input = document.getElementById('progress').value;
let description_input = document.getElementById('description').value;
let duedate_input = document.getElementById('duedate').value;
axios.post('/storeHomework', {
subject_id: {{ $id->id }},
title: title_input,
image: image_input,
progress: progress_input,
description: description_input,
duedate: duedate_input
}).then((response) => {
console.log(response)
$("#exampleModal .close").click();
}).catch((error) => {
console.log(error.response.data)
});
$('#thisdiv').load(document.URL + ' #thisdiv');
}
saveHomework();
The HTML code captures:
<div class="form-group">
<label for="exampleInputEmail1">Title:</label>
<input type="text" name="HomeworkTitle" id="HomeworkTitle" class="form-control" aria-describedby="help">
<small id="help" class="form-text text-muted">Ex: Investigate blah blah blah.</small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Description:</label>
<textarea type="text" name="description" id="description" class="form-control" aria-describedby="help"></textarea>
<small id="help" class="form-text text-muted">Point out here details about the homework (optional).</small>
</div>
<div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
<input id="image" type="file" name="image" onchange="readURL(this);" class="form-control border-0">
<div class="input-group-append">
<label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Deadline:</label>
<input class="form-control" type="date" id="duedate" name="duedate">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Current progress:</label>
<div class="range-slider">
<input class="range-slider__range" type="range" value="0" min="0" max="100" step="10" id="progress" name="progress">
<span class="range-slider__value">0</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary btn-submit" onclick="saveHomework()">Add Homework</button>
</div>
</div>
The reason behind the malfunction remains unclear.