www.webdeveloper.com
Results 1 to 2 of 2

Thread: ajax/jquery prevent page reload

  1. #1
    Join Date
    Aug 2006
    Posts
    301

    Question ajax/jquery prevent page reload

    i can't figure this out, it was working fine before, and i did a few updates
    and now it only works when the button is pressed but not if i type into the form and press 'enter'.

    i don't want he page to reload at all.

    (also the entire wrapper for my page is hidden using css,
    a loading image is displayed until the onload event fires,
    then the wrapper uses jQuery's .slideDown(2000), so if javascript
    is off they won't even see the form, i'm not concerned about
    browsers with javascript disabled, i *only* want them to be able
    to type in the field and hit enter or click the send button to
    post the data via ajax with no page reload. i'll make it more accessible
    later)

    please help, this is driving me nuts, lol.

    my html code looks like this...

    Code:
        <form name="invbox" action="">
          <span>Invite:</span> 
          <input type="text" id="email" name="email" size="35" value="enter your friend's email here and press enter to send invite">
          <input class="button" type="submit" value="Send">
          <input type="hidden" id="user" name="user" value="nickname">
        </form>
    my external .js file that deals with this form looks like this...

    Code:
    /* invite handler */
    $(".button").click(function() {  
    
      var email = $("input#email").val();  
      var user = $("input#user").val();  
    
      if ( email == ""  || user == "" ) {  
        return false;
      }
    
      var datastring = 'email=' + email + '&user=' + user;  
    
      $.ajax({  
        type: "POST",  
        url: "invite.php",  
        data: datastring,  
        success: function() { $("input#email").val("Invitation Sent!"); }  
      });
    
      return false;
    
    });

  2. #2
    Join Date
    Sep 2010
    Posts
    2
    I am not sure about this. But seems like you are referring to the button using the class name and not its ID or Name.

    <input class="button" type="submit" value="Send">
    $(".button").click(function()

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles