gitana / alpaca

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.
http://www.alpacajs.org
Other
1.29k stars 371 forks source link

Alpaca form over textarea| input text in form #585

Open MetaAbstract opened 6 years ago

MetaAbstract commented 6 years ago

I need to rise alpaca form over text field in existing form. I spend some time about best way to do this, but no have good idea beside relativity complex javascript and css solutions. May be somebody have good idea about this task?

WhileTrueEndWhile commented 6 years ago

I hope I have understood that quite correctly: you have an "old form" and would like to put Alpaca on top of it.

I don't know if that's enough, but... You could hide the form element and fill it with the value of the Alpaca form after each change. To do this, you must insert the alpaca container directly above or below the form element to be overwritten, or use other means to ensure that the alpaca form is placed at the correct position. The Alpaca configuration might look something like this:

{
    "schema": {
        "type": "string",
        "format": "email"
    },
    "options": {
        "events": {
            "change": function() {
                const value = this.getValue();
                $("#input-to-overwrite").val(value);
            }
        }
    },
    "postRender": function() {
        $("#input-to-overwrite").addClass("hidden");
    }
}

Several form fields could be filled in the code at once. You could change the schema type to object. In the callback chage you can then iterate this.getValue() using Object.keys. If the object key (or property name) matches the input name from the "old form", it is possible to overwrite all the fields of an "old form" with one Alpaca configuration by using the key as part of (e.g.) a jquery selector... Or you can define change for each field individually and fill the "old form element" there.

Good Luck.

MetaAbstract commented 6 years ago

Thx for you reply. I catch you idea and will take it to variants. Formally problem is form tag in root of alpaca form dom elements. So i can't embed it in existing form tag without any relativity complex scripts and css. Best way i see for me if i can rise alpaca form parent to div tag for example and hide my text input. And on submit just move json from alpaca to text field value. Very simple - so reliably.