xajax: append form fields and firefox
by prettyscripts on 2009-09-15 14:43:56 • Leave a comment »
a case that works in IE but not firefox.
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:
Code:
<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:
PHP:
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>.
and call inserAfter() function.
the html form should now look like:
Code:
<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:
PHP:
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; | |
} |
Comment feed for this post
Affiliates
©2010 by prettyscripts.• powered by b2evolution • skin by prettyscripts