How to use a form component to submit to an external URL?

Question

I have a form-tag component. It needs to submit to an outside url. I'm trying to do something like (pseudo code):

{{#form-tag action="https://foo.com/submit.aspx"}}
  {{input type="hidden" value=hiddenValue}}
{{/form}}

When the form submits, I need to end up at https://foo.com/submit.aspx

I'm tempted to use a <form> element instead. But was wondering if there was a way using a form component.

Answer 1

You can use following code for Component (taking advantage of attributeBindings and tagName):

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'form',
  attributeBindings: ['action', 'method']
});

And then you can use:

{{#form-component action="https://foo.com/submit.aspx" method='POST'}}
  {{input type="hidden" value=hiddenValue}}
  <button type="submit">Submit</button>
{{/form-component}}

• Working demo.
• Full code behind demo.