Ajax form submission uncaught error when click on submit button

Question

I am looking to process data in popup as ajax and display successful message inside popup only, Nothing is happening when I click on 'Submit An Offer' button, in console logs I saw uncaught error.

Popup Modal:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal<?php echo esc_html($post->ID);?>" data-whatever="@getbootstrap">Submit Offer</button>
                                    <div class="modal fade" id="exampleModal<?php echo esc_html($post->ID);?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Submit Your Offer for <?php echo esc_html($post->post_title);?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p class="statusMsg"></p>
        <form role="form">
     <div class="form-group row">
            <label class="col-md-12"  for="Name"><?php  esc_html_e( 'Name', 'ivproperty' ); ?><span class="red-star">*</span></label>
            <input  class="col-md-12" id="name" name="name" type="text" required>
         <imput type="hidden" id="id" value="<?php $post->ID ?>">
     </div>
        <div class="form-group row">
                <label for="email" class="col-md-12"><?php  esc_html_e( 'Email', 'ivproperty' ); ?><span class="red-star">*</span></label>
             <input class="col-md-12"  id="email" type="text" required>
     </div>
                <div class="form-group row">
                <label for="price" class="col-md-12"><?php  esc_html_e( 'Price', 'ivproperty' ); ?><span class="red-star">*</span></label>
             <input class="col-md-12"  id="price" type="number" required>
     </div>
        <div class="form-group row">
                    <label for="purchase_type" class="col-md-12"><?php  esc_html_e( 'Purchase Type', 'ivproperty' ); ?><span class="red-star">*</span></label>
<select class="col-md-12" id="purchase_type" required>
  <option disabled selected value> -- select an option -- </option>
  <option value="Cash">Cash</option>
  <option value="Conventional Loan">Conventional Loan</option>
  <option value="FHA Loan">FHA Loan</option>
  <option value="MSHDA Conventional Loan">MSHDA Conventional Loan</option>
  <option value="MSHDA FHA Loan">MSHDA FHA Loan</option>
  <option value="Land Contract">Land Contract</option>
</select>
     </div>
 <div class="modal-footer">                 
                                        
                            <button type="button" class="btn btn-primary submitBtn" onclick="submitContactForm()">Submit An Offer</button>
                        </div>  
</form>
      </div>
      <div class="modal-footer">
        <?php echo esc_html($post->ID);?>
      </div>
    </div>
  </div>
</div>

Script:

<script>
function submitContactForm(){
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    var name = $('#name').val();
    var email = $('#email').val();
    var price = $('#price').val();
    var purchase_type = $('#purchase_type').val();
    var id = $('#id').val();
    if(name.trim() == '' ){
        alert('Please enter your name.');
        $('#inputName').focus();
        return false;
    }else if(email.trim() == '' ){
        alert('Please enter your email.');
        $('#inputEmail').focus();
        return false;
    }else if(email.trim() != '' && !reg.test(email)){
        alert('Please enter valid email.');
        $('#inputEmail').focus();
        return false;
    }else{
        $.ajax({
            type:'POST',
            url:'<?php get_template_directory_uri(); ?>/submitoffer.php',
            data:'OfferSubmit=1&name='+name+'&email='+email+'&price='+price+'&purchase_type='+purchase_type+'&id='+id,
            beforeSend: function () {
                $('.submitBtn').attr("disabled","disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success:function(msg){
                if(msg == 'ok'){
                    $('#name').val('');
                    $('#email').val('');
                    $('#price').val('');
                    $('#purchase_type').val('');
                    $('.statusMsg').html('<span style="color:green;">Offer Submitted Successfully.</p>');
                }else{
                    $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                }
                $('.submitBtn').removeAttr("disabled");
                $('.modal-body').css('opacity', '');
            }
        });
    }
}
</script>

Error I'm seeing in console log:

What I want is when user open's popup and fill the form and then submit it, data should get processed inside popup only and display the status result.

This question doesn't answer my problem as pop-up modal stopped working after applying solution provided in a little similar question.

Answer 1

Try to put your function inside this:

$(function() {
 // your code here
});

Or this:

(function( $ ) {
 // your code here
} )( jQuery );