google reCAPTCHA: iframe src is undefined

Question

HTML:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-- Suggest Modal -->
    <div id="suggestModal" class="modal fade anycard-modal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" id="modal-close" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Business Suggestion</h4>
                </div>
                <div class="modal-body">
                    <div id="suggest-area">
                        <form id="suggestion-form">
                            <div class="form-group">
                                <span class="aster">*</span>
                                <label for="s-name">Name:</label>
                                <input type="text" class="form-control" id="s-name">
                            </div>
                            <div class="form-group">
                                <span class="aster">*</span>
                                <label for="s-email">Email:</label>
                                <input type="text" class="form-control" id="s-email">
                            </div>
                            <div class="form-group">
                                <span class="aster">*</span>
                                <label for="s-idea">Business suggestion:</label>
                                <textarea class="form-control" id="s-idea"></textarea>
                            </div>
                            <div class="form-group">
                                <div class="g-recaptcha" data-sitekey="6LdoqQoUAAAAAHNBx5GxMXYq_8FfxZMUf09bn7QI"></div>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit your suggestion</button>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div><!-- /Suggest Modal -->

I am facing the problem with google reCAPTCHA. It's not loading properly. Then i inspect the browser and see the problem occurs on iframe. It's source is undefined.

<iframe src="undefined?autoplay=1" title="recaptcha widget" width="304" height="78" role="presentation" frameborder="0" scrolling="no" name="undefined"></iframe>

The Ajax code is given below which i used or form submit. Ajax:

$('#suggestion-form').submit(function(e) {
    e.preventDefault();
    var form_data = new FormData();
    var name = $('#s-name').val();
    var email = $('#s-email').val();
    var suggestion = $('#s-idea').val();

    form_data.append('name', name);
    form_data.append('email', email);
    form_data.append('suggestion', suggestion);

    $.ajax({
    url: 'default.php?controller=queries&action=addsuggestion',
    type: 'POST',
    data: form_data,
    processData: false,
    contentType: false,
    success: function(data) {
        if(data.success) {
        $('#suggest-area')
            .find('.alert').remove()
            .end()
            .prepend('<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>Thank you for your valuable suggestion</div>');
        window.setTimeout(function(){
            //$('#suggestModal').modal('hide');
            $('#modal-close').click();
            $('#suggestion-form')[0].reset();
            $('#suggest-area').find('.alert').remove();
        }, 2000);
        }else{
        var error = '';

        switch(data.error) {
            case 'fillFields':
                error = 'Please fill in all the fields';
            break;
            case 'invalidEmail':
                error = 'The provided email is invalid';
            break;
        }
        $('#suggest-area')
            .find('.alert').remove()
            .end()
            .prepend('<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Error:</strong> '+error+'.</div>');

        }
    }
    });

i can't understand why the iframe src is undefined. reCAPTCHA is not loading properly because of the undefined source of iframe. Please help me to solve this problem.