using modal as submit confirmation

Question

I currently have a form. As per below. 

<form action="/process" id="formTest"  name="formTest" enctype="multipart/form-data" method="POST">
<input type="text">
</form>

I added a modal to confirm on the submit.

<div class="modal fade" id="bondModal">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title"></h4>
  </div>
  <div class="modal-body">
    <p>Test;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" id="accept" class="btn btn-primary">Accept</button>
  </div>
</div><!-- /.modal-content -->

Now if the user submit, the modal of confirmation will be showed, and if the user subsequently choose accept, it will proceed the submit.

The problem is , the subsequent submit never works.

$('#formTest').submit(function(e) {

e.preventDefault();
    $('#bondModal').modal('show');

        $("#accept").click(function(e) {
        $("#formTest").submit();
        e.preventDefault();
        $('#bondModal').modal('hide');



}

        );
    } });

The thing is if I change the code to reset instead of submit..it works for reset ..

$('#formTest').trigger('reset');

Answer 1

The issue is this line:

document.getElementbyname("formTest").submit();

There is no function called "getElementbyname()". It seems you are looking for document.getElementsByName() which returns a NodeList. In that case:

document.getElementsByName("formTest")[0].submit();

However, you can also use the document.forms array:

document.forms["formTest"].submit();

Finally, since your form has an ID, you could also use that:

document.getElementById("formTest").submit();

Answer 2

You've got yourself stuck in a loop.

When you fire the action:

 $("#formTest").submit();

You are not submitting the form because you are calling your own function which prevents the default action:

$('#formTest').submit(function(e) {
    e.preventDefault();
    //do stuff
});

If you want to use the code you have currently you can do 1 of 2 things:

• use one() on the submit function so it only fires once. This would require you to rebind on a reset or cancel

   $('#formTest').one('submit', function(e) { e.preventDefault(); //do stuff }); 

• Or unbind the submit function just before your forced submission.

   $('#formTest').on('submit', function(e) { e.preventDefault(); $("#accept").click(function(e) { $('#formTest').unbind('submit'); $('#formTest').submit(); }); }); 

However, I would go a different way, and take the submit button out of the visible markup on the page. Just put an a tag in the form that you fire the open-modal function from upon click. Then you don't need to do any submission in your code, you just have the standard submit and reset buttons in the modal and they carry out their default behavior:

The markup:

    <form>
        <input type="text">
        <a class="open-modal">Submit</a>

        <div class="modal">
            <h4 class="modal-title">Confirm?</h4>
            <p>Test</p>
            <input type="reset" class="btn btn-default">Cancel</button>
            <input type="submit" class="btn btn-primary">Accept</button>
        </div>
    </form>

And the code:

    $('a.open-modal').on('click', function(e) {
        e.preventDefault();

        $('.modal').fadeIn();
    });

Much simpler. Hope this helps.