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!

if you want do somthing on Enter key press event read this : https://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript — arman amraei, Aug 21 '20 at 06:41

Aaron · Accepted Answer · 2020-08-26T05:41:27.107

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>

score 3 · Answer 2 · edited Jul 13 '23 at 22:33

3

You may try this...

<script>
    $(document).ready(function(){
     
        $('form').on('submit',function(e){
           $('div#myModal').modal('open')
        })
    })
</script>

See https://api.jquery.com/submit/

edited Jul 13 '23 at 22:33

Michael Freidgeim

26,542
16
152
170

answered Aug 21 '20 at 06:48

Cryszi

53
5

Mauro · Answer 3 · 2020-08-21T06:52:47.000

0

If you want the enter key to work by default you should use type="submit" within the button, but I think you are submitting it via ajax so this is not possible (and not recommended anymore). That said, you need to listen to the keyup event on all input elements and fire your submit function when and if the pressed key is enter.

$("input").on('keyup', function (e) {
    if (e.key === 'Enter' || e.keyCode === 13) {
        // Function to submitting the form and or opening the modals here
    }
})

Anyway I don't understand how you are managing the form submission here. What does that onclick function do? It looks like that function modifies something on the button itself. Are you trying to submit the form via ajax or like the old standard way?

edited Aug 21 '20 at 06:52

answered Aug 21 '20 at 06:45

Mauro

102
14

This answer is definetly not the best way. There is a onSubmit event which can be bound to the form. Listening to event keycode is most of the time not the best thing you can do. – Aaron Aug 21 '20 at 06:47
1

What I suggested is the best way to achieve what requested keeping things are they were in the requester code, otherwise this question should have been **marked as a duplicate and then closed**. There are tons of tutorials and better answers on the best practices on how to submit forms out there, we do not need to reinvent the wheel. But, again, since: the question contains an ambiguous onclick function and the form button is not type=submit, I just gave my 2 cents pointing the user to keyup events which are, inarguably, the best way to interact with the keyboard. – Mauro Aug 21 '20 at 07:18
Yes you are probably right @Mauro. Maybe OP should give more details on his question. – Aaron Aug 21 '20 at 07:29
As there are multiple forms on some pages I need to tell python which form has been submitted so that it runs the correct scripts. The onclick function simply adds that information to the modal submit botton. The modal is built into the template and so is standard across all pages. It contains no information until that button is pressed. – scottapotamus Aug 26 '20 at 05:30

Open bootstrap modal when enter pressed on form

3 Answers3

Linked