jQuery Forum

2.   $('#reset').click(function(){
3.     window.location = 'resetPassword.php';
4.   });

But when I fill in the Email field and the Password field correctly and hit Submit I want it to redirect to another page as well.  But it does not redirect.  I know my Email and Password are correct because my alert('here') window pops up.  Here's the code:

and

help, please,

mike

Now I have a second manager:

1. $('body').on("click", "#addChild", {addChild:true}, checkData);

It's supposed to fire when I click on the 'addChild' button.  However, if I'm in a different text field and click the 'addChild' button the first "blur" manager fires.  The second "click" manager doesn't fire.  So what ends up happening is that any things I have to click on the form (radios, checkboxes, buttons) I must do so twice.  Is there a way around this?

mike

2. if(!$(this).val().length) {
3.       $(this).addClass('emptyField');
4.       error = true;
5. }

Now that's not where the problem lies.  I have another field that contains a drop down box.  When the user selects an appropriate option a new input text field with an id of '#spouseInput' appears and the following code is added to it (class '.required' is added).

2.   if(event.data.statusChange)
3.   {
4.     var value = $("#status").val();   
5.     if(value == 'married' || value == 'relationship')
6.     {
7.       $('#spouse').show();
8.       $('#spouseInput').addClass('required');
9.     }
10.     else
11.     {
12.       $('#spouse').hide();
13.       $('#spouseInput').removeClass('required');
14.     }    
15.   }

Now I have code bound to my function like so:

1. $('.required').bind("blur", {requiredBlur: true}, checkData);

And within function checkData() I have the following code which removes the red border from a required field with the onblur event:

2.     if(event.data.requiredBlur)
3.     {
4.       $('.required').each(function() {
5.           $(this).removeClass('emptyField');
6.         
7.         if(!$(this).val().length)
8.         {
9.           $(this).addClass('emptyField');
10.           error = true;
11.         }
12.       }); 
13.     }

Now this function works on fields with a '.required' class inside the HTML.  But when I add the '.required' class via the addClass() method this code doesn't work.  I don't understand why.

Now if they have another error I want the text in the paragraph to be appended instead of erased.  So I tried this: $('p.error').append('The name field is empty);

But this way, every time I hit submit the same error messages that haven't been fixed duplicate.  I want just the errors which aren't fixed to appear and the others to clear out.

Here's my .PHP file:

2. <?php
3. include_once('../mysqli_connect.php');
4. 
   
5. $email = $_POST['email'];
6. 
   
7.   $query = "SELECT id FROM users WHERE email='$email'";
8.   $result = $mysqli->query($query);
9. 
   
10.   if($result->num_rows == 0)
11.   {
12.     $result->free();
13.     $data['success'] = true;
14.   }
15.   else
16.   {
17.     $result->free();
18.     $data['success'] = false;
19.     $data['message'] = 'This email address has already been registered.';
20.   }
21. 
    
22.   echo json_encode($data);
23. ?>

Here's my HTML:

1. Email Address<input type="text" class="input required" name="email" id="email"  size="20" tabindex="4" value="<?php echo $_POST['email'];?>" />

And here's my jQuery:

2. $(document).ready(function(){
3.   $.ajaxSetup ({  
4.     cache: false  
5.   });
6.   $('#email').blur(function() {
7.     $.post('duplicateEmail.php', {email: $('#email').val()}, 
8.       function(data){
9.         $('p.error').html(data.message);
10.       }, 
11.       'json');
12.     return false;
13.   });
14. });

If anyone has any ideas I would really appreciate it.

mike

thanks, 

mike

2. $(document).ready(function(){
3.   $('<div id="navigation_blob"></div>').css({
4. width: $('#navigation li:first a').width() + 10,
5. height: $('#navigation li:first a').height() + 10
6. }).appendTo('#navigation').hide();
7. 
   
8.   $('#navigation a').hover(function(){ 
9.     // Mouse over function
10.  $('#navigation_blob').animate(
11.       {width: $(this).width() + 10, left: $(this).position().left}
12.     );
13.   }, function() { 
14.  // Mouse out function
15.  var leftPosition = $('#navigation li:first a').position().left;
16.  $('#navigation_blob').animate(
17.       {width:'hide'},
18. {duration:'slow', easing: 'easeOutCirc', queue:false}
19. ).animate({left: leftPosition}, 'fast' );
20.   });
21. });

and here's the CSS for #navigation_blob:

I'm not sure what exactly is supposed to happen but I'm guessing that background color isn't supposed to disappear like it does.  Anyway, here's the code the book provides.  Maybe someone could tell me what's wrong with it?

here's the jQuery:

2. $(document).ready(function(){
3.   $('<div id="navigation_blob"></div>').css({
4. width: $('#navigation li:first a').width() + 10,
5. height: $('#navigation li:first a').height() + 10}).appendTo('#navigation');
6. 
   
7.   $('#navigation a').hover(function(){ 
8.     // Mouse over function
9.  $('#navigation_blob').animate(
10.       {width: $(this).width() + 10, left: $(this).position().left},
11.    {duration: 'slow', easing: 'easeOutElastic', queue: false});
12.   }, function() { 
13.  // Mouse out function
14.  var leftPosition = $('#navigation li:first a').position().left;
15.  $('#navigation_blob').animate(
16.       {width:'hide'},
17. {duration:'slow', easing: 'easeOutCirc', queue:false}
18. ).animate({left: leftPosition}, 'fast' );
19.   });
20. });

and here's the CSS:

thanks,

mike