javascriptformsserializationractivejs

Ractive and dynamic form fields

I am trying to create a dynamic form using Ractive (0.9.x). An input tag should have in the value attribute a variable name to be bound to the current instance of Ractive. In my case, I don't have values at the start. My form should be empty and dynamic. My goal is to serialize data in JSON Object.

{{# keys:key }}
    <div class="ks-form-keyword">
    <label>{{this}}</label>
    <input name="{{this}}" value="" >
  </div>                   
{{/}}

Here's a fiddle to explain my issue : https://jsfiddle.net/alibenmessaoud/k35az616/

Solution

  • Assuming that in your data you have a new field to collect the form data as JSON eg. formData:{}

    Then simply changing your <input name="{{this}}" value="" /> to <input value="{{formData[this]}}" name="{{this}}" /> should do the trick.

    Result from clicking Go, after filling in a value for uid:

    {"uid":"someTestValueByUser","header.category":"","header.priority":"","from":"","id":"","to":"","header.group":"","timestamp":""}

    ps. I am not sure if you need name="{{this}}". If you're not submitting the form itself, then that can go.

    Lastly herewith an updated JSfiddle