CODEWITHSUNDEEP
javascriptjqueryhtml
OmniOwl
OmniOwl

Reputation: 5709

JavaScript button doesn't work

I am very new to using JavaScript so bear with me. I only finished the different courses found on Codecademy so far.

So I'm trying to make a sign up form for a website where you need a user. I found a pretty cool one on the internet that I changed a bit and also made use of the Datepicker from jQuery. It looks like this:

Sign Up Form

I got code to check whether the user filled out the different fields but it doesn't seem to work. In my index.html file I included the following file:

<script src="js/signupsubmit.js"></script>

And at the bottom of the form I do this:

<div>
    <p id="sign_user" onClick="Submit()">Sign Up</p>
</div>

So good so far. In the JavaScript I have the following code:

function Submit() {
    var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]{2,5}$/;
    var fname = document.form.Name.value,
        lname = document.form.LastName.value,
        femail = document.form.Email.value,
        freemail = document.form.enterEmail.value,
        fpassword = document.form.Password.value,
        dateObject = $("#datepicker").datepicker(
        {
            onSelect: function()
            {
                var dateObject = $(this).datepicker('getDate');
            }
        });
    if( fname == "") {
        document.form.name.focus();
        document.getElementById("errorBox").innerHTML = "Enter First Name";
        return false;
    }
    if( lname == "" )
    {
        document.form.LastName.focus() ;
        document.getElementById("errorBox").innerHTML = "Enter Last Name";
        return false;
    }

    if (femail == "" )
    {
        document.form.Email.focus();
        document.getElementById("errorBox").innerHTML = "Enter your Email Address";
        return false;
    }else if(!emailRegex.test(femail)){
        document.form.Email.focus();
        document.getElementById("errorBox").innerHTML = "Enter a Valid Email Address";
        return false;
    }

    if (freemail == "" )
    {
        document.form.enterEmail.focus();
        document.getElementById("errorBox").innerHTML = "Re-enter the Email Address";
        return false;
    }else if(!emailRegex.test(freemail)){
        document.form.enterEmail.focus();
        document.getElementById("errorBox").innerHTML = "Re-enter a Valid Email Address";
        return false;
    }

    if(freemail !=  femail){
        document.form.enterEmail.focus();
        document.getElementById("errorBox").innerHTML = "The Email Addresses don't Match!";
        return false;
    }


    if(fpassword == "")
    {
        document.form.Password.focus();
        document.getElementById("errorBox").innerHTML = "Enter a Password";
        return false;
    }

    if(dateObject == null) {
        document.form.datepicker.focus();
        document.getElementById("errorBox").innerHTML = "Please Enter a Birthday";
    }
}

I am a bit shaky on trying to read the Datepicker too. But otherwise, can you possibly spot what might be missing in this puzzle? When I press the blue "Sign Up" button, literally nothing happens. I can provide more info if needed.

Upvotes: 1

Views: 147

Answers (1)

Little Santi
Little Santi

Reputation: 8783

You have a mistake addressing the form: The correct formula is not document.form, but document.forms[0]. Or even better, I recommend you to give the form a specific unique name, and address it by that name:

HTML:

<form name="mydata">...</form>

Javascript:

var fm=document.forms.mydata

Also, take care of lowercase/uppercase lettering: Identifiers in Javascript are case-sensitive, which means that the input "Name" must be always addressed as "Name" (you mispelled that identifier in the line document.form.name.focus()).

Upvotes: 3

Related Questions