title: Get record value from form using javascript
body: <p>I want to get value of id and name from the following table and send to the server to update the record.
  So far, I have made particular record editable but I am totally unable to get the updated value to the server side. I am newbie in JavaScript. Help is appreciated.</p>
  
  <p>JavaScript Code:</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt;
  &lt;%@ taglib uri="http://displaytag.sf.net" prefix="display" %&gt;
  &lt;%@ taglib uri="/struts-tags" prefix="s" %&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Records&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="/XMLTest/css/tableStyle.css" /&gt;
  &lt;script type="text/javascript"&gt;
  function makeEditable(elem) {
  
      var parentNode =  elem.parentNode.parentNode;
      var childs = parentNode.childNodes;
  
      for(var i = 0; i &lt; childs.length-1; i++){
          var innerChilds = childs[i].childNodes;
          var innerChildValue = "";
  
          if( innerChilds.length &gt; 0){
              for(var j = 0; j &lt; innerChilds.length; j++){
                  var tag = innerChilds[j];
  
                  if(tag.type == 'button')
                      continue;
  
                  if(tag.type == 'hidden')
                      innerChildValue = tag.value;
              }
          }
  
          childs[i].innerHTML = "&lt;input type='text' size='10' value='" +innerChildValue +"' /&gt;";
      }
  
      childs[childs.length-1].innerHTML = "&lt;form action='updateOrganization'&gt;&lt;input type='hidden' name='id' value='' /&gt;&lt;input type='submit' value='Save'/&gt;&lt;/form&gt;&lt;input type='button' value='Cancel' onClick='window.location.reload()'/&gt;";
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;jsp:include page="/header.jsp"&gt;&lt;/jsp:include&gt;
  &lt;center&gt;
  &lt;display:table id="record" name="listOfOrganization" requestURI="/organization" pagesize="10"&gt;
      &lt;display:caption&gt;Organization Records&lt;/display:caption&gt;
  
      &lt;display:column title="Id"&gt;
      &lt;c:out value="${record.id}"&gt;&lt;/c:out&gt;
          &lt;input type="hidden" name="id" value="${record.id}" /&gt;
      &lt;/display:column&gt;
  
      &lt;display:column title="Name" &gt;
          &lt;c:out value="${record.name}"&gt;&lt;/c:out&gt;
          &lt;input type="hidden" name="name" value="${record.name}" /&gt;
      &lt;/display:column&gt;
  
      &lt;display:column media="html"&gt;
          &lt;input type="button" onclick="makeEditable(this)" value="update" /&gt;
          &lt;input type="button" onclick="makeEditable(this)" value="view" /&gt;
      &lt;/display:column&gt;
  &lt;/display:table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>