JavaScript: Prevent div's posting inside a form

Question

I have a Bootstrap Modal, which contains several div's within one form. But I have a script for some inputs, which is triggered by the enter key and I want to prevent that in the inputs which use the script, the enter key posts the whole form. I have managed to prevent the form from being sent when the enter key is pressed, but then it doesn't work with the submit button either.

So my question is: Can I (and if so, how) disable submitting with preventDefault() for certain div's within a form?

This is my attempt so far:

$(document).ready(function() {
  $('.dontPost').keyup(function(e) {
    if (e.keyCode == 13) {
      $(this).trigger("enterKey");
      alert("Trigger my function(s)");
      e.preventDefault();
    }
  });
  $('.form').on('submit', function(event) {
    event.preventDefault();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/action_page" method="post" class="form">
  <div class="post">
    <label for="fname">Triggers nothing:</label>
    <input type="text" id="fname" name="fname"><br><br>
  </div>
  <div class="noPost">
    <label for="lname">Press enter in this to trigger the function:</label>
    <input type="text" id="lname" name="lname" class="dontPost"><br><br>
  </div>
  <input type="submit" value="Use the enter key">
</form>

The

$('.form').on('submit', function(event) {
event.preventDefault();
});

prevents the complete form from being sent.

And in this way the form is always sent:

$(document).ready(function () {
        $('.dontPost').keyup(function (e) {
            if (e.keyCode == 13) {
                $(this).trigger("enterKey");
                alert("Trigger my function(s)");
                e.preventDefault();
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/action_page" method="post" class="form">
  <div class="post">
    <label for="fname">Trigger nothing & post:</label>
    <input type="text" id="fname" name="fname"><br><br>
  </div>
  <div class="noPost">
    <label for="lname">Trigger function & dont post:</label>
    <input type="text" id="lname" name="lname" class="dontPost"><br/>
    (But it will still be sent)
  </div>
  <input type="submit" value="Use the enter key">
</form>

The result should be that when pressing the enter key in the input field of the class "dontPost" the form is not sent, only in all other inputs (in this example from the class "post")

I also came across this question. But my functions are not called by "onclick", etc., but with the loading of the page, so a "return false;" at the end does nothing

Does this answer your question? [Prevent form submission on Enter key press](https://stackoverflow.com/questions/905222/prevent-form-submission-on-enter-key-press) — Lautaro Zarandon, Nov 24 '20 at 12:36
I have already come across this question and tried it, but unfortunately it does not work — Toasty, Nov 24 '20 at 12:39
_"I have already come across this question..."_ - Then say so in your question and show us how you implemented it. — Andreas, Nov 24 '20 at 12:40

Toasty · Accepted Answer · 2020-11-25T13:41:30.343

Update:

I was able to solve the problem.

$('.ReplyOptions').on('submit', function (event) {
            event.preventDefault();
        });

This script is not needed at all. Instead I only use the script which determines the special function of the Enter key in certain fields, as follows:

$(document).ready(function () {
        $('.ReplyOptions').keyup(function (e) {
            if (e.keyCode == 13) {
                e.preventDefault();
                $(this).trigger("enterKey");
                AddReplyOption(this);
            }
        });

I just had to add the following code to the fields (which should not send the whole form when pressing the enter key)

onkeypress="return event.keyCode != 13;"

Example:

$(document).ready(function () {
        $('.dontPost').keyup(function (e) {
            if (e.keyCode == 13) {
                $(this).trigger("enterKey");
                alert("Trigger my function(s)");
                e.preventDefault();
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/action_page" method="post" class="form">
  <div class="post">
    <label for="fname">Trigger nothing & post:</label>
    <input type="text" id="fname" name="fname"><br><br>
  </div>
  <div class="noPost">
    <label for="lname">Trigger function & dont post:</label>
    <input type="text" id="lname" name="lname" onkeypress="return event.keyCode != 13;" class="dontPost">
    <p></p>
  </div>
  <input type="submit" value="(Use the enter key in the fields)">
</form>

This is the source from which I have the solution

JavaScript: Prevent div's posting inside a form

1 Answers1

Update: