Autosave forms on change
Build a form that automatically submits on change, for instance to perform a calculation and return results.
In this example we build a calculator application: a car lease calculator.
The user can choose which car to lease for which term. The lease price is immediately recalculated when the user updates his selection.
For this, we use a form with the onchange-submit class: any change on the form results in an automatic submission of the form. The target of the form is set to "#output", so the response of the server will be written in the element having the id="output".
Hereunder on the first tab a version of the code where most (Bootstrap) layout related elements have been stripped to focus on the essence of the code. The "Full code" tab contains the full code of the working demo below:
<form action="/CarLeaseCalculator" method="post"
class="onchange-submit"
target="#output">
<div>
<div>Select a car model:</div>
<select name="Model">
<option value="" selected>Choose a model</option>
<option value="A">Model Alfa</option>
<option value="B">Model Beta</option>
<option value="G">Model Gamma</option>
</select>
</div>
<div>
<div>Choose a color:</div>
<label><input name="Color" type="radio" value="R" checked> Red</label><br />
<label><input name="Color" type="radio" value="G"> Green</label><br />
<label><input name="Color" type="radio" value="B"> Blue</label>
</div>
<div>
<div>Which options to add ?</div>
<label>
<input name="Options" type="checkbox" value="MES">
Multi-media Entertainment System
</label><br />
<label>
<input name="Options" type="checkbox" value="GPS"
ifunchecked-uncheck="INPUT[name='Options'][value='FSD']">
Global Positioning System
</label><br />
<label>
<input name="Options" type="checkbox" value="FSD"
ifchecked-check="INPUT[name='Options'][value='GPS']">
Full Self-Driving (requires GPS)
</label>
</div>
<div>
<label>Duration: (1 to 5 years)</label><br />
<input name="Duration" type="range" min="12" max="60" step="6" value="36">
</div>
</form>
<div id="output">
<font size="4"><b>Please select a car model</b></font><br/>
</div><h1 style="padding-top: 12px;">Car Lease Calculator</h1>
<div class="row">
<div class="col">
<div style="padding: 20px; border: solid 2px green; border-radius: 6px;">
<form action="/CarLeaseCalculator" method="post"
class="onchange-submit"
target="#output">
<div class="mb-3">
<label class="form-label">Select a car model:</label>
<select class="form-select" name="Model">
<option value="" selected>Choose a model</option>
<option value="A">Model Alfa</option>
<option value="B">Model Beta</option>
<option value="G">Model Gamma</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Choose a color:</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="Color" value="R" id="Color1" checked>
<label class="form-check-label" for="Color1">Red</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Color" value="G" id="Color2">
<label class="form-check-label" for="Color2">Green</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Color" value="B" id="Color3">
<label class="form-check-label" for="Color3">Blue</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">Which options to add ?</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="Options" value="MES" id="Option1">
<label class="form-check-label" for="Option1">
Multi-media Entertainment System
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="Options" value="GPS" id="Option2"
ifunchecked-uncheck="INPUT[name='Options'][value='FSD']">
<label class="form-check-label" for="Option2">
Global Positioning System
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="Options" value="FSD" id="Option3"
ifchecked-check="INPUT[name='Options'][value='GPS']">
<label class="form-check-label" for="Option3">
Full Self-Driving (requires GPS)
</label>
</div>
</div>
<div class="mb-3">
<label for="Duration" class="form-label">Duration: (1 to 5 years)</label>
<input type="range" class="form-range" min="12" max="60" step="6" name="Duration" id="Duration" value="36">
</div>
</form>
</div>
</div>
<div class="col">
<div id="output" style="padding: 20px; border: solid 2px blue; border-radius: 6px;">
<font size="4"><b>Please select a car model</b></font><br/>
</div>
</div>
</div>When data in the form is changed (for instance Model Alfa is choosen) the form is automatically submitted to the server. The server then responds with new content for the #output element. For instance:
<font size="4"><b>Lease duration: 36 months (3 year)</b></font>
<br />
<font size="4"><b>Monthly price: $ 1,250.00</b></font>Also notice the dependency between the GPS and the Self-Driving option implemented using ifchecked-check and ifunchecked-uncheck attributes on lines 27 and 32 of the stripped code.
Working demo
Requirements
This example requires following Sircl library files to be loaded:
or:
If not using the bundled version, the ifchecked-check and ifunchecked-uncheck attributes also require the following library file:
For all library files, non-minified counterparts can be used as well.
See the Get Started section about how to set up your project to use the Sircl library.