onclick returns function is not defined

Question

I've a Bootstrap modal for changing a user's password. The problem, however, is that no matter what I try I cannot get the event to fire, be it via onclick or by attaching the button to an event using .on . It simply will not recognise it.

I've tried putting the <script> tags above the modal, below the modal, and even inside the modal, only to always have onclick return Uncaught ReferenceError: updatePassword is not defined . I then removed the onclick , assigned an ID to the submit button, and tried $('#update-password').on('click', function() { ... }); but this wasn't recognised at all.

The culprit in all of this is almost definitely the Bootstrap modal, and I'm guessing it's got something to do with how the browser handles it upon page load.

--

Modal

<!-- Modal -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="changePassModalLabel" aria-hidden="true">
    <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" id="changePassModalLabel">Change Password</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="alert alert-password" style="display: none;">
                        <p></p>
                    </div>
                </div>
                <form role="form" action="#" method="post">
                    <div class="form-group">
                        <label for="password-current">Current Password<span>*</span></label>
                        <input type="password" class="form-control" id="password-current" name="pass-curr" placeholder="Current password...">
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="password-new">New Password<span>*</span></label>
                                <input type="password" class="form-control" id="password-new" name="pass-new" placeholder="New password...">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="password-new-conf">Confirm New Password<span>*</span></label>
                                <input type="password" class="form-control" id="password-new-conf" name="pass-new-c" placeholder="Confirm new password...">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="updatePassword()">Update Password</button>
            </div>
        </div>
    </div>
</div>

Script

<script>
    function updatePassword(){
        console.log('foo');
        /*$.ajax({
            url: url+"ajax/update_password",
            data: {pass-curr : pass-curr, pass-new : pass-new, pass-new-c : pass-new-c},
            async: false,
            success: function(data) {

            },
            error: function(data) {
                $('#alert-password').removeClass('alert-success').addClass('alert-danger').html('<p><strong>Sorry, an error occurred!</strong></p><p>'+data.additional+'</p>').slideDown(200, function() {
                    $('#alert-password').delay(4000).slideUp(200);
                });
            }
        })*/
    };
</script>

My apologies if this has been asked before. The only questions I could seem to find were those asking how to launch a modal through onclick.

Answer 1

The problem is that your event is not getting binded with button

Please find the JSFIDDLE here

In your HTML - do the following in the script tag

    <head> 
    <script> 

    function updatePassword(){

        console.log('updatePassword');

    }

    $(document).ready(function(){


       // $('.btn-primary').on('click',function(){ - This too works
         //   console.log('foo');     
        //});

         $('.btn-primary').on('click',updatePassword);


    });

</script>
</head>