gtilflm gtilflm - 3 years ago 542
Javascript Question

Uncaught ReferenceError: submit_ajax is not defined at HTMLButtonElement.onclick

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download