JQuery code I wrote stopped working, is there anywrong I've overlooked?

Question

For the below code I want the content of the submit button with the .btn-primary attribute to change to "Success!" only if the input fields are all not null.

At preset the code goes straight to success when the button is press whether or not the fields have content.

I thought it might be because the fields may somehow already have a value that is not null so I ran this code: alert($('#Comment').attr("value")); and it returned undefined in the alert message. Undefined is the same as null in js/jquery isn't it?

I got this code to work earlier and it was typed almost the same way with just a few changes. I undid the changes but it still does not work.

Any help will be appreciated. (If anyone knows this) Are there instances in which the same code could not work at a different time, all things being equal?

<script src="~/Scripts/jquery-2.1.1.min.js"></script>

    $(document).ready(function () {
    var Fname = $('#FirstName').attr("value");
    var Lname = $('#LastName').attr("value");
    var Email = $('#Email').attr("value");
    var Comment = $('#Comment').attr("value");
    $(".btn-primary").click(function () //This block should say, if all fields are not null changed the content of button to "Success!" and change the content of <h1> to "THANKS, I'VE GOT YOUR MESSAGE."
    {

        if (Fname != null && Lname != null && Email != null && Comment != null)
        {
            $("button").html("Success!");           
            $("h1").html("THANKS, I'VE GOT YOUR MESSAGE");
        }

    })
});
</script>

And this is the html on the same page

<form class="form-horizontal" role="form" action="/Home/Contact" method="post">    

<div class="form-group">

    <div class="col-lg-10">

    <input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text"  placeholder="First Name" name="FirstName"/>

    </div>
</div>

<div class="form-group">
    <div class="col-lg-10">  
    <input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName"  type="text" placeholder="Last Name" name="LastName"/>
    <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span>
    </div>
</div>

<div class="form-group">
    <div class="col-md-10">

    <input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email@Address.com"/>
    <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
    </div>
</div>

<div class="form-group">
    <div class="col-lg-10">

    <textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea>
    <span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span>
    </div>
</div>
<div class="form-group">
    <div class="col-lg-10">
    <button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button>
    <input type="reset" class="btn btn-default btn-sm active" value="reset">
    </div>
</div>
</form>

If before, it worked, and now it doesn't, you must ask yourself: what exactly changed? — ArtOfCode, Oct 31 '14 at 14:51
Undefined and null are not the same thing. http://stackoverflow.com/questions/5101948/javascript-checking-for-null-vs-undefined-and-difference-between-and — Sonny, Oct 31 '14 at 14:51
Can you possible provide a more meaningful subject for this question? — Kolban, Oct 31 '14 at 14:51
Thank you everyone for your input. @Kolban, I do try to write as detailed a subject as I can but it's hard sometimes to convey that when grasping at straws at the root cause when seeking help from coding experts. Thank you everyone again! — DevTec, Oct 31 '14 at 15:16

Quince · Accepted Answer · 2014-10-31T15:13:17.003

When your document loads you are storing the value of Fname, Lname ..... so on. The issue is you then use these values in your conditional test but the values will not have changed as they are just the raw value from the first time the page loaded. One quick fix would be to bring these inside the click so on every click they can re evaluated

Also when checking you are only checking for null but these are not going to equal null anyway. Better would be to fully validate them or just test for generic truthy which excludes the falsy values such as null, undefined, empty string

$(document).ready(function () {

        $(".btn-primary").click(function (e)
        {
            var Fname = $('#FirstName').val();
            var Lname = $('#LastName').val();
            var Email = $('#Email').val();
            var Comment = $('#Comment').val();
            //ADDED JUST TO STOP THE FORM SUBMITTING
            e.preventDefault();
            //very quick test but this could be a lot more detailed for true validation on each field
            if (Fname && Lname && Email && Comment) {
                $("button").html("Success!");
                $("h1").html("THANKS, I'VE GOT YOUR MESSAGE");
            }

        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>
<form class="form-horizontal" role="form" action="#" method="post">
    <div class="form-group">
        <div class="col-lg-10">
            <input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-10">
            <input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName" /> <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span>

        </div>
    </div>
    <div class="form-group">
        <div class="col-md-10">
            <input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email@Address.com" /> <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>

        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-10">
            <textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea> <span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span>

        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-10">
            <button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button>
            <input type="reset" class="btn btn-default btn-sm active" value="reset">
        </div>
    </div>
</form>

Thank you, I appreciate your detailed response. It worked perfectly. Thanks again! — DevTec, Oct 31 '14 at 15:14

JQuery code I wrote stopped working, is there anywrong I've overlooked?

1 Answers1