AJAX Input On Keyup/Change: Magic JavaScript

Usage

Add data-mjf="ajax_kc" data-mjf_ajax_url="/PATH/TO/SERVER/SCRIPT/" data-mjf_ajax_update_id="ELEMENT_ID" id="ELEMENT_ID" to your form field.
Below are the acceptable ones:
- <input type="text">
- <input type="file">
- <input type="password">
- <textarea>
- <select>
Add <script type="text/javascript">$m.wand.ajax_kc = true;</script> inside your <body> tag.

Example → Input

<input type="text" name="" value="" data-mjf="ajax_kc" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_query="extra=awesome" data-mjf_ajax_update_id="input_type_onchange_update" id="">

Example → Textarea

<textarea rows="5" cols="20" name="" data-mjf="ajax_kc" data-mjf_ajax_method="post" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_query="extra=awesome" data-mjf_ajax_update_id="textarea_onchange_update" id=""></textarea>

Example → Select

<select name="" data-mjf="ajax_kc" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_query="extra=awesome" data-mjf_ajax_update_id="select_onchange_update" id=""> <option value="blue">Blue</option> <option value="red">Red</option> <option value="green">Green</option> </select>

Notes

There's a three quarter of a second timeout before sending the request.
You may have noticed that the <textarea> adds the data-mjf_ajax_method="post" attribute. This is so the newline is sent correctly by the browser.

« Back to the main documentation