Open bootstrap modal when enter pressed on form

Question

I've created a few forms that open up a modal box when submitted. They all work fine whenever the submit button is clicked but if someone were to just press enter within an input box it doesn't work.

I've tried adding the modal options to the input boxes but that just opens the modal as soon as they're selected.

here's the html for one of my forms:

<form method="POST" id="new_group">{% csrf_token %}
    <div class="form-group row justify-content-center">
        <div class="col-10">
            <input type="text" class="form-control border" id="name" name="name" placeholder="Name...">
        </div>
        <button type="button" id="new_btn" class="btn btn-viso" value="new_group" form="new_group" onclick="setSubmitValue('new_btn')" data-toggle="modal" data-target="#confirmationModal"><i class="far fa-save"></i></button>
    </div>
</form>

Thanks!

Answer 1

You can add an event handler on submit to the form. So no matter what submit type (enter or button click) is chosen the modal opens anyway. This should point you into the right direction.

function submit_handler() {
  console.log("modal opened"); //send with ajax?
  $('#exampleModal').modal('show');
  event.preventDefault();
}

function submitform() {
  $('#new_group').submit();
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<form method="POST" id="new_group" onsubmit="submit_handler()">
  <div class="form-group row justify-content-center">
    <div class="col-10">
      <input type="text" class="form-control border" id="name" name="name" placeholder="Name...">
      <input type="submit" id="new_btn" class="btn btn-info">
    </div>
  </div>
</form>

<div class="modal" tabindex="-1" role="dialog" style="display:none" id="exampleModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="submitform()">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>