Can not set "method" dynamically

[eximius313]

When I have a form like this:

<form action="{{actionUrl}}" is="ajax-form" method="delete" id="myForm">
    <button type="submit" dialog-confirm>Submit</button>
</form>

Form works well and submits DELETE request under the URL represented by actionUrl But when I do like this:

<form action="{{actionUrl}}" is="ajax-form" method="{{method}}" id="myForm">
    <button type="submit" dialog-confirm>Submit</button>
</form>

Form submits GET request under actionUrl even though I set it to delete

[rnicholus]

That's correct. The custom element does not current have an attributeChangedHandler function to monitor changes to the method attribute. Currently, this is only evaluated when the element is added to the DOM. If you create a pull request to add this behavior (along with a unit test), I'd be happy to merge it in.

[eximius313]

I'm not feeling to be good enough in JS to write production code :(

[rnicholus]

This library is pretty small and, I think, straightforward. Just give it a go and I'll clean it up if necessary and will also take care of the unit test.

[adamvresky]

Very rough solution would be to do this in ajax-form.js

ajaxForm.acceptableMethod` = getValidMethod(ajaxForm.getAttribute('method'));

var observer = new MutationObserver(function(mutations) {
  ajaxForm.acceptableMethod = getValidMethod(ajaxForm.getAttribute('method'));
});

var observerConfig = {
    attributes: true
};

var targetNode = ajaxForm;
observer.observe(targetNode, observerConfig);

[rnicholus]

No need for a mutation observer. Instead, I would suggest registering an attributeChangedCallback.

[midgetspy]

I took a stab at this in #92