domajax.fuz.org

data-lock

Disable form fields when ajax calls are in progress

Available events: data-lock-before (default), data-lock-complete, data-lock-success, data-lock-failure, data-lock-empty, data-lock-not-empty

data-lock let you put form fields readonly while ajax calls are processing, avoiding double posts, synchronization issues and so on. It takes any form field(s) or form field container(s), and will lock everything inside. By passing a high-level container, such as body, you will lock all form fields of the entire page. Sometimes, you will need to lock fields only when your ajax calls fail or succeed, in such case you will use data-lock-failed or data-lock-success events instead of the simple data-lock. All available events are listed above.

Automatically set data-unlock-complete to the same element as data-lock if you are using data-lock instead of a specific event (data-lock-before, ...). This way, your elements are automatically unlocked when the ajax call has ended.

Usage


  • data-lock="container-to-lock"
  • data-lock="(empty)"
  • data-lock-(event)="container-to-lock"

Example


  • data-lock="#input"
  • data-lock=""
  • data-lock-if-not-empty="#input"

Live examples

If the result is not displayed correctly, click here to resize iframe above.

This form looks like this:


<div id="inputs">

    <input
            type="button"
            value="Send"
            class="btn domajax click"
            data-endpoint="lock-button-handler.php"
            data-lock="#inputs"
            data-input="#inputs"
            data-output="#output"
            />

</div>

<div id="output"></div>

If the result is not displayed correctly, click here to resize iframe above.

This form looks like this:


<input
        type="button"
        value="Send"
        class="btn domajax click"
        data-endpoint="lock-self-handler.php"
        data-lock=""
        data-input="#inputs"
        data-output="#output"
        />

<div id="output"></div>

If the result is not displayed correctly, click here to resize iframe above.

This form looks like this:


<form id="input" action="input-classic-form-handler.php" method="post" target="_blank">

    <label>Some text :</label>
    <input name="sample-text" type="text" value="Hello, world!"/>

    <label class="checkbox">
        A checkbox
        <input name="sample-check" type="checkbox"/>
    </label>

    <label>A select :</label>
    <select name="sample-select">
        <option value="Paris">Paris</option>
        <option value="Nantes">Nantes</option>
        <option value="Bordeaux">Bordeaux</option>
    </select>

    <label>Radio buttons</label>
    <label class="radio inline">
        <input name="sample-radio" type="radio" value="Foo" checked/> Foo
    </label>
    <label class="radio inline">
        <input name="sample-radio" type="radio" value="Bar"/> Bar
    </label>

    <label>A textarea</label>
    <textarea name="sample-textarea">Foo, bar!</textarea>

    <label>An hidden field</label>
    <input name="sample-hidden" type="hidden" value="Hidden data"/>

    <label>A read-only field</label>
    <input name="sample-readonly" type="text" value="Readonly data" readonly/>

    <label>A disabled field</label>
    <input name="sample-disabled" type="text" value="Disabled data" disabled/>

    <br/>

    <input
            type="button"
            value="Send using domajax"
            class="btn domajax click"
            data-endpoint="lock-form-handler.php"
            data-lock="#input"
            data-input="#input"
            data-output="#output"
            />

</form>

<div id="output"></div>

See also    data-unlock   data-replace   data-callback   data-script 

Table of contents

All the documentation at a glance

Domajax options

And more with domajax