Autofill text boxes from td data selected by radio buton

**mople** · 01-02-2009, 03:42 PM

I have a table with five columns, and on the first td cell of each row of the table is a radio button. Data is contained in the other cells in the row. What i want to achive is, the selection that is made with the radio button, data from the td cells to pass the data and auto fill some boxes in a form

<tr>
<th>&nbsp</th>
<th>Name</th>
<th>Value</th>
<th>Batch</th>
<th>Serial Number</th>
</tr>

<tr id="001">
<td><input type="radio"></td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>

<tr id="002">
<td><input type="radio"></td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>

--------------------------------------

<form>
</table>
<tr>
<th>&nbsp</th>
<th>Name</th>
<th>Value</th>
<th>Batch</th>
<th>Serial Number</th>
</tr>

<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
</tr>
</table>
</form>

**jscheuer1** · 01-02-2009, 05:39 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table {
margin-top: 1em;
}
td {
border: 3px ridge #fff;
}
</style>
<script type="text/javascript">
if(document.createElement)
 (function(){
  var radioSData = function(e){
   e = e || window.event;
   var t = e.target || e.srcElement, t2, c = 0;
   if (t.name == 'sdata'){
    t2 = t.parentNode;
    while (t2.nextSibling){
     t2 = t2.nextSibling;
     if (t2.firstChild && t2.firstChild.nodeValue)
      document.getElementById('i' + [++c]).value = t2.firstChild.nodeValue;
    }
   }
  };
  if (document.addEventListener)
   document.addEventListener('click', radioSData, false);
  else if (document.attachEvent)
   document.attachEvent('onclick', radioSData);
 })();
</script>
</head>
<body>
<table>
<tr>
<th>&nbsp</th>
<th>Name</th>
<th>Value</th>
<th>Batch</th>
<th>Serial Number</th>
</tr>

<tr>
<td><input name="sdata" type="radio"></td>
<td>aaa0</td>
<td>bbb0</td>
<td>ccc0</td>
<td>ddd0</td>
</tr>

<tr>
<td><input name="sdata" type="radio"></td>
<td>aaa1</td>
<td>bbb1</td>
<td>ccc1</td>
<td>ddd1</td>
</tr>

<tr>
<td><input name="sdata" type="radio"></td>
<td>aaa2</td>
<td>bbb2</td>
<td>ccc2</td>
<td>ddd2</td>
</tr>

<tr>
<td><input name="sdata" type="radio"></td>
<td>aaa3</td>
<td>bbb3</td>
<td>ccc3</td>
<td>ddd3</td>
</tr>

<tr>
<td><input name="sdata" type="radio"></td>
<td>aaa4</td>
<td>bbb4</td>
<td>ccc4</td>
<td>ddd4</td>
</tr>
</table>


<form action="#">
<table>
<tr>
<th>Name</th>
<th>Value</th>
<th>Batch</th>
<th>Serial Number</th>
</tr>

<tr>
<td><input id="i1" type="text" value=""></td>
<td><input id="i2" type="text" value=""></td>
<td><input id="i3" type="text" value=""></td>
<td><input id="i4" type="text" value=""></td>
</tr>
</table>
</form>
</body>
</html>

**mople** · 01-02-2009, 09:50 PM

excellent thanks, that was what I was have after.

I see one issue though with what i want to do. I have three options with buttons that call up the input form, a addnew, update and delete buttons. After one of the buttons is clicked and then another option is clicked, it will not autofill untill the radio selection is made again.

I think a way to have a autofill refresh on each button click is that the radio selection data to stored maybe in a array. Then after a click of an option button the data is passed from the array. But I am by no means a programmer so I dont know the best way.

**jscheuer1** · 01-03-2009, 03:33 AM

Or the function could be run again with a pseudo event to repopulate the text inputs.

However, to be certain of the efficacy of this solution I would really like to see what you have, live if possible. It certainly doesn't have to be part of your site, just a demo of the current situation. And it doesn't have to work as desired, I think I already understand what you are going for, though we can update that as need may be.

**mople** · 01-04-2009, 11:29 PM

Code:

<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">

if(document.createElement)
 (function(){
  var radioSData = function(e){
   e = e || window.event;
   var t = e.target || e.srcElement, t2, c = 0;
   if (t.name == 'sdata'){
    t2 = t.parentNode;
    while (t2.nextSibling){
     t2 = t2.nextSibling;
     if (t2.firstChild && t2.firstChild.nodeValue)
      document.getElementById('i' + [++c]).value = t2.firstChild.nodeValue;
    }
   }
  };
  if (document.addEventListener)
   document.addEventListener('click', radioSData, false);
  else if (document.attachEvent)
   document.attachEvent('onclick', radioSData);
 })();



