Metainformationen zur Seite

Transfer Form Fields

You can transfer form data to your Plugin's config file using our new generic ajax interface very easily.

To sumbit data from your form, mostly we use two different options: Let the user submit form data by clicking a submit button or submit form data on each change of the form values.

Use traditional submit button

This is more or less the traditional way to submit data. Write requests to LoxBerry are minimized this way. But sometimes (on complicated forms) users will not "see" the submit button very easily. 

<html>
<body>
    <h2>HTML Form</h2>
    <form id="myForm">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit"> 
    </form> 
 
<script>
    myForm.onsubmit = async (e) => {
        e.preventDefault();
        let response = await fetch('/admin/system/ajax/ajax-generic.php?file=LEGACY/test.json&write', {
            method: 'POST',
            body: new FormData(myForm)
        });
 
        let result = await response.json();
 
        alert("Returned: " + result.fname + " " + result.lname);
    };
</script>
 
</body>
</html>

Transfer data on each change

A more comfortable way is to transfer form data as soon as the user changed one value in the form automatically. While this is a more modern and comfortable way, write requests are send to LoxBerry on each change - so when the user fills the form, this could be quite often.

We use the javascript change event to detect form changes and fire up the form save function then. 

<html>
<body>
    <h2>HTML Form</h2>
    <form id="myForm">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
    </form> 
 
<script>
    $('#myForm :input').on('change', saveForm);
 
    function saveForm() {
        let response = await fetch('/admin/system/ajax/ajax-generic.php?file=LEGACY/test.json&write', {
            method: 'POST',
            body: new FormData(myForm)
        });
 
        let result = await response.json();
 
        alert("Returned: " + result.fname + " " + result.lname);
    };
</script>
 
</body>
</html>