?
Solved

Getting the id/value of a TextBox,Checkbox,Combo

Posted on 2006-03-31
7
Medium Priority
?
352 Views
Last Modified: 2008-02-01
<body>
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="1" id="addCaseLinkTable">
  <tr>
    <td>
        <input type="text" name="firstName"  value="John"/>
    </td>
    <td><label>
      <input type="checkbox" name="checkbox" value="checkbox" />
      checkMenu
      <select name="select">
        <option>one</option>
         <option>two</option>
      </select>
    </label></td>
      <td><button onclick="disablePopulated(0)">click me</button></td>
  </tr>
</table>
 </form>
</body>



Now Consider this JS
<script language="javascript">
function disablePopulated(jcount){
var table = document.getElementById('addCaseLinkTable');       
var totalRows = table.rows.length;

rowElement=table.rows.item(jcount); // gets me the selected row

var valueOfTextBox = rowElement.cells[0].?????????
var valueOfCheckBox = rowElement.cells[1].?????????
var valueOfSelect= rowElement.cells[2].?????????
}
</script>

How do I get the actual values of the 3 items and how do i make them readonly
ie how do I get a reference to textfield , change its value and then make it readonly if needed..

Thanks

0
Comment
Question by:ashok_001
  • 4
  • 3
7 Comments
 

Author Comment

by:ashok_001
ID: 16348158
Remember the fields will be in a table/list and there will be multipe checkboxes,input boxes etc bearing the same name
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16349407
<script language="javascript">
function disablePopulated(theForm) {
   var needTypes = ("text,checkbox,select").split(',');
   var needObjs  = new Array();
   var nx=0;
   var elems = theForm.elements;
   for (var ix=0; ix < elems.length; ix++) {
       var curElem = elems[ix];
         if (!curElem || !curElem.type) { continue; }
         for (jx=0; jx < needTypes.length;jx++) {
              if (needTypes[jx].match (curElem.type)) {
                        needObjs[nx++] = curElem;
                  }
                  // Select Requires matching with tagName
              if (needTypes[jx].toUpperCase().match (curElem.tagName)) {
                        needObjs[nx++] = curElem;
                  }
         }
   }
   for (ix=0; ix < needObjs.length; ix++) {
               needObjs[ix].setAttribute ("disabled",true);

         alert ('Form Element ' + needObjs[ix].name + ' Type ' + needObjs[ix].type);
   }
   return (false);
}
</script>

<form id="form1" name="form1" method="post" action="">
<table width="100%" border="1" id="addCaseLinkTable">
  <tr>
    <td>
        <input type="text" name="firstName"  value="John">
    </td>
    <td><label>
      <input type="checkbox" name="checkbox" value="checkbox" />
      checkMenu
      <select name="select">
       <option>one</option>
        <option>two</option>
      </select>
    </label>
      </td>
    <td>
      <button onclick="return disablePopulated(this.form);">click me</button>
    </td>
  </tr>
</table>
</form>
0
 

Author Comment

by:ashok_001
ID: 16349964
This is great !! The only thing though is that I will have multiple rows of the same thing....

eg:
---

  <tr>
    <td>
        <input type="text" name="firstName"  value="John">
    </td>
    <td><label>
      <input type="checkbox" name="checkbox" value="checkbox" />
      checkMenu
      <select name="select">
       <option>one</option>
        <option>two</option>
      </select>
    </label>
     </td>
    <td>
     <button onclick="return disablePopulated(this.form);">click me</button>
    </td>
  </tr>
    <tr>
    <td>
        <input type="text" name="firstName"  value="John">
    </td>
    <td><label>
      <input type="checkbox" name="checkbox" value="checkbox" />
      checkMenu
      <select name="select">
       <option>one</option>
        <option>two</option>
      </select>
    </label>
     </td>
    <td>
     <button onclick="return disablePopulated(this.form);">click me</button>
    </td>
  </tr>


The button will tell me which box/row I clicked
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ashok_001
ID: 16352875
any takers for 200 points?
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16355366
I saw your updated request. This needs a completely different approach (instead of walking through forms elements needs a DOM walk through)...
Which can be done. But is a complete rewrite.


0
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 800 total points
ID: 16361681
This one is a rewrite...

<script language="javascript">
function getParent (src, tagName) {
     while (src.parentNode != null) {
          if (src.parentNode.tagName  == tagName) {
               return src.parentNode;
          }
          src = src.parentNode;
     }
     return src;
}

function srchChildNodes (srchObj) {
      var nx=0;
      var needTypes = ("text,checkbox,select").split(',');
      var needObjs  = new Array();
      if (!srchObj) { return; }
      if (!srchObj.childNodes) { return; }
      var elems = srchObj.childNodes;
      for (var ix=0; ix < elems.length; ix++) {
            var curElem = elems[ix];
            if (curElem.childNodes) { srchChildNodes (curElem); }
      
            if (!curElem || !curElem.type) { continue; }
            for (jx=0; jx < needTypes.length;jx++) {
                  if (needTypes[jx].match (curElem.type)) {
                  needObjs[nx++] = curElem;
                  }
                  // Select Requires matching with tagName
                  if (needTypes[jx].toUpperCase().match (curElem.tagName)) {
                        needObjs[nx++] = curElem;
                  }
            }
      }
      for (ix=0; ix < needObjs.length; ix++) {
            needObjs[ix].setAttribute ("disabled",true);
            //alert ('Form Element ' + needObjs[ix].name + ' Type ' + needObjs[ix].type);
      }
}
function disablePopulated(theFld) {
   var srchFld = getParent (theFld, "TR");
   var elems = srchFld.childNodes;
   srchChildNodes (srchFld);
   return false;
}
</script>

<form id="form1" name="form1" method="post" action="">
<table>
<tr>
    <td>
        <input type="text" name="firstName"  value="John">
    </td>
    <td><label>
      <input type="checkbox" name="checkbox" value="checkbox" />
      checkMenu
      <select name="select">
       <option>one</option>
        <option>two</option>
      </select>
    </label>
     </td>
    <td>
     <button onclick="return disablePopulated(this);">click me</button>
    </td>
  </tr>
    <tr>
    <td>
        <input type="text" name="firstName"  value="John">
    </td>
    <td><label>
      <input type="checkbox" name="checkbox" value="checkbox" />
      checkMenu
      <select name="select">
       <option>one</option>
        <option>two</option>
      </select>
    </label>
     </td>
    <td>
     <button onclick="return disablePopulated(this);">click me</button>
    </td>
  </tr>
</table>
</form>
0
 

Author Comment

by:ashok_001
ID: 16387828
sorry for the late reply. this is super! you are awesome
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question