DEV Community

Falah Al Fitri
Falah Al Fitri

Posted on • Edited on

1

PHP Javascript form formData 10: input text using ajax (XMLHttpRequest)


Happy Coding

index.php

<form method="post" action="process.php" >

    Firstname: <input type="text" name="firstname" />
    <br />

    Lastname: <input type="text" name="lastname" />
    <br />

    <hr />

    <input type="submit" value="Submit" />

</form>
Enter fullscreen mode Exit fullscreen mode

Display result form server

<div id="output"></div>
Enter fullscreen mode Exit fullscreen mode

Get formHTML element and add onsubmit event, and create formData, then call ajax function with arguments formHTML, formData and output display ("#output")

<script>

    /* submit form */
    document.querySelector( "form" ).addEventListener( "submit", function (event) {

        event.preventDefault(); // return false


        var formHTML = event.target; // this

        console.log( formHTML ); // formHTML element


        // https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
        var formData = new FormData( formHTML );

        console.log( formData );


        // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
        // https://www.w3schools.com/xml/xml_http.asp
        // https://www.w3schools.com/js/js_ajax_http.asp

        /* AJAX request */
        ajax( formHTML, formData, "#output" ); // ajax( form, data destination )

    });

</script>
Enter fullscreen mode Exit fullscreen mode

ajax function

<script>

    function ajax( form, data, destination )
    {

        if (window.XMLHttpRequest)
        {
            var xhr = new XMLHttpRequest(); /* code for modern browsers */
        }
        else
        {
            var xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* code for old IE browsers */
        }

        xhr.open( form.method, form.action, true ); // ( "post", "process.php", true )
        xhr.send( data );

        xhr.onreadystatechange = function () {
            if ( this.readyState == 4 && this.status == 200 )
            {
                document.querySelector( destination ).innerHTML = this.responseText;
            }
        };

    }

</script>
Enter fullscreen mode Exit fullscreen mode

process.php

echo "<pre>";

var_dump($_POST);

echo "</pre>";
Enter fullscreen mode Exit fullscreen mode

Demo repl.it


Thank for reading :)

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay