Document how to add a submit button

[timwis]

I feel like I must be missing something but I can't find any reference to adding a submit button to a form. There are references to the submit event, which I imagine would be called by hitting enter while an <input> is in focus, but that's the closest I see. The only thing I can think of is providing a template to the form view. Is that the only way?

EDIT: Looks like the submitCallback isn't triggered by hitting enter unless there's a submit button in the form somewhere

[wraithgar]

This lib is pretty heavily coupled to the html form DOM. So whatever would cause a submit event to fire from this.el will trigger the 'submit' process in this library.

Perhaps this could be communicated more clearly? This feels more like html howto stuff though to be honest, which may or may not be under the scope of what the readme should be trying to cover, arguably.

Perhaps a good start is to explain that by default the fields are put into the form in the default template, and any submit event that form fires will then be handled by this library?

[timwis]

For anyone arriving here from searching with the same question, here's my workaround for the meantime.

module.exports = FormView.extend({
  fields: function () {
    return [
      new InputView({
        label: 'Address',
        name: 'address',
        value: this.model && this.model.address,
        required: false,
        placeholder: 'Address',
        parent: this
      }),
      new InputView({
        label: 'Capacity',
        name: 'capacity',
        value: this.model && this.model.capacity,
        required: false,
        placeholder: 'Capacity',
        parent: this
      }),
      new AmpersandView({
        template: '<button type="submit">Submit</button>',
        valid: true
      })
    ]
  }
})

[timwis]

@wraithgar Forgive me, but it's not clear to me how to add a submit button other than the method I've just posted, which is actually giving me some trouble now oddly enough. Are there any alternatives to the approach I posted?

[wraithgar]

Ah yes I see now what you mean. The fieldContainer needs to be added to the readme. You can build a form with a submit button in it in your template, and then have a data-hook=field-container for where your input fields will be appended to, instead of this.el

[timwis]

Okay I'l give that a shot. I think the reason my example above doesn't work is because the AmpersandView doesn't have a valid property, so the form view thinks it's invalid and doesn't call the submitCallback. So it sounds like the only way to add a submit button is the method you described in your last comment.

EDIT: Updated code above to add valid: true on the submit item. Quite hacky but works now.

[wraithgar]

I believe you could also use an input-view with type submit but I haven't seen that personally.

[timwis]

FYI I'm trying the approach you described, using a template with a data-hook=field-container in it, and it's not working. I believe this is because ampersand-field-view doesn't actually use (or allow) its own template property. I imagine you were thinking of using the formview as a subview, and giving it a particular el of an already rendered template at instantiation?

[wraithgar]

Check out this tweak on the readme example: http://esnextb.in/?gist=9d1127976d78d3e17eb4

[timwis]

Yes, that's what I was alluding to in my last comment. It looks like the only way to have a submit button is by using the form-view as a subview (or the method I suggested above). In your example, using it as a subview isn't adding much value over just using the form-view as the view. I would suggest that you should be able to just override the template property when you extend FormView for more consistency with other ampersand objects. For example:

module.exports = FormView.extend({
  template: '<form><fieldset data-hook="field-container"></fieldset><input type="submit"></form>'
  fields: function () {
    return [
      new InputView({
        label: 'Address',
        name: 'address',
        value: this.model && this.model.address,
        required: false,
        placeholder: 'Address',
        parent: this
      }),
      new InputView({
        label: 'Capacity',
        name: 'capacity',
        value: this.model && this.model.capacity,
        required: false,
        placeholder: 'Capacity',
        parent: this
      })
    ]
  }
})