AJAX script error uncaught reference error function is not defined

Question

I have the following script which, prevents the form from being submitted and then uses ajax to make a call to a page

HERE is my form

<form method="post" action="makeBid.php" name="apply" id="makeBid">
                <label for="amount">Bid Amount</label>
                <input type="text" id="amount" name="amount" placeholder="Enter Bid Amount"/>
                <label for="completionDate">Completion Date</label>
                <input type="text" id="completionDate" name="completionDate" placeholder="Completion Date"/>
                <label for="apply">Support Your Application</label>
                <textarea name="msg" id="msg" class="application" placeholder="Enter A Message To Support Your Application"></textarea>
                <button name="apply" id="apply" value="<?php echo $_POST['btnSubmit'] ?>" class="btn btndanger">Apply</button>
        </form>
if(isset($_POST['apply'])) {
    require_once('../controller/bids.php');
    $bid = new Bid();
    $bid->setAmount($_POST['amount']);
    $amount = $bid->getAmount();
    $bid->setDate($_POST['completionDate']);
    $date = $bid->getDate();
    $bid->setRemarks($_POST['msg']);
    $msg = $bid->getRemarks();

    echo $bid->processBid($_SESSION['userID'], $_POST['apply'],$amount, $date, $msg);
}

And then my Jquery and AJAX script which prevents default behavior.

 $(function () {
            var form = $('#makeBid');
            var formMessages = $('#formResult');

            // Set up an event listener for the contact form.
            $(form).submit(function (e) {
                // Stop the browser from submitting the form.
                e.preventDefault();

                // Serialize the form data.
                var formData = $(form).serialize();

                // Submit the form using AJAX.
                $.ajax({
                    type: 'POST',
                    url: $(form).attr('action'),
                    data: formData
                }).done(function (response) {
                    // Make sure that the formMessages div has the 'success' class.
                    $(formMessages).removeClass('error').addClass('success');

                    // Set the message text.
                    $(formMessages).html(response); // < html();

                    // Clear the form.
                    $('').val('')
                }).fail(function (data) {
                    // Make sure that the formMessages div has the 'error' class.
                    $(formMessages).removeClass('success').addClass('error');

                    // Set the message text.
                    var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured and your message could not be sent.';
                    $(formMessages).html(messageHtml); // < html()
                });

            });
        });
    </script>

The console error im getting is uncaught reference error function is not defined in the first line of my script. As far as I can tell everything looks alright. Would greatly appreciate a second pair of eyes / opinion to scan over my script.

Much appreciated

This can occur when jQuery is not loaded and the function tries to run. — Saeed Ludeen, Apr 18 '17 at 02:00
Thanks for that let me have a look if jquery gets loaded before my script — Marilee, Apr 18 '17 at 02:01
Did you check the following http://stackoverflow.com/questions/10864833/document-readyfunction-uncaught-referenceerror-is-not-defined — liorsolomon, Apr 18 '17 at 02:04

score 0 · Answer 1 · answered Apr 18 '17 at 02:06

0

It looks ok!

Just check if you opened the <script> tag properly, because in the example there is not present.

If you can copy the error and post here could be more usefull !

answered Apr 18 '17 at 02:06

Alejandro

31
1

TurtleTread · Answer 2 · 2017-04-18T02:21:00.577

0

Two things wrong here:

You PHP code needs to begin with <?php to separate from your HTML
Your ajax response won't be correct because the HTML form is also being sent in the response. You need to either place form action script at another file by itself. Or you need to exclude the HTML form by putting in the else statement of your if(isset($_POST['apply']))

edited Apr 18 '17 at 02:21

answered Apr 18 '17 at 02:10

TurtleTread

1,297
2
12
23

AJAX script error uncaught reference error function is not defined

2 Answers2