Skip to content

HTMX Experiments

Challenge:

  • Create a simple form using HTMX and minimal amount of code and API
  • Thank you message should be displayed after form submission.
  • Some sort of security should be implemented to prevent spam and abuse
    • IDEAS add ip check and limit to X per hour
    • create special token x4343143214 pass this in form and check if it is valid and limit based on this token

SRS

XML
 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
<srs label="API FORM" acl="public" id="501">
  <def>

    <itm model="param" name="form_xmldata" opts="json-xml-root" />
    <itm model="param" name="form_uuid"  />
    <itm model="param" name="form_created_by">anonymous</itm>
    <itm model="param" name="form_name">form</itm>
    <itm model="param" name="form_type" />
    <itm model="param" name="form_status" />

    <itm model="column" name="form_xmldata" opts="tjson"  lg="False" />
    <itm model="column" name="form_uuid" lg="False" />
    <itm model="column" name="form_id" label="NR ankiety" />
    <itm model="column" name="form_type" label="Typ ankiety" />
    <itm model="column" name="form_created_by" label="Wypełniona przez" />
    <itm model="column" name="form_status" lg="False" />
    <itm model="column" name="form_created_at" label="Wypełniona o" />
    <itm model="command" name="get" opts="dtsingle get"><![CDATA[

    -- [form_uuid],[form_name],[form_type],[form_xmldata],[form_status],[form_created_at],[form_created_by],[form_remote_id],[form_remote_source]
    SELECT * from [app].[forms] where form_status > -1 and form_uuid = @form_uuid
]]></itm>
    <itm model="command" name="post" opts="post"><![CDATA[

      if @form_uuid is null
        set @form_uuid = newid()

          IF exists (select 1 from [app].[forms] where form_uuid = @form_uuid and form_status > -1)
          BEGIN --Update
                UPDATE [app].[forms] SET form_xmldata = @form_xmldata, form_status = @form_status, form_created_by = @form_created_by where form_uuid = @form_uuid
            END
            ELSE --Insert
            BEGIN

                INSERT INTO [app].[forms] (form_uuid, form_name, form_type, form_xmldata, form_created_by)  
                values (@form_uuid, @form_name, @form_type, @form_xmldata, @form_created_by)

        print 'Thank you for your message; we will get back to you as soon as possible.'
            END
 ]]></itm>
  </def>
</srs>

CURL

HTTP
1
2
3
curl -X POST {{host}}/api/srs/501/exec.html?app_name=erp
-H "Content-Type: application/json"
-d '{"form_name":"api" , "form_xmldata": {"name": "John", "surname": "Doe"}}'

html

HTML
 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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <!-- enable request to other domains -->
  <meta name="htmx-config" content='{"selfRequestsOnly": false}' />

  <script src="https://unpkg.com/htmx.org@2.0.3"></script>
  <script src="https://unpkg.com/htmx-ext-response-targets@2.0.0/response-targets.js"></script>

</head>

<body>

      <form id="response" accept-charset="UTF-8" hx-target="#response"  hx-target-400="#response"
        hx-swap="innerHTML" hx-post="http://127.0.0.1/api/srs/501/exec.html?app_name=erp" 
        hx-ext="loading-states,response-targets">    
            <input name="form_name" type="hidden" value="paandaio"/> 
            <input name="ft01" type="email" placeholder="Email" required="required" /> 
            <input name="ft02" type="text" placeholder="Phone number" />

              <button type="submit" >send</button>
        </form>

</body>
</html>