CODEWITHSUNDEEP
javascripthtmlbootstrap-4bootstrap-modal
scottapotamus
scottapotamus

Reputation: 598

Open bootstrap modal when enter pressed on form

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!

Upvotes: 2

Views: 2640

Answers (3)

Cryszi
Cryszi

Reputation: 53

You may try this...

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

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

Upvotes: 3

Aaron
Aaron

Reputation: 1737

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>

Upvotes: 3

Mauro
Mauro

Reputation: 142

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?

Upvotes: 0

Related Questions