Magic Icon AJAX Input On Change: Magic JavaScript

Quick Jump ↵

Usage

Add data-mjf="ajax_change" 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_change = true;</script> inside your <body> tag.

Examples


<input type="text" name="" value="" data-mjf="ajax_change" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_update_id="FIELD_ID_CONT" id="FIELD_ID">


<textarea rows="5" cols="20" name="" data-mjf="ajax_change" data-mjf_ajax_method="post" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_update_id="FIELD_ID_CONT" id="FIELD_ID"></textarea>

You may have noticed that the data-mjf_ajax_method="post" attribute — this is so newlines are sent correctly by the browser.

<select name="" data-mjf="ajax_change" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_update_id="FIELD_ID_CONT" id="FIELD_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.

« Back to the main documentation