The State Object

Previously we created a config.html file that determines how the user will configure your plugin. Here it is again:

<input type="text" name="person" value="Enter your name" />
<input type="number" name="age" min="0" max="150" value="21" />
<input type="checkbox" name="friend" />

<fieldset name="location">
   <input type="text" name="city" value="Melbourne" />
   <input
      type="number"
      name="population"
      min="0"
      max="100000000"
      value="5000000"
   />
</fieldset>

<ol id="favourite-foods" data-presets="3">
   <li>
      <input
         type="text"
         name="food"
         data-presets="pizza, burgers, pasta, curry, icecream"
      />
   </li>
</ol>

Now let's look at the state object that this form would create:

{
   person: "Enter your name",
   age: 21,
   friend: false,
   location: {
      city: "Melbourne",
      population: "5000000"
   }
   favouriteFoods: [
      { food: "pizza" },
      { food: "burgers" },
      { food: "pasta" }
   ]
}

Hopefully that's self-explanatory. Notice that FIELDSET uses name and OL uses id. Selectoplasm should handle it ok if you use one or the other, but you should do it this way.

Next, let's see how to actually use this information.