onformdata

Description
Syntax
Examples
Links

Description

The onformdata attribute for HTML handles formdata on an element.

Syntax

onformdata="value"

<!doctype html>
<html>
<body>
    <form onformdata="myfunction1(event)" onsubmit="myfunction2(event)">
        <input name="myname1" value="formdata1"><br>
        <input name="myname2" value="formdata2"><br>
        <input name="myname3" value="formdata3">
        <input type="submit">
    </form>
    <output></output>
    <script>
        function myfunction1(myparameter)
        {
            const r = Math.random() * 255;
            const g = Math.random() * 255;
            const b = Math.random() * 255;
            const a = Math.random();
            document.body.style.backgroundColor = `rgb(${r} ${g} ${b} / ${a})`;
            const myformdata = myparameter.formData;
            let myoutput = "";
            for(const [key, value] of myformdata)
            {
                myformdata.set(key, myformdata.get(key).toUpperCase());
                myoutput += `${myformdata.get(key)}<br>`;
            }
            document.querySelector("output").innerHTML = myoutput;
            console.log(myparameter);
        }
        function myfunction2(myparameter)
        {
            myparameter.preventDefault();
            new FormData(myparameter.target);
        }
    </script>
</body>
</html>

2 · JS · on

<!doctype html>
<html>
<body>
    <form>
        <input name="myname1" value="formdata1"><br>
        <input name="myname2" value="formdata2"><br>
        <input name="myname3" value="formdata3">
        <input type="submit">
    </form>
    <output></output>
    <script>
        function myfunction1(myparameter)
        {
            const r = Math.random() * 255;
            const g = Math.random() * 255;
            const b = Math.random() * 255;
            const a = Math.random();
            document.body.style.backgroundColor = `rgb(${r} ${g} ${b} / ${a})`;
            const myformdata = myparameter.formData;
            let myoutput = "";
            for(const [key, value] of myformdata)
            {
                myformdata.set(key, myformdata.get(key).toUpperCase());
                myoutput += `${myformdata.get(key)}<br>`;
            }
            document.querySelector("output").innerHTML = myoutput;
            console.log(myparameter);
        }
        function myfunction2(myparameter)
        {
            myparameter.preventDefault();
            new FormData(myparameter.target);
        }
        const myform = document.querySelector("form");
        myform.onformdata = myfunction1;
        myform.onsubmit = myfunction2;
    </script>
</body>
</html>

3 · JS · addEventListener

<!doctype html>
<html>
<body>
    <form>
        <input name="myname1" value="formdata1"><br>
        <input name="myname2" value="formdata2"><br>
        <input name="myname3" value="formdata3">
        <input type="submit">
    </form>
    <output></output>
    <script>
        function myfunction1(myparameter)
        {
            const r = Math.random() * 255;
            const g = Math.random() * 255;
            const b = Math.random() * 255;
            const a = Math.random();
            document.body.style.backgroundColor = `rgb(${r} ${g} ${b} / ${a})`;
            const myformdata = myparameter.formData;
            let myoutput = "";
            for(const [key, value] of myformdata)
            {
                myformdata.set(key, myformdata.get(key).toUpperCase());
                myoutput += `${myformdata.get(key)}<br>`;
            }
            document.querySelector("output").innerHTML = myoutput;
            console.log(myparameter);
        }
        function myfunction2(myparameter)
        {
            myparameter.preventDefault();
            new FormData(myparameter.target);
        }
        const myform = document.querySelector("form");
        myform.addEventListener("formdata", myfunction1);
        myform.addEventListener("submit", myfunction2);
    </script>
</body>
</html>