title: serialize the dynamically generated HTML input elements outside the form using jQuery
body: <p>We are doing a proof of concept for an application where in the HTML elements are generated from the fields configured by the user.</p>
  
  <p>The sample configuration is as follows;</p>
  
  <pre><code>/// Customer SAM
  $response = array(
      array (
          NAME =&gt; CUSTOMER,
          TYPE =&gt; SAM,
          ENABLEDBUTTONS =&gt; SEARCHANDADD,
          TABLENAME =&gt; "OCRD",
          FIELDS =&gt; array (
              array(
                  NAME =&gt; "lblCustNr",
                  TYPE =&gt; LABEL,
                  WIDTH =&gt; "100px",
                  VALUE =&gt; "Customer Nr.:"
              ),
              array(
                  NAME =&gt; "customernr",
                  TYPE =&gt; TEXT,
                  WIDTH =&gt; "100px",
                  COLUMNNAME =&gt; "cardcode",
                  VALUE =&gt; ""
              ),
              array(
                  NAME =&gt; "lblCustName",
                  TYPE =&gt; LABEL,
                  WIDTH =&gt; "100px",
                  VALUE =&gt; "Customer Name:"
              ),
              array(
                  NAME =&gt; "customername",
                  TYPE =&gt; TEXTAREA,
                  COLUMNNAME =&gt; "cardname",
                  ROWS =&gt; "5",
                  COLUMNS =&gt; "50",
                  VALUE =&gt; ""
              ),
              array (
                  NAME =&gt; ADDRESS,
                  TYPE =&gt; SAM,
                  ENABLEDBUTTONS =&gt; SEARCH,
                  TABLENAME =&gt; "CRD1",
                  FIELDS =&gt; array(
                      array(
                          NAME =&gt; "lblStreet",
                          TYPE =&gt; LABEL,
                          WIDTH =&gt; "100px",
                          VALUE =&gt; "Street:"
                      ),
                      array(
                          NAME =&gt; "street",
                          TYPE =&gt; TEXT,
                          WIDTH =&gt; "100px",
                          COLUMNNAME =&gt; "Street",
                          VALUE =&gt; ""
                      ),
                      array(
                          NAME =&gt; "lblStreetNo",
                          TYPE =&gt; LABEL,
                          WIDTH =&gt; "100px",
                          VALUE =&gt; "Street No:"
                      ),
                      array(
                          NAME =&gt; "streetNo",
                          TYPE =&gt; TEXT,
                          WIDTH =&gt; "30px",
                          COLUMNNAME =&gt; "StreetNo",
                          VALUE =&gt; ""
                      ),
                      array(
                          NAME =&gt; "lblCity",
                          TYPE =&gt; LABEL,
                          WIDTH =&gt; "100px",
                          VALUE =&gt; "City:"
                      ),
                      array(
                          NAME =&gt; "city",
                          TYPE =&gt; TEXT,
                          WIDTH =&gt; "100px",
                          COLUMNNAME =&gt; "City",
                          VALUE =&gt; ""
                      ),
                      array(
                          NAME =&gt; "lblZipcode",
                          TYPE =&gt; LABEL,
                          WIDTH =&gt; "100px",
                          VALUE =&gt; "ZipCode:"
                      ),
                      array(
                          NAME =&gt; "zipcode",
                          TYPE =&gt; TEXT,
                          WIDTH =&gt; "50px",
                          COLUMNNAME =&gt; "ZipCode",
                          VALUE =&gt; ""
                      ),
                      array(
                          NAME =&gt; "lblState",
                          TYPE =&gt; LABEL,
                          WIDTH =&gt; "100px",
                          VALUE =&gt; "State:"
                      ),
                      array(
                          NAME =&gt; "state",
                          TYPE =&gt; TEXT,
                          WIDTH =&gt; "100px",
                          COLUMNNAME =&gt; "State",
                          VALUE =&gt; ""
                      ),
                      array(
                          NAME =&gt; "lblCountry",
                          TYPE =&gt; LABEL,
                          WIDTH =&gt; "100px",
                          VALUE =&gt; "Country:"
                      ),
                      array(
                          NAME =&gt; "country",
                          TYPE =&gt; TEXT,
                          WIDTH =&gt; "100px",
                          COLUMNNAME =&gt; "Country",
                          VALUE =&gt; ""
                      )
                  )
              )
          ),
          SEARCHQUERY =&gt; "
              SELECT cardcode, cardname
              FROM [{DATABASENAME}].dbo.OCRD
              [{WHERECLAUSE}]
          "
      )
  );
  </code></pre>
  
  <p>By using a recursive method, the HTML elements are generated as follows;</p>
  
  <pre><code>&lt;form method="POST" id="CustomerSAM"&gt;&lt;/form&gt;
  &lt;p&gt;Customer Nr.:&lt;/p&gt;
  &lt;input name="customernr" id="customernr" form_id="CustomerSAM" type="text" style="width:100px" value=""
  /&gt;
  &lt;p&gt;Customer Name:&lt;/p&gt;
  &lt;textarea name="customername" form_id="CustomerSAM" rows="5" cols="50"&gt;&lt;/textarea&gt;
  &lt;form method="POST" id="AddressSAM"&gt;&lt;/form&gt;
  &lt;p&gt;Street:&lt;/p&gt;
  &lt;input name="street" id="street" form_id="AddressSAM" type="text" style="width:100px" value="" /&gt;
  &lt;p&gt;Street No:&lt;/p&gt;
  &lt;input name="streetNo" id="streetNo" form_id="AddressSAM" type="text" style="width:30px" value="" /&gt;
  &lt;p&gt;City:&lt;/p&gt;
  &lt;input name="city" id="city" form_id="AddressSAM" type="text" style="width:100px" value="" /&gt;
  &lt;p&gt;ZipCode:&lt;/p&gt;
  &lt;input name="zipcode" id="zipcode" form_id="AddressSAM" type="text" style="width:50px" value="" /&gt;
  &lt;p&gt;State:&lt;/p&gt;
  &lt;input name="state" id="state" form_id="AddressSAM" type="text" style="width:100px" value="" /&gt;
  &lt;p&gt;Country:&lt;/p&gt;
  &lt;input name="country" id="country" form_id="AddressSAM" type="text" style="width:100px" value="" /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;p&gt;
      &lt;input name="btnSearch" form_id="AddressSAM" class="button" type="submit" value="Search" tag="AddressSAM" onClick="return searchInSAM($(this));"
      /&gt; |
      &lt;input type="button" form_id="AddressSAM" class="button" value="Clear" onClick="return clearForm($(this));" /&gt;
  &lt;/p&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;p&gt;
      &lt;input name="btnSearch" form_id="CustomerSAM" class="button" type="submit" value="Search" tag="CustomerSAM" onClick="return searchInSAM($(this));"
      /&gt; |
      &lt;input name="btnAdd" form_id="CustomerSAM" class="button" type="submit" value="Add" tag="CustomerSAM" /&gt; |
      &lt;input type="button" form_id="CustomerSAM" class="button" value="Clear" onClick="return clearForm($(this));" /&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>This approach is followed as the dynamic form generation for sub-modules were resulting in inappropriate form generation (nested forms with no form tag). HTML5 standard is used and the form_id attribute for each input and submit element is set.
  We have a JavaScript function which takes the input from these elements and and searches for the data depending on the provided search keys. The method is as follows;</p>
  
  <pre><code>// search the values depending on the provided input.
              // find the form element from the accessing element.
              function searchInSAM(elem)
              {
                  var tagAttr = $(elem).attr('tag');
  
                  // will only hold the id of the form. So will have to preceed with # to access the element.
                  var formElementId = $(elem).attr('form_id');
                  var formElement = $('#'+formElementId);
  
                  var divElement = formElement;
                  while(true)
                  {
                      divElement = getParent(divElement);
                      if(divElement.is('div'))
                      {
                          break;
                      }
                  }
  
                  var inputValues = formElement.serializeArray();
                  var serverAddr = "&lt;?php echo CLIENTHANDLER; ?&gt;";
                  var requestParams = {
                      "&lt;?php echo METHODNAME; ?&gt;": "&lt;?php echo SEARCH_METHOD; ?&gt;",
                      "&lt;?php echo SAMNAME; ?&gt;": tagAttr,
                      "&lt;?php echo INPUTVALUES; ?&gt;": JSON.stringify(inputValues),
                      "&lt;?php echo DATABASESERVER; ?&gt;": "SWEPROEBS4",
                      "&lt;?php echo DATABASENAME; ?&gt;": "SBOswedex",
                      "&lt;?php echo USERID; ?&gt;": 1
                  };
                  console.log(inputValues);
                  // transfer the request to the server
                  request = ajaxRequest(serverAddr, 
                      "&lt;?php echo POSTMETHOD; ?&gt;", 
                      "&lt;?php echo MULTIPARTFORMTYPE; ?&gt;", 
                      "&lt;?php echo JSONTYPE; ?&gt;", 
                      requestParams);
  
                  // Callback handler that will be called on success
                  request.done(function (response, textStatus, jqXHR){
                      //console.log(response);
                      $(divElement).html(response);
                  });
  
                  // Callback handler that will be called on failure
                  request.fail(function (jqXHR, textStatus, errorThrown){
                      // Log the error to the element that is expecting the response
                      $(divElement).html(
                          "The following error occurred: "+
                          textStatus + "&lt;br /&gt;" + errorThrown
                      );
                  });
  
                  return false;
              }
  </code></pre>
  
  <p>The search is always empty as the inputValues array is always empty. 
  The line <code>var inputValues = formElement.serializeArray();</code> is always empty. I read that the serialize() and serializeArray() only serializes the elements inside the provided element.</p>
  
  <p>Can you please give me some hints or solution to serialize all the elements with the provided form_id? i will have a div element that encloses the provided HTML output and this div can contain any type of elements; input, select-option, text area, radio buttons, check boxes etc.</p>
  
  <p>It would be of great help if you can provide me a generic suggestion / solution which caters to all possible elements associated with the form_id.</p>
  
  <p>Thanks in advance.</p>