function menu(req) {

var e = req;

if (document.getElementById("ph")) {
	var clrn = getElementById("ph");
	clrn.parentNode.removeChild(clrn);
	}

var ph = document.createElement("div");

if (e.value == 'Add New') {
	ph.innerHTML = document.getElementById("add").innerHTML;
	var canvas = document.getElementById("canvas");
	
	if (canvas.firstChild) {
		canvas.removeChild(canvas.firstChild);
		}
	canvas.appendChild(ph);
	canvas.firstChild.style.display="block";
	}
if (e.value == 'Update') {
	ph.innerHTML = document.getElementById("update").innerHTML;
	var canvas = document.getElementById("canvas");
	
	if (canvas.firstChild) {
		canvas.removeChild(canvas.firstChild);
		}
	canvas.appendChild(ph);
	canvas.firstChild.style.display="block";
	}
if (e.value == 'Delete') {
	ph.innerHTML = document.getElementById("delete").innerHTML;
	var canvas = document.getElementById("canvas");
	
	if (canvas.firstChild) {
		canvas.removeChild(canvas.firstChild);
		}
	canvas.appendChild(ph);
	canvas.firstChild.style.display="block";
	}
if (e.value == 'Cancel') {
	ph.innerHTML = ('&nbsp');
	var canvas = document.getElementById("canvas");
	
	if (canvas.firstChild) {
		canvas.removeChild(canvas.firstChild);
		}
	canvas.appendChild(ph);
	canvas.firstChild.style.display="none";
	}


function verify(fm) {


if (confirmstatus == false) {
	return false;
	}

if (confirmstatus == true) {
	return true;
	}
}
};
</script>

<div>
<form>
<table>
<tr>
<th>&nbsp</th>
<th>name</th>
<th>value</th>
<th>serial</th>
<th>code</th>
</tr>

<tr>
<td><input type="radio" name="sdata"</td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>

<tr>
<td><input type="radio" name="sdata"></td>
<td>eee</td>
<td>fff</td>
<td>ggg</td>
<td>hhh</td>
</tr>
</table>
</form>
</div>


<br />

<div id="panel">
<input type="button" class="aud" value="Add New" onclick="menu(this)">
<input type="button" class="aud" value="Update" onclick="menu(this)">
<input type="button" class="aud" value="Delete" onclick="menu(this)">
</div>

<br />

<div id="canvas">
</div>

<div id="add" style="display:none">
<p class="actionname">ADD</p>
<form method="post action="file.php" onsubmit="return verify(this)">
<table class="stock" cellspacing="0">
<tr>
<th>name</th>
<th>Value</th>
<th>serial</th>
<th>code</th>
</tr>
<tr>
<td><input id="" type="text" name="Aname" value=""></td>
<td><input id="" type="text" name="Avalue" value=""></td>
<td><input id="" type="text" name="Aserial" value=""></td>
<td><input id="" type="text" name="Acode" value=""></td>
</tr>
</table>
<input type="submit" class="prompts" value="Submit"><input type="button" class="prompts" value="Cancel" onclick="menu(this)">
</form>
</div>

<div id="update" style="display:none">
<p class="actionname">UPDATE</p>
<form method="post action="file.php" onsubmit="return verify(this)">
<table class="stock" cellspacing="0">
<tr>
<th>name</th>
<th>Value</th>
<th>serial</th>
<th>code</th>
</tr>
<tr>
<td><input id="i1" type="text" name="Uname" value=""></td>
<td><input id="i2" type="text" name="Uvalue" value=""></td>
<td><input id="i3" type="text" name="Userial" value=""></td>
<td><input id="i4" type="text" name="Ucode" value=""></td>
</tr>
</table>
<input type="submit" class="prompts" value="Submit"><input type="button" class="prompts" value="Cancel" onclick="menu(this)">
</div>

<div id="delete" style="display:none">
<p class="actionname">DELETE</p>
<form method="post action="file.php" onsubmit="return verify(this)">
<table class="stock" cellspacing="0">
<tr>
<th>name</th>
<th>Value</th>
<th>serial</th>
<th>code</th>
</tr>
<tr>
<td><input id="i1" type="text" name="Dname" value=""></td>
<td><input id="i2" type="text" name="Dvalue" value=""></td>
<td><input id="i3" type="text" name="Dserial" value=""></td>
<td><input id="i4" type="text" name="Dcode" value=""></td>
</tr>
</table>
<input type="submit" class="prompts" value="Submit"><input type="button" class="prompts" value="Cancel" onclick="menu(this)">
</form>

</div>
</body>
</html>

some notes:

I have not assigned ids on the inputs in the 'add' div as the radio selection is not needed for this option.

The menu function works out the requested command, clones then sets display attribute. I have used your event handling code but I have noticed situations where the radio selection and text field data value is out of sync.

Do you have tips on how to do the validation on submit. I want to check for all fields are filled, if complete display confirmation message. "Proceed to (requested command) name: aaa value: bbb serial: ccc code: ddd".

thanks

**jscheuer1** · 01-05-2009, 02:35 PM

I'm still not clear on what you hope to accomplish with this. The HTML used to render the 'receiving' area changes, but to what purpose? I don't see anything actually getting added or deleted though, except for the first time one of those buttons is clicked.

Note: Using the innerHTML property within a form often results in markup that performs other than expected when the form is submitted. There may be one and only one element on a page with a given id.

Thread: Autofill text boxes from td data selected by radio buton

Thread Tools

Search Thread

Autofill text boxes from td data selected by radio buton

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions