submit form on keyup on elements added dynamically via ajax

Question

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>

Answer 1

Because the elements are dynamically added via ajax, you should use $(document).on('keyup', "textarea[name='ingevuldNotitie']", function() {.

Alo, in your forms 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>