xajax: Append form fields and Firefox

A case that works in IE but not Firefox (for a change).

Supposed there’s form with a few fields. A button to manually adding more fields to the form. These fields are grouped under the same <div> tag. When the fields are added to the form, the original field values are reset.

The HTML form:

<form…>
<div id="input_group">
        <input type="text" name="field_1" id="field_1" />
        <!-- add new input fields here --//
    </div>
    <input type="button" value="Add" onclick="xajax_add_fields();" />
</form>

The xajax function:

function add_fields() {
    $x = new xajaxResponse();
    $x->append('input_group', 'innerHTML', add_input_field()); // function to add fields
    return $x;
}

This works in IE,  but not firefox.

Apparently the append function is text operation, not DOM operation – updating HTML by function calls to add or remove child elements.

Doing the correct way

The form fields should not be grouped into the same <div>. each should have it’s individual <div>.

Call inserAfter() function.

The HTMLform should now look like:

<form…>
<div id="input_1">
        <input type="text" name="field_1" id="field_1" />
    </div>
    <!-- add new input fields here --//
    <input type="button" value="Add" onclick="xajax_add_fields();" />
</form>

The modified xajax function:

function add_fields() {
    $x = new xajaxResponse();
    $last_input_id = get_input_id(); // function to get id of the last added field
    $x->insertAfter('input_' . $last_input_id, 'div', 'input_' . $last_input_id + 1);
    $x->assign('input_' . $last_input_id + 1, 'innerHTML', add_input_field());
    update_input_id(); // function to update the current id
    return $x;
}

1 thought on “xajax: Append form fields and Firefox

  1. Erik Reply

    Hi, i’d just met this problem, and your solutions works great!

    Thanks

    (sad that xajax api is not available anymore, well all the xajax project domain)

Leave a Reply

Your email address will not be published. Required fields are marked *