search

webui-dev / webui

Use any web browser or WebView as GUI, with your preferred language in the backend and HTML5 in the frontend, all in a lightweight portable lib.
https://webui.me
MIT License
2.36k stars 144 forks source link

Html Form support #323

Closed enaaab460 closed 5 months ago

enaaab460 commented 5 months ago

Is there a way to access the results of a form as a single variable? and not through queryselector.value of each input? This example submits the webview instead.

<body>
    <form id='form'>
        <input name='Name'>
        <input type='Number' name='age'>
        <input type='email' name='email'>
        <input id='submit' type='submit'>
    </form>
</body>

I am using nim but the webuime docs does not reference such feature in the languages i checked. Thanks

AlbertShown commented 5 months ago

webui will only connect your UI to your backend and let you run JS from the backend and receive events. That's all that webui does. So, use JS to control your UI.

I guess to send the form as one object you can do this:

document.getElementById('form').addEventListener('submit', function(event){
            event.preventDefault();

            var formData = new FormData(this);
            var formObject = {};

            for (var [key, value] of formData.entries()) {
                formObject[key] = value;
            }

            // Convert formObject to JSON string
            var jsonFormObject = JSON.stringify(formObject);

            // Send JSON to backend
            myBackendFunction(jsonFormObject); // Or webui.myBackendFunction(jsonFormObject);
        });
enaaab460 commented 5 months ago

webui will only connect your UI to your backend and let you run JS from the backend and receive events. That's all that webui does. So, use JS to control your UI.

I guess to send the form as one object you can do this:

document.getElementById('form').addEventListener('submit', function(event){
            event.preventDefault();

            var formData = new FormData(this);
            var formObject = {};

            for (var [key, value] of formData.entries()) {
                formObject[key] = value;
            }

            // Convert formObject to JSON string
            var jsonFormObject = JSON.stringify(formObject);

            // Send JSON to backend
            myBackendFunction(jsonFormObject); // Or webui.myBackendFunction(jsonFormObject);
        });

Thanks!