Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Call AJAX function when submit form

    Hi,

    I am having problems with a form I want to call an Ajax function when the submit button is selected. I want to validate the form using javascript and then to call a PHP file to process the form data and then reurn a message to the page when successful.

    It works to a point where it validates the form but then instead of doign the AJAX, it tries to do the form action and refreshes the page with the #. I am alerting the message 'No errors' and it works until the ajax response part.

    Anyoen any ideas what Im doing wrong? Do I need to disable the "action='#'" onthe form somehow?

    the code is below:

    <form name="register" method="POST" action="#" style="margin:5px 0 " onsubmit="return registerEmail(this);">
    input type="text" name="email" value="Email Address" class="newsletter"/>
    <input type="image" name="register" src="images/register.jpg" alt="Register" class="submit" style="margin-right:15px"/>
    </form>




    PHP Code:
    function registerEmail(form) {
        
        var 
    error false;
        
        var 
    strURL="register.php?email="+form.email.value;
        
        var 
    req getXMLHTTP();
        
        if ((
    form.email.value == "")||(form.email.value == "Email Address")) { 
           
    alert("Please enter your email address.");
           
    form.email.focus( ); 
            
    error true
           
    return false
        }
        
        if (
    validate_email(form.email.value)==false){
           
    alert("Not a valid e-mail address!");
           
    form.email.focus();
           
    error true
           
    return false;
        }
        
        if (!
    error){
            if (
    req) {
                
                if (
    req.readyState == 4) {    
                
    alert('no errors');
                    if (
    req.status == 200) {
                        
                        
    document.getElementById('confirmOK').innerHTML 'Thank you, you have now been registered for our newsletter.';
                    }
                }
                
    req.open("GET"strURL+'&bustcache='+new Date().getTime(), true);
                
    req.send(null);
            }
        }


  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    If you do not want the form to submit, you need to return false at the end of your script.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you that works. Although the code after

    if (req.readyState == 4) {
    if (req.status == 200) {

    isnt being executed for some reason.

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Well you haven't shown an onreadystatechange handler anywhere - you'll want to place that if block inside that.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm running into the same thing. Initially ajax fires the form. The result could be the same form (eg: pwd is invalid). If the result is the same form THEN submitting form is NOT handled via ajax but acts like a typical form submit targeting the page (page reloads). I'm an ajax / mootools noob. Simplified code looks like this...

    $('form_changepwd').addEvent('submit', function(e) {
    e.stop();
    this.set('send', { onComplete: function(response) {
    $('container_div').set('html', response);
    }});
    this.send();
    });

    My form has a submit btn (<input type="submit".... />)


  •  

    Posting Permissions

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