Function error: Uncaught TypeError: undefined is not a function

Question

Made a script that checks if: $("#password") has 9 symbols and if $("#password") = $("#confirm_password").

The problem is when I try to enable the "submit" button... What is wrong with "function submitButton()"?

$("form span").hide();
$('input[type="submit"]').attr("disabled", "true");

var samePass = false;
var eight = false;

var $password01 = $("#password");
var $password02 = $("#confirm_password")

//Why this function doesn't work?
function submitButton() {
  if (samePass && eight){
    $('input[type="submit"]').removeAttr('disabled');
  };
};

//Checks if the pass has 8 symbles
function passwordEvent() {
  if ($password01.val().length > 8) { 
    eight = true;
    $password01.next().hide().submitButton();

  } else {
    $password01.next().show();
  };
};

//Checks if the two passwards are the same
function passwordCheck() {
  if($password02.val() !== $password01.val()) {
    $password02.next().show();
  } else {
    samePass = true;
    $password02.next().hide().submitButton();

  };
};



$password01.focus(passwordEvent).keyup(passwordEvent).focus(passwordCheck).keyup(passwordCheck);
$password02.focus(passwordCheck).keyup(passwordCheck);

$("form span").hide();
$('input[type="submit"]').attr("disabled", "true");

var samePass = false;
var eight = false;

var $password01 = $("#password");
var $password02 = $("#confirm_password")

//Why this function doesn't work?
function submitButton() {
  if (samePass && eight){
    $('input[type="submit"]').removeAttr('disabled');
  };
};

//Checks if the pass has 8 symbles
function passwordEvent() {
  if ($password01.val().length > 8) { 
    eight = true;
    $password01.next().hide().submitButton();

  } else {
    $password01.next().show();
  };
};

//Checks if the two passwards are the same
function passwordCheck() {
  if($password02.val() !== $password01.val()) {
    $password02.next().show();
  } else {
    samePass = true;
    $password02.next().hide().submitButton();

  };
};



$password01.focus(passwordEvent).keyup(passwordEvent).focus(passwordCheck).keyup(passwordCheck);
$password02.focus(passwordCheck).keyup(passwordCheck);

body {
  background: #384047;
  font-family: sans-serif;
  font-size: 10px
}

form {
  background: #fff;
  border-radius: 10px;
  padding: 4em 4em 2em;
  box-shadow: 0 0 1em #222;
  
  max-width: 400px;
  margin: 100px auto;
}

p {
  margin: 0 0 3em 0;
  position: relative;
}

label {
  font-size: 1.6em;
  font-weight:600;
  color: #333;
  
  display: block;
  margin: 0 0 .5em;
}

input {
  display: block;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  outline: none
}

input[type="text"], 
input[type="password"] {
  background: #f5f5f5;
  border: 1px solid #F0F0F0;
  border-radius: 5px;
  
  font-size: 1.6em;
  padding: 1em 0.5em;
}

input[type="text"]:focus, 
input[type="password"]:focus {
  background: #fff
}

span {
  border-radius: 5px;
  padding: 7px 10px;
  background: #2F558E;
  color: #fff;
  
  width: 160px;
  display: block; /* Needed for the width to work */
  
  text-align: center; /* For the inner text */
  
  position: absolute;
  left: 105%;
  top: 25px;
}

span:after {
  content: " ";
  
  position: absolute;
/*  pointer-events: none;*/
  right: 100%;
  top: 50%;
/*
  height: 0;
  width: 0;
*/
  
  border: solid transparent;
/*  border-color: rgba(136, 183, 213, 0);*/
  border-right-color: #2F558E;
  border-width: 8px;
  margin-top: -8px;
}

.enableSub {
  background: #0099FF;
  border: none;
  border-radius: 5px;
  color: white;
  height: 50px;
  box-shadow: 0 3px 0 0 #005C99;
}

.disableSub {
  background: #AEAEAE;
  border: none;
  border-radius: 5px;
  color: white;
  height: 50px;
  }

<!DOCTYPE html>
<html>
<head>
	<title>Sign Up Form</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>

	<form action="#" method="post">
		<p>
			<label for="username">Username</label>
			<input id="username" name="username" type="text">
		</p>
		<p>
			<label for="password">Password</label>
			<input id="password" name="password" type="password">
			<span>Enter a password longer than 8 characters</span>
		</p>
		<p>
			<label for="confirm_password">Confirm Password</label>
			<input id="confirm_password" name="confirm_password" type="password">
			<span>Please confirm your password</span>
		</p>
		<p>
			<input type="submit" class="disableSub" value="SUBMIT">
		</p>
	</form>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

submitButton isn't defined in jquery. It's your custom function. Put the submitButton call on a separate line — danronmoon
– danronmoon, Commented Mar 10, 2015 at 20:17
You can't just tack on .submitButton() to anything, i.e., you can't do this: $password01.next().hide().submitButton(); — Tom
– Tom, Commented Mar 10, 2015 at 20:19

3 revs · Accepted Answer · 2015-03-10 20:51:04Z

3

$password01.next().hide().submitButton();

et al. won't work. You instead need to do;

$password01.next().hide();
submitButton();

You've declared submitButton as a function, not a method on a jQuery object, hence you need to call it as such.

The "undefined is not a function" error appears cryptic at first, but becomes clear once understood.

Since the jQuery object returned from hide() doesn't have a submitButton property (or method), hide().submitButton returns undefined. You're then trying to call that as a function (with the ()), hence JavaScript is telling you that undefined is not a function.

As well as the above, your logic is also flawed. Namely samePass is being set to true the second you click into the password1 field (since, on focus, when they're both blank, $password02.val() === $password01.val()). That means that as soon as password is > 8 chars, both conditions will match, and your submit will be enabled.

To fix this, you should probably be setting samePass and eight to false when they don't match their criteria, and calling submitButton() in all cases to update the state

//Why this function doesn't work?
    function submitButton() {
        if (samePass && eight) {
            $('input[type="submit"]').removeAttr('disabled');
        } else {
            $('input[type="submit"]').attr('disabled', "true");
        }
    };

//Checks if the pass has 8 symbles
function passwordEvent() {
    if ($password01.val().length > 8) {
        eight = true;
        $password01.next().hide();
        submitButton();
    } else {
        eight = false;
        $password01.next().show();
        submitButton();
    };
};

//Checks if the two passwards are the same
function passwordCheck() {
    if ($password02.val() !== $password01.val()) {
        samePass = false;
        $password02.next().show();
        submitButton();
    } else {
        samePass = true;
        $password02.next().hide();
        submitButton();
    };
};

... which then works; http://jsfiddle.net/9qqnqLxm/

edited Mar 10, 2015 at 20:51

community wiki

3 revs
Matt

Sign up to request clarification or add additional context in comments.

5 Comments

Alexey Tseitlin Over a year ago

changed but it doesn't enables the button =(

Matt Over a year ago

Your logic seems all screwed. Why are you hiding $password2 once $password1 gets longer than 8 characters? Can you post your HTML?

Alexey Tseitlin Over a year ago

I am hiding the NEXT element with "next()" =)

Matt Over a year ago

@AlexeyTseitlin: In which case, post your HTML. I'm not clairvoyant, and it's really hard to follow what you're doing.

Matt Over a year ago

@AlexeyTseitlin: See my update. FYI, I've restored the submitButton()'s in the question to as they were when you first posted the question. Don't turn your question into a chameleon question.

Collectives™ on Stack Overflow

Function error: Uncaught TypeError: undefined is not a function

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related