form inside modal won't submit with jQuery

Question

I have a form inside a bootstrap modal that I want to submit via an Ajax request. I've followed along closely with this post. For some reason, I can't get the form to actually submit. Here's the HTML for my modal.

<div id="modal-close" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h3 id="myModalLabel">Edit Introduction</h3>
</div>

<div class="modal-body">
 <form id="modal-form-close" method="post">
  <input type="hidden" name="event_timestamp" value="{{event.timestamp}}">
  <input type="hidden" name="event_desc" value="{{event.desc}}">
  <input type="hidden" name="status"  value="closed">
  <input type="text" name="resolution"  value="">
 </form>
</div>

<div class="modal-footer">
  <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  <button class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>
</div>
</div>
</div>
</div>

And here's my JavaScript:

<script>
$(function(){
$('#modal-form-close').on('submit', function(e){
  e.preventDefault();
  $.ajax({
          url: '/events/edit/{{event.event_id}}/script',
          data: $('#modal-form-close').serialize(),
          type: 'POST',
          success: function(data){
              alert('successfully submitted')},
          error: function(data){
              alert('something went wrong')
          }
     });
});
});
</script>

With the javascript written this way, nothing ever happens when I press submit the form. However, if I change the function to .on('click'), things work as expected. What am I missing?

where is your `type="submit"` field in your form ?, jquery will automatically fire form submission if there is field with `type ="submit"` or you have to manually use `click` in your case ..which is working ..does this help ? — Rahul Dess, Nov 10 '14 at 00:05

jjardel · Accepted Answer · 2014-11-10T14:52:09.203

2

Found the answer here.

I needed to wire the "click" action back to the submit button.

$('button#submit').on('click', function(e){

And add an id=submit to the submit button

<button id="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>

It's amazing how far you can get copy-pasting code from stack overflow.

edited Nov 10 '14 at 14:52

answered Nov 10 '14 at 13:50

jjardel

131
2
9

amazing... or scary? – Jamiec Nov 10 '14 at 14:53
both, but i guess it's more scary actually :/ – Maxim Zubarev Jun 09 '17 at 22:06

score 0 · Answer 2 · answered Nov 10 '14 at 00:03

0

Try to add this type in your button

<button type="submit" class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>

answered Nov 10 '14 at 00:03

vmontanheiro

1,009
9
12

score 0 · Answer 3 · answered Apr 16 '15 at 06:10

I do this:

give a form an ID <form id="submit_modal">
make a button type="button" and tells him what to do when click onClick="document.getElementById('submit_modal').submit();". So the submit button will looks like this :

<button type="button" class="btn btn-primary" onClick="document.getElementById('submit_modal').submit();">Submit</button>

form inside modal won't submit with jQuery

3 Answers3