Ajax call to work with onsubmit?

JavaScript
1

Here is a little problem that I cannot figure out…again…

I have a sign up form with onsubmit attached to a js function

This js function calls .ajax to verify the users inputs and outputs the error messages above the input boxes.

I desperate need this function to tell me if error exists or not by returning a true of false value, but since (i am guessing) ajax is asynchronous, the function always returns false before calling ajax:

function submit_signup(){
	var result = true;

	ajax code (if error then result = false)

	return result;
}
2

You will need the onsubmit handler to prevent the default action, so that only when the ajax response comes back and the response is true, you can then submit it from there.

var form = document.querySelector('.signup').onsubmit = function (evt) {
    evt.preventDefault();

    // ajax_stuff_here
};
4

Hi Paul, I think this works now, but how do I call the form to submit after using preventdefault()?

$('#signupForm').submit(function(event){
		event.preventDefault();
		
		$.ajax({
			url: './ajax/check_signup.php',
			method: 'POST',
			data: {user_name:$('#user_name').val(),email:$('#email').val(),
					first_name:$('#first_name').val(),last_name:$('#last_name').val(),
					password:$('#password').val(),password2:$('#password2').val(),},
			dataType: 'json',
			success: function(data){
				for(var input_field in data){
					$('#'+input_field+'-error').html(data[input_field]);
				}
				var if_signup = true;
				for(var key in data){
					if(data[key]!==""){
						if_signup = false;
						break;
					}
				}

				if(if_signup){
					this.unbind('submit');
					this.submit;
				}
			}
		});
	})
5

You shouldn’t need to unbind submit.

I’m not sure if the this keyword is referring to what you think it is either. When dealing with nested levels and changing scopes, it can get confusing as to what this refers to. A good way to prevent confusion is to cache a reference to the form:

$('#signupForm').submit(function(event){
    var form = this;
    ...
});

Now you can submit the form and guarantee that you are calling the right thing, with:

form.submit();
6

Thanks Paul, now I think it works!

Being a perfectionist, I am a bit annoyed by how un-minimalistic my design is.

What I am doing is:

When user clicks the submit button
→ Disable the default action
→ Call ajax to run check_signup.php to check each user input and print error messages
→ if everything goes well, submit the form using javascript
→ form submits to signup.php
→ signup.php writes to database, and then send out activation email by posting toactivation.php

What I don’t like is

  1. due to security reasons, I have to put the input validation code twice, once in check_signup.php and then again in signup.php.

  2. the user won’t be able to read error messages if javascript is disabled

  3. if somehow an user actually runs the check_signup.php they will see a lot of database structure.

7

[quote=“johnhuichen, post:6, topic:198306”]
What I don’t like is1) due to security reasons, I have to put the input validation code twice, once in check_signup.php and then again in signup.php.[/quote]

This is where it’s handy to have the validation code in a separate file, so that you can then include it where and when required in other files.

A standard process to use here is to get things working first without JavaScript, and to then use JavaScript to improve the user experience.

Moving the success validation to the PHP code, so that only an output of true or false is given, will help to deal with that level of security.

8

Great advices Paul, thanks a lot for your help!

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.