AJAX form submission is not functioning

Question

I'm trying to make a set of JavaScript functions that will allow me to load and submit forms dynamically. I have managed to create a working function that loads the form into the page, but I cannot get the submit function to work correctly. What happens is, when I click submit, the form that had loaded in already (using JavaScript load function) disappears and the original content reappears. Also the alert in the submit function does not appear.

I have looked all over this site and found similar issues, but none that load the form in using AJAX then submit using AJAX, all of the others already have the form loaded.

Any help would be much appreciated, I am very new to using AJAX.

Form

echo $Error;
echo '<form id="login" method="post">';
echo '<input type="test" name="Email" placeholder="[email protected]"';
if(isset($Email)) echo "value = ".$Email;
echo '      />'."<br />";
echo '<input type="password" name="Pass" placeholder="Password" />'."<br />";
echo '<input type="submit" value = "Login"/>'."<br />";
echo '</form>';

Load page Function

function Page(url,output)
{
    var Request = '';
    if (window.XMLHttpRequest)
    {
        Request=new XMLHttpRequest();
    }
    else
    {
        Request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    Request.onreadystatechange=function()
    {
        if (Request.readyState==4 && Request.status==200)
        {
            document.getElementById(output).innerHTML = Request.responseText;
        }
    }
    Request.open("GET",url,true);
    Request.send();
}

Submit function

$(function () {
$('form#login').on('submit', function(e) {
    alert('Found');
    $.ajax({
        type: 'post',
        url: 'php/login.php',
        data: $(this).serialize(),
        success: function (complete) {
            document.getElementById('output').innerHTML = complete;
        }
    });
    e.preventDefault();
  });
});

if you're using e.preventDefault, does this not stop the on submit from working? — Andy Holmes
– Andy Holmes, Commented Dec 19, 2013 at 11:21
@AndyHolmes Yes, it does, but that's what they want. You don't want to both submit via an AJAX request and a regular form submission. — Anthony Grist
– Anthony Grist, Commented Dec 19, 2013 at 11:23

Anthony Grist · Accepted Answer · 2013-12-19 11:29:41Z

2

If you're loading the form using AJAX you'll need a delegated event handler:

$(document).on('submit', 'form#login', function(event) {
    // your AJAX form submission code here
});

When your usage of .on() executes it's looking for that element to exist at that point, but it doesn't, which means you don't end up with any event handler being bound.

There's also a typo in your server-side code for the form: <input type="test" That should likely be type="text"

Full code:

$(function () {
    $(document). on('submit', 'form#login', function(e) {
        alert('Found');
        $.ajax({
            type: 'post',
            url: 'php/login.php',
            data: $(this).serialize(),
            success: function (complete) {
                document.getElementById('output').innerHTML = complete;
            }
        });
        e.preventDefault();
    });
});

edited Dec 19, 2013 at 11:29

answered Dec 19, 2013 at 11:23

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2131323 Over a year ago

Im not sure what you mean, where should i insert the above section.

Anthony Grist Over a year ago

@user2131323 You'd use it instead of the $('form#login').on('submit', function(e) {...}); you currently have; I've edited my answer to include the full code, just switch one out for the other.

Collectives™ on Stack Overflow

AJAX form submission is not functioning

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related