CODEWITHSUNDEEP
javascriptjquery
Ojonugwa Jude Ochalifu
Ojonugwa Jude Ochalifu

Reputation: 27256

Exiting from javascript function not working

I have this javascript function:

function displayMessage() {
    var message = $("#msg").val();

    if (message == "") { 
        alert("You need to enter a message");//alert the user
        return false;
    }

    postData = {
        "message": message,
    };    

    ...

}

What am hoping this achieves is, if the input field is empty, display the alert and remain in the function.If it isn't then continue. My submit button is linked to another page but this page is displayed anyways regardless of what happens in the if statement.

This is the form code:

<form id="post" action="http://localhost:8080/uploadNewMessage" method="post">
    <fieldset>
        <div data-role="fieldcontain">
            <label for="msg" class="input">Message:</label>
            <input type="text" name="msg" id="msg" size="10"/>
        </div>
        <a href="profile-page.html" id="submit" data-role="button" data- theme="b">Submit</a>
    </fieldset>
</form>

and the full javascript code just incase:

$(document).ready(function() {
    // 1. The Registration button
    $("#submit").bind('click', function(event) {

        displayMessage();

    });

});

function doPostRequest(postData) {

    $.ajax({

        type: "POST",
        url: URL,
        dataType: "json",
        data: postData

    });
}

function displayMessage() {
    var message = $("#msg").val();

    if (message == "") { 
        alert("You need to enter a message");//alert the user
        return false;
    }

    postData = {
        "message": message,
    };    

    ...
    doPostRequest(postData);
}

Upvotes: 1

Views: 52

Answers (3)

The Alpha
The Alpha

Reputation: 146269

You may try something like this:

$("#submit").bind('click', function(event) {
    var message = $.trim($("#msg").val());
    if(!message.length) {
        alert("You need to enter a message");
        return false;
    }
    else {
        event.preventDefault();
        doPostRequest({"message":message});
    }
});

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206593

demo

$(function() {
    $("#submit").on('click', function(event) {
        event.preventDefault(); // prevent default anchor behavior
        displayMessage();
    });
});

and also:

function displayMessage() { 
    var message = $.trim( $("#msg").val() ); // trim whitespaces
    if (message === "") { 
        alert("You need to enter a message");
    }else{                              // Use the else statement
      doPostRequest({
        "message" : message
      });   
    }
}

Upvotes: 1

user3697679
user3697679

Reputation:

The event variable that is passed via your click event handler contains a function named preventDefault. If you don't want the form to submit, call this (event.preventDefault()). This will prevent the submit button from submitting the form.

Upvotes: 0

Related Questions