knowledgenotebook
4/11/2016 7:42:00 PM
Hi,
I have an HTML page that is heavy with DOM, that is, I have some table row with several cells, for instance,
[InstrumentName] [Qty] [Person] [OtherInfo] (as one row)
and have a function, say, AddNewRow(), that allows the user to add additional row(s)
Thus, we have
[InstrumentName] [Qty] [Person] [OtherInfo]
[InstrumentName_n] [Qt_n] [Person_n] [OtherInfo_n]
....
<span id="newrowFlag"></span>
prior to FORM submission.
Now, I'd like to allow the user to add additional field(s). Thus, it may appear like this:
[InstrumentName] [Qty] [Person] [OtherInfo]
+AddField (addField()):
upon click,
Field Name: <input type="text" name="fieldName" size=15>
Field Type: <select name="fieldType">
<option>Text
<option>Checkbox
</select>
And if the user did click on addField function, how do we add/append this addition to the defined AddNewRow function?
The AddNewRow function's last two lines look like the following:
parentEl.insertBefore(newrow,p);
}
So, it looks like we need to do two things for the addField function.
(a) dynamically insert the two labels and two fields for a new field.
(b) insert/append new code right before the AddNewRow function's ending }
Is this the way to go? If so, what's command do we need to use to find the neighboring
parentEl.insertBefore(newrow,p);
and
}
?
Please note, parentEl.insertBefore(newrow,p); appears several times within this same function.
Thanks.