jQuery Prevent Form Submission

rsmith

I have my jQuery up and running with the exception of one glitch.

I have a form that calls a processing script when the user clicks the submit button through the standard:

<form id="myForm" method="post" action="process.php">

And my jQ is:

// Check if e-mail address already registered
	$(document).ready(function(){
		$('#e1').focusout(username_check);
	});

function username_check(){	
	var email = $('#e1').val();
	if(email == "" || email.length < 4){
		$('#tick').hide();
	}else{
		jQuery.ajax({
		type: "POST",
		url: "signup-check-avail.php",
		data: 'email='+ email,
		cache: false,
		success: function(response){
			if(response == 1){
				$('#tick').hide();
				$('#cross').fadeIn();
				$('#myForm input[type=submit]').click(function(event){
					event.preventDefault();
				});
			}else{
					$('#cross').hide();
					$('#tick').fadeIn();
     			}

			}
		});
		}
}

The part I'm having trouble with, and I may have coded it wrong, not sure, is:

$('#myForm input[type=submit]').click(function(event){
						event.preventDefault();
					});

Basically if the check returns that the user exists, then trying to click on the submit button would fail and the process.php script would never be called. But right now, it still opens the URL.

What did I miss?

rsmith

Okay apparently it does work my browser was just caching the old version of the js file. I deleted, reuploaded it and cleared the cache and the script works. However it brings a new problem...

If the user goes back and corrects the issue, the form should be submitted but adding a simple

$('#myForm input[type=submit]').click(function(){
						$('#myForm').submit();
					};

To the else{} block doesn't work and in fact voids out the preventDefault() above it.

Thanks in advance 😕

traq

I'm not entirely sure I understand your goal correctly, but I think I would take a different approach:

instead of trying to add and remove and override various event handlers every time, why not just use a variable to keep track of whether or not the username was found to be available? Then, attach a handler to the submit event that checks if the username was "good" or not.

demo

rsmith

Your demo is essentially the same but my method SHOULD work as well. I'm wondering why it won't though. It does the same thing without going through the extra step of setting a variable.