Submiting a form from a single page webapp using Ajax Call

Question

Does anyone know about a good tutorial where submiting a form from a sing page is explained? I have a few page views in my html code and one of them is a form with three fields (Name, Email and Message) what I am trying to achieve is to submit the form data via Ajax without using a process.php directly.

This is the Form:

<section class="hidden" id="view-forms">
            <header>
                <button class="left arrow" data-vin="view-home" data-sd="sr">
                    <div class="label">All Contacts</div>
                </button>
                <h1>Message</h1>
                <button class="right bold green" data-vin="view-done" data-sd="sl">
                    <div class="label">Send</div>
                </button>
            </header>
            <div class="scrollMask"></div>
            <div class="scrollWrap">
                <div class="scroll">
                <div class="content">
                    <input placeholder="Name" type="text" />
                    <input placeholder="Email" type="email" />
                    <textarea placeholder="Your Message" rows="5"></textarea>
                </div>
            </div>
            </div>
        </section>

This is the confirmation page after message has been sent:

<section class="hidden" id="view-done">
            <header>
                <h1>That's it!</h1>
                <button class="right bold" data-vin="view-home" data-sd="popout">
                    <div class="label">Done</div>
                </button>
            </header>
            <div class="scrollMask"></div>
            <div class="scrollWrap">
                <div class="scroll">
                <div class="content">
                    <h2>Message sent!</h2>
                </div>
            </div>
            </div>
        </section>

Please, let me know if any of you have already implemented something like this. Thank you.

Answer 1

You could submit to the same PHP page. You just need an if statement to separate the code that generates the page from the code that submits your form. That being said, you should probably just create a second PHP script to handle the form submission. If you wanted to implement it using the if statement, I would add a piece of information to your GET/POST request which would be something like:

'formSubmission='+true

Okay, for the more details, look at this tutorial, it goes over the basics. In your case, try this (NOTE: I haven't tested any of this). Also, add an ID to each of the elements (I assumed they would be the same as your current name attributes and that the textarea would have the ID message).

function()submitForm(){
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var message = document.getElementById('message').value;
    var requestData = 'name='+name+'&email='+email+'&message='+message+'&formSubmission='+true;
    //I'm assuming that you're using a POST request (this depends on the length of the message
    var AJAXObj = new XMLHttpRequest();
    //don't forget to replace currentURL.php with the name of the page that will handle the submission
    AJAXObj.open('POST', 'currentURL.php', true);
    AJAXObj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    AJAXObj.send(requestData);
    AJAXObj.onreadystatechange = function (){
        var AJAXObj = event.target;
        if(AJAXObj.readyState == 4 && AJAXObj.status == 200){
            var responseText = AJAXObj.responseText;
            //things that you might want to do with your responseText
        }
    }
}

Now here's the PHP:

if(isset($_POST['formSubmission'])){
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    //code that handles the form data that has now been passed to PHP
}

Just a thought, don't submit to the same PHP page that you're currently on. Create a new file and paste the code into that. It'll be cleaner.