JavaScript: Stopping form from refreshing?

Question

I am trying to get my form to stop refreshing on submit and instead I would like to make an ajax call, I haven't done the ajax part yet but its still refreshing?

What have you tried? I have took suggestions on the forum and added 'return false;' after the function is called onSubmit?

$('#message_form').submit(function() {
    postMessage();
    return false;
});

function postMessage() {
    var isValid = true;

    var username = document.forms["post_message_form"]["username"].value;
    var message = document.forms["post_message_form"]["message"].value;

    var errorMessage = "Something went wrong, try again!";

    if (isEmpty(username) || isEmpty(message)) {
        errorMessage = "You can't post with an empty name or message.";
        isValid = false;
    }

    if (!isValid) {
        alert(errorMessage);
    }
    else {
        alert("Your message has been posted.");
    }

    return false;
}

function isEmpty(field) {
    return field == null || field == "";
}

Form:

<form id="message_form" name="post_message_form" method="post">
            <input type="text" class="form-control" placeholder="Whats your name?" name="username">
            <textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
            <input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
        </form>

Not exactly related, but [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) might not be the best possible name for a global function. — Teemu, Jun 16 '17 at 07:42

Rakesh Soni · Answer 1 · 2017-06-16T10:06:10.670

0

EDIT: Updated

There can be certain reasons regarding this kind of issue

postMessage is not accessible

There may be chances that this message is not globally declared
There may be other error in javascript code

Some some piece of code does not work due to error in other parts of javascript code
There may be chances that you have not loaded jquery core library file

If have not include jquery.min.js file your above code will not work (your case - See comments)

Since return false and event.preventDefault(); do the same work in this example you can use one of them

$('#message_form').submit(function(event) {
    event.preventDefault();
    postMessage();
    // return false;
});

To debug the code and find the error you can open developer tools in browser by pressing f12 or select option inspect element by clicking right click on the page

edited Jun 16 '17 at 10:06

answered Jun 16 '17 at 07:41

Rakesh Soni

1,293
2
11
27

It still refreshed, even after adding this. – Keriosk Jun 16 '17 at 07:42
Then there must be a error, have you checked your console? – Rakesh Soni Jun 16 '17 at 07:43
Hi, I have an error saying $ is not defined (on page load)? – Keriosk Jun 16 '17 at 07:44
And this error is before or after you call preventDefault? Did you import ajax lib? – dloeda Jun 16 '17 at 07:44
2

you haven't include jquery core file Inlcude https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.js before the above code – Rakesh Soni Jun 16 '17 at 07:45
Thank you, this has fixed the issue. – Keriosk Jun 16 '17 at 07:45
why are you `preventDefault();` and `return false` one or the other would be adequate – Liam Jun 16 '17 at 08:12

score 0 · Answer 2 · edited Jun 16 '17 at 08:13

Try this code added onsubmit="return postMessage()

<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage()">
        <input type="text" class="form-control" placeholder="Whats your name?" name="username">
        <textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
        <input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
    </form>

score 0 · Answer 3 · answered Jun 16 '17 at 08:03

Try this:

<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage();">
            <input type="text" class="form-control" placeholder="Whats your name?" name="username">
            <textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
            <input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
        </form>

score -1 · Answer 4 · edited Jun 16 '17 at 08:12

-1

use preventDefault instead return false;

$('#message_form').submit(function(event) {
    console.log(123);
    event.preventDefault();
});

https://codepen.io/animhotep/pen/bRBmxm?editors=1011

like in official maual ;) https://api.jquery.com/submit/

edited Jun 16 '17 at 08:12

Liam

27,717
28
128
190

answered Jun 16 '17 at 07:52

Pasha K

357
1
7

how this answer is different from mine? Anyways try to read comment first and u will see his issue was resolved, he hasn't include the jquery core file See comments. – Rakesh Soni Jun 16 '17 at 08:18
you have used useless return false; and haven't example – Pasha K Jun 16 '17 at 09:33

JavaScript: Stopping form from refreshing?

4 Answers4