jQuery $.submit only works on 1 of 2 forms

[The Letter E]

Hey everybody,

 

I have a form that I am doing a submission with over jquerys AJAX stuff and I had it working great for 1 form, but when the form is loaded with a new id it doesn't catch the submission at all.

 

Form 1 - a form to update user info

Form 2 - a form to add new users

 

the forms are identical, only the id gets swapped depending if 'id' is set in the $_GET array. So basically if the form is calling a specific user id, it knows to load the update form, if no id is called it assumes it is adding a new user and loads the blank form.

 

The update form works fine, but when I submit the addUser form it just submits the form regularly, reloading the entire document.

 

I've spent days trying to figure this out and am a newb to jQuery as it is. Any help is appreciated.

 

Here's the relevant code:

<?php
//MySql results are populating with no problem
##############################
//problem is somewhere below here
##############################

while($row = mysql_fetch_array($result)){
		$username = $row['username'];
		$password = $row['password'];
		$email = $row['recovery'];
		if($row['auth'] == 1){
			$super = 'selected';
			$standard = '';
		}else{
			$standard = 'selected';
			$super = '';
		}
		if($row['active'] == 1){
			$active = 'selected';
			$inactive = '';
		}else{
			$inactive = 'selected';
			$active = '';
		}
	}
}
}

if(isset($_GET['id'])){
$fid = 'updateUser';
}else{
$fid = 'newUser';
}

echo '<form name="updateUser" id="'.$fid.'" action="updates/updateUsers.php">
<table>';
	echo '<tr><td align="right">Username:</td><td><input type="text" name="username" value="'.@$username.'"></td></tr>';
	echo '<tr><td colspan="2"><br></td></tr>';
	echo '<tr><td align="right">Password:</td><td><input type="password" name="password" value="'.@base64_decode($password).'"></td></tr>';
	echo '<tr><td colspan="2"><br></td></tr>';
	echo '<tr><td align="right">Level:</td>
	<td>
	<select name="auth" style="width: 100%;">
	<option value="0" '.@$standard.'>Standard User</option>
	<option value="1" '.@$super.'>Super User</option>
	</select>
	</td></tr>';
	echo '<tr><td colspan="2"><br></td></tr>';
	echo '<tr><td align="right">Status:</td>
	<td>
	<select name="active" style="width: 100%;">
	<option value="0" '.@$inactive.'>Inactive</option>
	<option value="1" '.@$active.'>Active</option>
	</select>
	</td></tr>';
	echo '<tr><td colspan="2"><br></td></tr>';			
	echo '<tr><td align="right">Email:</td><td><input type="text" name="recovery" value="'.@$email.'"></td></tr>';
	if(isset($_GET['id'])){echo '<tr><td colspan="2"><input id="delete" type="checkbox" name="delete"><i>Check this box to delete the user</i></td></tr>';}
	echo '<tr><td colspan="2" align="center"><button type="submit">Update User</button></td></tr>';
	echo '</table></form>';
?>
<script type="text/javascript">
  // attach a submit handler to the form
  $("#updateUser,#newUser").submit(function(event) {
alert('submit');

    // stop form from submitting normally
    event.preventDefault(); 
        
    // get some values from elements on the page:
    var $form = $( this ),
        user = $form.find( 'input[name="username"]' ).val(),
			pass = $form.find( 'input[name="password"]' ).val(),
			auth = $form.find( 'select[name="auth"]' ).val(),
			status = $form.find( 'select[name="active"]' ).val(),
			email = $form.find( 'input[name="recovery"]' ).val(),
        url = $form.attr( 'action' );

					if ($('#delete').is(':checked')) {
				var post_string = 'delete=1&id=<?php echo $_GET['id']; ?>';
				var c = confirm("Are you sure you want to delete this user?");

				if(c==true){
					// Send the data using post and put the results in a div
					$('#editUser').loadWithEffect('pages/'+url+'?'+post_string, function() {  });
				}else{
					alert('User deletion has been cancelled!');
				}

			}else{
			var post_string = 'username='+user+'&password='+pass+'&auth='+auth+'&active='+status+'&recovery='+email+'<?php if(isset($_GET['id'])){echo '&id='.$_GET['id'];} ?>';
				// Send the data using post and put the results in a div
				$('#editUser').loadWithEffect('pages/'+url+'?'+post_string, function() {  });
			}
  });
</script>

 

Thanks,

 

E