Do I still need a Form element when using a AJAX request?

Question

This might be a silly question but it is really matter to me to know if we really STILL need to wrap our input elements in side a

even when we are

Answer 1

No, there is no need to wrap input (or other) elements in form tags when using ajax.

However, there are times when using a form construct is a good idea, such as if you want to use .serialize() to grab all the form names/values in one go (for example, if you are using ajax - it's a great shortcut).

Note that if you use a form (i.e. submit button <input type="submit") then you should also know that you can use return false; or e.preventDefault(); in your event code if you need to prevent the form from submitting and refreshing the page. For example:

$('#myForm').submit(function(event){
    let validation_okay = true;
    //do your validation
    if (!validation_okay){
        alert('Please fix errors and re-submit');
        return false;
        //Here, form will NOT submit but will return control to user
    }
    //if form gets to here, it will submit normally
});

Everyone has their own style, but these days I rarely (if ever) use form tags and instead use jQuery/js to control the UX myself. With AJAX, there is really no need to use a form - you can do exactly the same thing without navigating away from the current page (unless you then specifically code it to do so).

BUT if you are set on using forms, also note that you can create a form tag on the fly, add it to the DOM, and use jQuery/js to submit it:

//You have a structure that is constructed WITHOUT any form tags - a lightbox or something
//The *submit* button is just an ordinary button (without `type="submit"`)
//User clicks your "Go" or "Submit" button, and you validate the field values. Now you
//want to submit it.
if (!validation_okay){
    let uid = $('#userid').val();
    let pwd = $('#pword').val();
    let myform = '\
        <form id="laform" action="process_login.php" action="post">\
            <input name="user_id" value="' + uid + '" />\
            <input name="passwrd" value="' + pwd + '" />\
        </form>';
    $('body').append(myform);
    $('#laform').submit();
}

Or you can do the same thing as above using ajax, which would look like this:

let uid = $('#userid').val();
let pwd = $('#pword').val();
if (uid.length && pwd.length){
    $.ajax({
        type: 'post',
         url: '../ajax/login.php',
        data: 'lname=' + uid + '&pword=' + pwd
    }).done(function(d){
        console.log('Received back from PHP side: ' + d);
    });
}

On the PHP side, you would have a document here:

/public_html/ajax/login.php  
(Note: above code also expects your js file to also be in a subfolder, 
 for e.g. /public_html/js/script.js)

The PHP side might look something like this:

<?php
    $login_name = $_POST['lname'];
    $password = $_POST['pword'];
    if ($login_name == 'bob' && $password == 'baluga'){
        echo 'Login successful';
    }else{
        echo 'Wrong, wrong, wrong! Just wrong!'
    }

Reference:

Why use a form tag when you're submitting via ajax?

Answer 2

When using Ajax, the form serves several purposes. It provides:

• a way for the user to submit the data to the server when the JavaScript fails for any reason
• a convenient DOM interface to the controls inside it (formElement.elements.field_id_or_name)
• a semantic grouping that is (for example) used by screen reader software
• handling for the pressing of the enter key to trigger the submit event across all the fields

You don't strictly need it unless you want a robust, accessible, usable page without much more effort.