I have 2 forms with the same ids.
I want when you type a key in the text area with id=ingevuldNotitie
then javascript will submit the form. Is there a way to do this and so how?
<div id="response">
<div id="child_response">
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan();">
<input type="text" id="clientNotitieDatum" value="2022-10-17" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan();">
<input type="text" id="clientNotitieDatum" value="2022-10-18" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
</div>
</div>
<script>
// I tried this
$("#response").bind("keyup", function () {
$(this).closest('[name=clientNotitieDatum]').submit();
});
// And I tried this
$("text[name='ingevuldNotitie']").bind("keyup", function () {
$(this).closest('form').submit();
});
</script>
CodePudding user response:
Because the elements are dynamically added via ajax, you should use $(document).on('keyup', "textarea[name='ingevuldNotitie']", function() {
.
Alo, in your form
s onsubmit
, add an argument to the function:
onsubmit="return notitieOpslaan(this);"
And use that argument to get the form's data, such as clientNotitieDatum
.
See working demo below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="response">
<div id="child_response">
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan(this);">
<input type="text" id="clientNotitieDatum" value="2022-10-17" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan(this);">
<input type="text" id="clientNotitieDatum" value="2022-10-18" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
</div>
</div>
<script>
$(document).on('keyup', "textarea[name='ingevuldNotitie']", function() {
$(this).closest('form').submit();
});
function notitieOpslaan(theForm) {
var clientNotitieDatum = theForm['clientNotitieDatum'].value;
console.log('form would have been submitted', clientNotitieDatum);
return false;
}
</script>