I am trying to intercept the form submission in HTML, add a value to it, and then continue it's normal submission. I am new to jquery and web development in general. I found you could use the jquery submit function but it's not even executing. The goal is to capture the user's input to the CodeMirror plugin and submit that as part of the form.
Script
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
var instructionsCodeMirror = null
function configureCodeMirror() {
const codemirror_config = {
value: "${assignment.instructions}",
lineNumbers: true,
mode: "text/x-markdown",
lineWrapping: true,
indentWithTabs: true,
lineWiseCopyCut: true,
autoCloseBrackets: true,
}
const instructionsTextArea = document.getElementById("instructions");
instructionsCodeMirror = CodeMirror(function (elt) {
instructionsTextArea.parentNode.replaceChild(elt, instructionsTextArea);
}, codemirror_config);
instructionsCodeMirror.setSize('100%');
}
window.addEventListener("load", configureCodeMirror, false)
$("#edit-assignment").submit( function(eventObj) {
eventObj.preventDefault()
console.log('intercept')
$("<input />").attr("instructions", "hidden")
.attr("name", "something")
.attr("type", "hidden")
.val(instructionsCodeMirror.getValue())
.appendTo(this);
this.submit()
});
</script>
HTML
<form role="form" id="edit-assignment" action="/assignments/${assignment.id}" method="post">
<div class="row gx-4 mb-2">
<div class="col-auto my-auto">
<div class="h-100">
<input id="title" name="title" class="mb-1" value="${assignment.title}"
style="font-weight: bold;font-size: large">
<div class="form-group pt-2"
style="display:flex; flex-direction: row; justify-content: left; align-items: center">
<label for="total-attempts" style="margin-right: 8px">Total Attempts: </label>
<input id="total-attempts" name="total-attempts" class="mb-0 font-weight-normal text-sm"
type="number" value="${assignment.attempts}">
</div>
<p class="mb-0 font-weight-normal text-xs pt-2">
${assignment.referenceId}
</p>
</div>
</div>
</div>
<div class="row">
<div class="row pt-3">
<label for="instructions"
style="font-variant: small-caps;font-weight: bolder">Instructions.</label>
<div class="input-group input-group-outline mb-3">
<textarea id="instructions"
form="edit-assignment"
rows="5">
</textarea>
</div>
</div>
<div class="row pt-3 w-100">
<label for="success-message" style="font-variant: small-caps;font-weight: bolder">Success
Message.</label>
<div class="input-group input-group-outline mb-3">
<textarea id="success-message"
name="success-message"
class="w-100 form-control"
form="edit-assignment"
style="resize: none">${assignment.successMessage}</textarea>
</div>
</div>
<div class="row pt-3 w-100">
<label for="failure-message" style="font-variant: small-caps;font-weight: bolder">Failure
Message.</label>
<div class="input-group input-group-outline mb-3">
<textarea id="failure-message"
name="failure-message"
class="w-100 form-control"
form="edit-assignment"
style="resize: none">${assignment.failureMessage}</textarea>
</div>
</div>
<div class="row pt-3 w-100">
<label for="expected-output" style="font-variant: small-caps;font-weight: bolder">Expected
Output.</label>
<div class="input-group input-group-outline mb-3">
<textarea id="expected-output"
name="expected-output"
class="w-100 form-control"
form="edit-assignment"
style="resize: none">${assignment.expectedOutput}</textarea>
</div>
</div>
<div class="col-sm input-group input-group-outline mb-3">
<input
type="submit"
class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0"
value="Save">
</div>
</div>
</form>
The question linked highlights the differences between onLoad and document read but it does not answer the question of why a jquery function does not work
