Uncaught ReferenceError: submit_ajax is not defined at HTMLButtonElement.onclick

Question

Killing myself here about this error. The function is definitely defined. Chrome keeps saying that it's not.

Stripped down HTML...

<form class="form-signup" id="create_student">

<div class="form-group">

    <div class="row">

        <div class="col-md-6" style="text-align: left">

            <label for="username">Student Username*</label>

            <br>

            <div style="display: block">

                <input class="form-control popover_onfocus" type="text" name="username" id="username" placeholder="Username" value="<?php if (!$form_valid && !empty($_POST)){ echo $username;} ?>" data-toggle="popover" data-placement="top" data-content="Your student can login with this or his/her email address if you provide one.  Have this be betwen <?=$settings->min_un?> and <?=$settings->max_un?> characters please." required>

            </div>

        </div>



        <div class="col-md-6" style="text-align: left">

            <label for="contact_info">Student's Email (Optional)</label>

            <br>

            <div>

                <input class="form-control popover_onfocus" type="text" name="email" id="email" placeholder="Student's Email" value="<?php if (!$form_valid && !empty($_POST)){ echo $email;} ?>" data-toggle="popover" data-placement="top" data-content="This is optional, but if your student has an email, he/she can login with this and also get important emails that are relevant to them for a course, tutoring, etc.">

            </div>          

        </div>

    </div>

    <br>    

</div>





<button onclick="submit_ajax()" class="btn btn-primary btn-block" id="next_button" style="font-size: 24px" disabled="disabled">Create Student Account</button>

Stripped down Javascript...

//For submitting form data via AJAX

$(document).ready(function(){

    function submit_ajax(){

        data = {'username':$('#username').val(),'password':$('#password').val(),'confirm':$('#confirm').val(),'fname':$('#fname').val(),'lname':$('#lname').val(),'email':$('#email').val()}



        $.ajax({

            type: 'POST',

            url: '<?php echo AJAX_DIR; ?>/create_student_account.php',

            data: data,

            success: function() {

                //AJAX success

                $('#success_fail_icon').html('<span class="glyphicon glyphicon-ok-sign lom_big_success_icon"></span>');

                $('#success_fail_message').html('Success! Student account created for ' + data['fname'] + '.');

            },

            error: function() {

                //Ajax failure

                $('#success_fail_icon').html('<span class="glyphicon glyphicon glyphicon-remove-sign lom_big_fail_icon"></span>');

                $('#success_fail_message').html('Uh oh! Something went wrong.  Please try again, or contact us for assistance.');

            }

        });     

    }

});

Clearly, the function IS defined. I have no idea why this isn't working. I'd appreciate any assistance.

Note: I know that the

data

variable has more form elements than are shown. I'm trying to display a stripped down version of my problem instead of the whole thing to make this post not so long.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You define submit_ajax inside another function. it won't be accessible outside it. Just remove $(document).ready(... since it's unnecessary in this case, then you should be good.

Uncaught ReferenceError: submit_ajax is not defined at HTMLButtonElement.onclick

Sign up