Magic Icon AJAX Field Submission (via keyup/change): Magic JavaScript

Quick Jump ↵

Usage

Add data-mjf="ajax_field_submit_kc" data-mjf_ajax_url="/PATH/TO/SERVER/SCRIPT/" data-mjf_ajax_update_id="ELEMENT_ID" id="ELEMENT_ID" to your form field.

Add data-mjf_afskc="GROUP_NAME" to your form fields if you'd like to submit them as a group.

Add <script type="text/javascript">$m.wand.ajax_field_submit_kc = true;</script> inside your <body> tag.

Examples

Single input text field

<input type="text" name="input_text_1" value="" data-mjf="ajax_field_submit_kc" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_update_id="input_text_1_cont" id="input_text_1">

Multiple input text fields

<input type="text" name="input_text_2a" value="" data-mjf="ajax_field_submit_kc" data-mjf_afskc="input_text_2" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_update_id="input_text_2_cont" id="input_text_2a">

<input type="text" name="input_text_2b" value="" data-mjf="ajax_field_submit_kc" data-mjf_afskc="input_text_2" data-mjf_ajax_url="_ajax2.php" data-mjf_ajax_update_id="input_text_2_cont" id="input_text_2b">

Single select field

<select data-mjf="ajax_field_submit_kc" data-mjf_ajax_url="_ajax3.php" data-mjf_ajax_update_id="select_1_cont" name="select_1" id="select_1">
  <option value="">Please choose...</option>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
</select>

Single textarea field and a multi-select field

<textarea rows="5" cols="20" data-mjf="ajax_field_submit_kc" data-mjf_afskc="textarea_1" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_update_id="textarea_1_cont" name="textarea_1" id="textarea_1"></textarea>

<select size="5" multiple="multiple" data-mjf="ajax_field_submit_kc" data-mjf_afskc="textarea_1" data-mjf_ajax_url="_ajax2.php" data-mjf_ajax_update_id="textarea_1_cont" name="select_2[]" id="select_2">
  <option value="">Please choose...</option>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
  <option value="Option 4">Option 4</option>
</select>

Multiple checkbox fields



<input type="checkbox" data-mjf="ajax_field_submit_kc" data-mjf_afskc="checkbox_grp_1" data-mjf_ajax_url="_ajax3.php" data-mjf_ajax_update_id="checkbox_grp_1_cont" name="checkbox_grp_1[]" value="Option 1" id="checkbox_grp_1a">

<input type="checkbox" data-mjf="ajax_field_submit_kc" data-mjf_afskc="checkbox_grp_1" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_update_id="checkbox_grp_1_cont" name="checkbox_grp_1[]" value="Option 2" id="checkbox_grp_1b">

<input type="checkbox" data-mjf="ajax_field_submit_kc" data-mjf_afskc="checkbox_grp_1" data-mjf_ajax_url="_ajax2.php" data-mjf_ajax_update_id="checkbox_grp_1_cont" name="checkbox_grp_1[]" value="Option 3" id="checkbox_grp_1c">

Multiple radio button fields and a single checkbox field




<input type="radio" data-mjf="ajax_field_submit_kc" data-mjf_afskc="radio_grp_1" data-mjf_ajax_url="_ajax3.php" data-mjf_ajax_update_id="radio_grp_1_cont" name="radio_grp_1" value="Option 1" id="radio_grp_1a">

<input type="radio" data-mjf="ajax_field_submit_kc" data-mjf_afskc="radio_grp_1" data-mjf_ajax_url="_ajax.php" data-mjf_ajax_update_id="radio_grp_1_cont" name="radio_grp_1" value="Option 2" id="radio_grp_1b">

<input type="radio" data-mjf="ajax_field_submit_kc" data-mjf_afskc="radio_grp_1" data-mjf_ajax_url="_ajax2.php" data-mjf_ajax_update_id="radio_grp_1_cont" name="radio_grp_1" value="Option 3" id="radio_grp_1c">

<input type="checkbox" data-mjf="ajax_field_submit_kc" data-mjf_afskc="radio_grp_1" data-mjf_ajax_url="_ajax3.php" data-mjf_ajax_update_id="radio_grp_1_cont" name="checkbox_grp_2" value="Option 4" id="radio_grp_1d">

« Back to the main documentation