PHP Javascript form formData 45: input text textarea select-multiple using ajax (XMLHttpRequest)

antelove19

Falah Al Fitri

Posted on December 15, 2019

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

    Programming Languages (multiple): (hold ctrl + click item)
    <select name="languages[]" multiple >
        <option value="c" >C</option>
        <option value="c++" selected >C++</option>
        <option value="java" >Java</option>
        <option value="javascript" selected >Javascript</option>
        <option value="php" >PHP</option>
    </select>
    <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 :)

💖 💪 🙅 🚩
antelove19
Falah Al Fitri

Posted on December 15, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related