camzalewski/personal-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Added HTMX partial support template rendering.

Browse source
This commit is contained in:
mikestefanello 2021-12-23 17:09:44 -05:00
parent f115fcb602
commit b2f64b62f4
7 changed files with 126 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

64
templates/pages/contact.gohtml
View file

@ -1,27 +1,51 @@
{{define "content"}}
<form id="contact" method="post" >
<div class="field">
<label for="email" class="label">Email address</label>
<div class="control">
<input id="email" name="email" type="email" class="input {{.Form.Submission.GetFieldStatusClass "email"}}" value="{{.Form.Email}}">
{{- if not (eq .HTMX.Request.Target "contact")}}
<article class="message is-link">
<div class="message-body">
<p>This is an example of a form with inline, server-side validation and HTMX-powered AJAX submissions without writing a single line of JavaScript.</p>
<p>Only the form below will update async upon submission.</p>
</div>
{{template "field-errors" (.Form.Submission.GetFieldErrors "email")}}
</div>
</article>
{{- end}}
<div class="field">
<label for="message" class="label">Message</label>
<div class="control">
<textarea id="message" name="message" class="textarea {{.Form.Submission.GetFieldStatusClass "message"}}">{{.Form.Message}}</textarea>
{{template "form" .}}
{{end}}
{{define "form"}}
{{- if .Form.Submission.IsDone}}
<article class="message is-large is-success">
<div class="message-header">
<p>Thank you!</p>
</div>
{{template "field-errors" (.Form.Submission.GetFieldErrors "message")}}
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
<div class="message-body">
No email was actually sent but this entire operation was handled server-side and degrades without JavaScript enabled.
</div>
</article>
{{- else}}
<form id="contact" method="post" hx-post>
<div class="field">
<label for="email" class="label">Email address</label>
<div class="control">
<input id="email" name="email" type="email" class="input {{.Form.Submission.GetFieldStatusClass "email"}}" value="{{.Form.Email}}">
</div>
{{template "field-errors" (.Form.Submission.GetFieldErrors "email")}}
</div>
</div>
{{template "csrf" .}}
</form>
<div class="field">
<label for="message" class="label">Message</label>
<div class="control">
<textarea id="message" name="message" class="textarea {{.Form.Submission.GetFieldStatusClass "message"}}">{{.Form.Message}}</textarea>
</div>
{{template "field-errors" (.Form.Submission.GetFieldErrors "message")}}
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
</div>
</div>
{{template "csrf" .}}
</form>
{{- end}}
{{end}}