CODEWITHSUNDEEP
javascriptphpjqueryajax
I Want Answers
I Want Answers

Reputation: 441

Ajax callback not executing

I have a form page that I intend submitting using Ajax. My plan is to 1. Check if email already exists using Ajax 2. Check if passwords match 3. If it does, switch to another "screen" and 4. Submit the form using Ajax

I'm confused because the validate function does not run. It neither switches screens not alerts when passwords do not match. As such, the form does not get submitted either. My code goes below

$('form input:last-child').click(function(e){
    e.preventDefault();
    var allFields = e.target.parentNode;

    function validate () {
        if (allFields.elements[3].value !== allFields.elements[4].value) {
            return false; // If they don't match, return false
        } else {
            $('#form-div form').css('left', '-70%');
            $('#confirm p').css('margin-left', '-12%'); // else switch screens
        }
    }
    if (validate != false) {
        $('#hidden').load("server_script.php"); // `hidden` is a hidden div somewhere on the page
    } else 
        alert ("Passwords do not match");
});

I'm thinking, if they don't match, the rest of the event listener won't run since the false terminates the function from that point on. So I tried making an instance of the validate function outside the event listener and calling it inside the click function but it won't parse because of dependency variables so I'm not sure how to go about this.

UPDATE Associated HTML attached. (Bonus: the regex pattern does not match 2 or more letters)

<div id=form-div>
<form method=POST action="" >
First Name: <br> <input type=text name=first_name pattern="[a-z]{2,}" required /> <br> <br>
Last Name: <br> <input type=text name=last_name pattern="[a-z]{2,}" required /> <br> <br>
Email: <span id=emailReport></span> <br> <input type=email name=email id=email required /> <br> <br>
Password: <br> <input type=password name=password required pattern=".{6,}" title="Password must be six or more characters" /> <br> <br>
Confirm password: <br> <input type=password name=password required /> <br> <br>
<input type=hidden name=sign_up_date />
<input type=submit value='sign up' />
</form>

<div id=confirm> <p>Some text</p> </div>
</div>

</div>

Upvotes: 2

Views: 61

Answers (3)

RiggsFolly
RiggsFolly

Reputation: 94662

You are not calling the validate function properly

Function calls must have the () i.e. validate() and not validate

$('form input:last-child').click(function(e){
    e.preventDefault();
    var allFields = e.target.parentNode;

    function validate () {
        if (allFields.elements[3].value !== allFields.elements[4].value) {
            return false; // If they don't match, return false
        } else {
            $('#form-div form').css('left', '-70%');
            $('#confirm p').css('margin-left', '-12%'); // else switch screens
        }
    }

    //if (validate != false) {
    if (validate() != false) {  
        $('#hidden').load("server_script.php"); // `hidden` is a hidden div somewhere on the page
    } else 
        alert ("Passwords do not match");
});

Upvotes: 0

Jumpa
Jumpa

Reputation: 918

You forgot to call the 'validate' function. As it seems by your code you just declared the function without executing him.

Upvotes: 1

yk11
yk11

Reputation: 768

The validate function is not being called. Why not simply remove the function definition so the code is part of the click function?

Upvotes: 0

Related Questions