DEV Community

Falah Al Fitri
Falah Al Fitri

Posted on • Edited on

1

PHP Javascript form formData 20: input text textarea 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 />

    Description: <textarea name="description" rows="10" cols="50" ></textarea>
    <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 :)

Image of Datadog

Measure and Advance Your DevSecOps Maturity

In this white paper, we lay out a DevSecOps maturity model based on our experience helping thousands of organizations advance their DevSecOps practices. Learn the key competencies and practices across four distinct levels of maturity.

Get The White Paper

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more