📦 lovelydinosaur / ajax-form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80# AJAX Form

* Adds support for PUT, PATCH, DELETE and OPTIONS methods in HTML forms.
* Adds support for submitting JSON and other content types in HTML forms.

See [index.html](https://github.com/tomchristie/ajax-form/blob/master/index.html) for example usage.

## Requirements

jQuery 1.9+

## Restrictions

* Multipart (file upload) is only supported in browsers that support the FormData API.
* Browsers that do not support the history API will result in a subsequent `GET` request.
* Cross-domain requests will result in a subsequent `GET` request.
* Non-HTML responses will result in a subsequent `GET` request.

## Usage - PUT, PATCH, DELETE, OPTIONS methods

Use `data-method="***"`.

    <form action="/" data-method="PUT">
        <input name='foo'/>
        <input name='bar'/>
        <input type="submit"/>
    </form>
    <script>
        $(document).ready(function() {
            $('form').ajaxForm();
        });
    </script>

Or using button controls.

    <form action="/">
        <input name='foo'/>
        <input name='bar'/>
        <input type="submit" value="PUT" data-method="PUT">
        <input type="submit" value="PATCH" data-method="PATCH">
    </form>
    <script>
        $(document).ready(function() {
            $('form').ajaxForm();
        });
    </script>

## Usage - Content type overriding

Use `data-override="content"` and `data-override="content-type"`.

Using an input control:

    <form action="/" method="POST">
        <input data-override="content-type" value="application/json"/>
        <textarea data-override="content">{"example": "text"}</textarea>
        <input type="submit"/>
    </form>
    <script>
        $(document).ready(function() {
            $('form').ajaxForm();
        });
    </script>

Using a select control:

    <form action="/" method="POST">
        <select data-override="content-type">
            <option>application/json</option>
            <option>text/plain</option>
        </select>
        <textarea data-override="content">{"example": "text"}</textarea>
        <input type="submit"/>
    </form>
    <script>
        $(document).ready(function() {
            $('form').ajaxForm();
        });
    </script>