How to manage different form contexts of same form element in single DOM tree

As my question title could be bit unclear to you (I tried best), following is what I'm exactly trying to do.

I'm having a form element (say a user_info form), where such form elements will be generated for different users by java script and displayed in different js tabs (example: dojo tabs).

once form elements are generated, later I need to react on user actions performed on different html elements defined inside user_info form. In this case I need to identify what is the context (in which user_info form element) in which user is working开发者_运维知识库 on. The simplest example would be how to retrieve form id of the form in which user actions are being performed.

According to my understanding, I can not simply retrieve from by form id, because now DOM tree contains duplicate form instances of the same from element. So, IS there anyway, I could identify form context based on the user actions on its input elements.

Thank You.

From any form element, you can locate the form that contains an element simply by checking the element's "form" property. If you're handling events, then the event object will give you the target. If your forms have "submit" elements in them, then native browser behavior will be to only submit that one affected form anyway.

edit So for example if you have a handler for "click" events bound somehow:

function clickHandler(ev) {
  ev = ev || window.event;
  var theForm = ev.target.form; // find the form from the target element
  if (form) {
    // do whatever you need to do to here
  }
}

If you are having multiple form structures with as many <form></form> tags as there are users, and you have the action buttons inside every form instance

Method 1
- you can get the parent form element of the action button which you clicked using the code given in this answer Finding the form Id in javascript It contains javascript as well as jquery code. When you have the corresponding form ID, you can manipulate its data.

Method 2
- assuming that you are generating the forms elements using javascript, you are probably assigning some numbers as part of the form names. say form_22 (for user with ID 22), form_24 etc., you can assign the same numbers as part of IDs to the action buttons inside those forms, so after generation and assignments, your forms look like this:-

<form name="user_22">

following are input fields
<input "data1_22">
<input "data2_22">

following are action inputs
<input name="edit_22" id="edit_22" onclick="editForm();" />
<input name="some_other_action_24" id="some_other_action_24" onclick="otherActionForm();" />

</form>

<form name="user_24">

following are input fields
<input "data1_24">
<input "data2_24">


following are action inputs
<input name="edit_24" id="edit_24" onclick="editForm(this);" />
<input name="some_other_action_24" id="some_other_action_24" onclick="otherActionForm();" />

</form>

So, that you can prepare the form ID inside the js functions and operate on the form data

function editForm(object)
{
   var formNumber = str_replace("edit_","",object.name);
   //Get javascript str_replace from https://github.com/kvz/phpjs/raw/master/functions/strings/str_replace.js
   var formName = "user_"+formNumber;

   //Get form params and do what you want
   document.formName.data1_+formNumber;
   document.formName.data2_+formNumber;
}