CODEWITHSUNDEEP
jqueryformstwitter-bootstrap-3modal-dialogsubmit
Chris
Chris

Reputation: 13

JQuery submit() function not submitting HTML form from button triggered in Twiiter-Bootstrap 3 Modal

I am creating an unsubscribe page that contains a form element followed by a twitter-bootstrap 3 modal, currently it is just HTML/JQuery. The modal is triggered when clicking on a button element within the bottom of the form (type button). Within the modal is a confirmation button (also type button) which has a handler attached to submit the form. The handler is being triggered when clicking the button, but the submit function does not appear to be firing. If I change the handler to trigger on the form button, then submit works. It appears to be just because the confirmation button is within the modal. I would greatly appreciate any help getting submit() to trigger on the modal button, thanks!

JQuery Script:

<script type="text/javascript">
    $(document).ready(function() {  

        // Bring modal up if form is valid
        $("#submit").click(function(e){                     
            isValid = validateForm();
            if(isValid)
            {
                $('#unsubModal').modal('show');                     
            }
        });

        // Submit form when clicking button in modal
        $('#unsub').click(function(e) {
            $('#unsub_form').submit();
            $('#unsubModal').modal('hide');
        });                     

    }); // END $(document).ready(function() {
</script>

Twitter-Bootstrap 3 Modal:

<div id="unsubModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><img id="close_btn" src="img/close.png" alt="Close" width="30px" height="30px"></button>
                <h4 class="modal-title"><img id="so_long" src="img/so_long_white.png" alt="So long!" width="153px" height="64px"></h4>
            </div>
            <div class="modal-body text-center">
                <p>Please feel free to contact us at: &nbsp; <b class="font_lrg"><a href="mailto:[email protected]">[email protected]</a></b><br/>or give us a call at: &nbsp; <b class="font_lrg black">555 555 555</b><br/> during office hours if you wish to re-subscribe to our emails or just have a chat...<br/><br/><span class="font_lrg">have an Amazing day!</span></p>
            </div>
            <div class="modal-footer">
                <button id="unsub" type="button" onclick="form_submit()" class="btn btn-danger" data-dismiss="modal">Unsubscribe</button>
            </div>
        </div>

    </div>
</div>

HTML Form:

<form id="unsub_form" name="unsub_form" action="success.html" method="GET" enctype="multipart/form-data" >                                      

    <div class="form-group">
        <span class="required">*</span><small><label for="email">Please unsubscribe the below address from email notifications</label></small>
        <input id="email" name="email" type="email" class="form-control input-sm" required/>
    </div>

    <div class="form-group">
        <small><label for="reason">Reason for unsubscribing</label></small>
        <select id="reason" name="reason" class="form-control input-sm">
            <option value="0" selected>- Please select an option</option>
            <option value="to many">I recieve to many emails</option>
            <option value="not relevant">The information is not relevant to me</option>
            <option value="badly coded">They don't display or open correctly</option>
            <option value="other">Other (please explain below)</option>
        </select>
    </div>

    <div class="form-group">
        <small><label for="feedback">Feedback</label></small><br />
        <textarea maxlength="300" id="feedback" name="feedback" class="form-control" rows="5"></textarea>
    </div>  

    <button id="submit" type="button" class="btn btn-warning pull-right">Unsubscribe</button>
    <button id="cancel" type="button" class="btn btn-success pull-right" onclick="window.location.href='cancel.html'">Cancel</button>

</form>

Upvotes: 1

Views: 317

Answers (2)

Carlos
Carlos

Reputation: 26

From Mozilla MDN:

If a form control (such as a submit button) has a name or id of submit it will mask the form's submit method.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

Basically you are overriding submit property in the Form Object.

To avoid this I would name the submit button like 'unsub_form_submit' or something coherent

Upvotes: 0

Kim Blyth
Kim Blyth

Reputation: 65

I'm not sure why, but the unsubscribe button with id 'submit' is messing up the form submit. If you change that button to an id of 'sub', the code will work.

I have created a jsfiddle -

https://jsfiddle.net/bbs5tffz/

$("#sub").click(function(e){                     
    //isValid = validateForm();
    if(true)
    {
        $('#unsubModal').modal('show');                     
    }
});

I had to remove the isValid() reference.

Upvotes: 0

Related Questions