CODEWITHSUNDEEP
javascriptfunction
Henderikus Parekowhai
Henderikus Parekowhai

Reputation: 51

jQuery .ready is not working

Can anyone tell me why this code wouldn't work? I have an input and I'm trying to check weather or not the input is "start". So I do... how ever nothing is working - not even the .ready but I'm new so I have no idea what the problem is.

HTML

<form id="inputForm" onsubmit="return false;">
    <input id="input" type="text" size="30" autofocus="autofocus" maxlength="100" autocomplete="off"/>
</form>

JS:

var input = "";

$(document).ready(function() {
    $("#inputForm").submit(function() {
    input = $("#input").val().toUpperCase();

    if (input === "START") {
        alert("worked");
    }

    $("#command_input").val("");
})
});

Upvotes: 0

Views: 326

Answers (4)

Boy Code It
Boy Code It

Reputation: 1

If you return false from the event handler, things ought to work.

var input = "";

$(document).ready(function() {
    $("#inputForm").submit(function() {
        input = $("#input-value").val().toUpperCase();

        if (input === "START") {
            alert("worked");
        } else {
            alert("sorry");
        }

        $("#command_input").val("");

        // You have to return false HERE to prevent the default action of a                     
        // form -- send a request to a server, that is

        return false;
    });
});

Upvotes: 0

castletheperson
castletheperson

Reputation: 33516

I suspect that you haven't included jQuery in your webpage. You can import it by adding

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Before the script tag for your code. (https://code.jquery.com/jquery has more jQuery CDNs too)

You really don't need jQuery to do this though. Here's the plain JS equivalent code working here:

var input = "";
document.body.onload = function() {
    document.getElementById("inputForm").addEventListener("submit", function() {
        input = document.getElementById("input").value.toUpperCase();
        if (input === "START") {
            alert("worked");
        }
        document.getElementById("command_input").value = "";
    });
};

Upvotes: 2

Pbk1303
Pbk1303

Reputation: 3802

  1. First include the jquery file using script tag in your html file.

  2. Submit the form using jquery or in the below case I have submitted using a button. Onsubmit the value is taken from the input field and compared.

var input = "";

$(document).ready(function() {
    $("#inputForm").submit(function() {
    input = $("#input-value").val().toUpperCase();

    if (input === "START") {
        alert("worked");
    }
    else
    {
    alert("sorry");
    }

    $("#command_input").val("");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="inputForm" onsubmit="return false;">
    <input id="input-value" type="text" size="30" autofocus="autofocus" maxlength="100" autocomplete="off"/>
    <input type="submit" name="submit" value="submit" />
</form>

Upvotes: 1

omarjmh
omarjmh

Reputation: 13896

After looking at the code here: https://jsfiddle.net/cu7tn64o/1/

It seems to work fine! As the other commenters have mentioned, this is likely because you have not included jQuery in your html file like so:

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

https://code.jquery.com/

Upvotes: 1

Related Questions