loop through textboxes and store changes for each question

I use php and mysql to list

question1:
answer:
comments:

question2:
answer:
comments:
 and so on

Now what I want to do is track the changes by question so I placed a hidden textbox by the question and if the answer or comment is changed it will update it by one

everything is in a table so this is the code i have tried so far but i cant get it do what i want

Any assistance would be greatly appreciated
function test(){
 if (!document.getElementsByTagName || !document.createTextNode) return;
	 var rows = document.getElementById('answers').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
  for (i = 0; i < rows.length; i++) {
	rows[i].onchange = function() {
		alert('Adding one');
		var cur_num = document.getElementsByName("m_changed")[0].value * 1;
	var addit = 1 * 1;
					document.getElementsByName("m_changed")[0].value = cur_num + addit;
			}
		 }
}

Open in new window

jiritsuAsked:
Who is Participating?
 
Richard QuadlingConnect With a Mentor Senior Software DeveloperCommented:
Using 2 columns for the inputs and a submit button - look at the new url to see all the data.

/showcounter.html?q[1][answer]=Answer1&q[1][comment]=Comment1&q[1][count]=2&q[2][answer]=Answer2&q[2][comment]=Comment2&q[2][count]=2&q[3][answer]=Answer3&q[3][comment]=Comment3&q[3][count]=2


<html>
<head>
<title>Demo counter</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript">
function handleCount(ev)
	{
	// Determine the root of the input tag's ID that generated the onChange event call.
	var elID = ev.findElement('input[type="text"]').id.substr(0, 2);

	// Find the counter.
	var elCount = $(elID + 'count');

	// Increment the value of the associated change counter.
	elCount.setValue(1 + parseInt(elCount.getValue(), 10));

	// Display the count.
	$(elID + 'show').innerHTML = elCount.getValue();
	}

// Wait until the DOM is fully loaded before trying to access it.
document.observe('dom:loaded', function()
	{
	// Add the onChange handler to the input elements
	$$('input[type="text"]').invoke('observe', 'change', handleCount);
	});
</script>
</head>
<body>
	<form id="MyForm" method="get">
		<table>
			<thead>
				<tr>
					<th>Question</th>
					<th>Answer</th>
					<th>Comment</th>
					<th>Count</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>1</th>
					<td><input type="text" name="q[1][answer]" id="q1a" /></td>
					<td><input type="text" name="q[1][comment]" id="q1c" /></td>
					<td><input type="hidden" name="q[1][count]" id="q1count" value="0" /><span id="q1show">0</span></td>
				</tr>
				<tr>
					<th>2</th>
					<td><input type="text" name="q[2][answer]" id="q2a" /></td>
					<td><input type="text" name="q[2][comment]" id="q2c" /></td>
					<td><input type="hidden" name="q[2][count]" id="q2count" value="0" /><span id="q2show">0</span></td>
				</tr>
				<tr>
					<th>3</th>
					<td><input type="text" name="q[3][answer]" id="q3a" /></td>
					<td><input type="text" name="q[3][comment]" id="q3c" /></td>
					<td><input type="hidden" name="q[3][count]" id="q3count" value="0" /><span id="q3show">0</span></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="4"><input type="submit" /></td>
				</tr>
			</tfoot>
		</table>
	</form>
</body>
</html>

Open in new window

0
 
Richard QuadlingSenior Software DeveloperCommented:
Can you show the HTML also.

I would use a JS library (my preference is for Prototype).

I would make sure all the elements I needed to access had IDs.

See working snippet below.
<html>
<head>
<title>Demo counter</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript">
// Wait until the DOM is fully loaded before trying to access it.
document.observe('dom:loaded', function()
	{
	// Add the onChange handler to the form.
	$('MyForm').observe('change', function(ev)
		{
		// Determine the input tag that generated the onChange event call.
		var el = ev.findElement('input[type="text"]');
	
		// Find the counter.
		var elc = $(el.id + 'count');
	
		// Increment the value of the associated change counter.
		elc.setValue(1 + parseInt(elc.getValue(), 10));
		});
	});
</script>
</head>
<body>
	<form id="MyForm">
		<table>
			<thead>
				<tr>
					<th>Value</th>
					<th>Count</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" name="q[1][value]" id="q1" /></td>
					<td><input type="text" name="q[1][count]" id="q1count" value="0" /></td>
				</tr>
				<tr>
					<td><input type="text" name="q[2][value]" id="q2" /></td>
					<td><input type="text" name="q[2][count]" id="q2count" value="0" /></td>
				</tr>
				<tr>
					<td><input type="text" name="q[3][value]" id="q3" /></td>
					<td><input type="text" name="q[3][count]" id="q3count" value="0" /></td>
				</tr>
			</tbody>
		</table>
	</form>
</body>
</html>

Open in new window

0
 
Richard QuadlingSenior Software DeveloperCommented:
I've made the counters visible. You would have them as hidden.

You could do ...
<html>
<head>
<title>Demo counter</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript">
// Wait until the DOM is fully loaded before trying to access it.
document.observe('dom:loaded', function()
	{
	// Add the onChange handler to the form.
	$('MyForm').observe('change', function(ev)
		{
		// Determine the input tag that generated the onChange event call.
		var el = ev.findElement('input[type="text"]');
	
		// Find the counter.
		var elc = $(el.id + 'count');
	
		// Increment the value of the associated change counter.
		elc.setValue(1 + parseInt(elc.getValue(), 10));

		// Display the count.
		$(el.id + 'show').innerText = elc.getValue();
		});
	});
</script>
</head>
<body>
	<form id="MyForm">
		<table>
			<thead>
				<tr>
					<th>Value</th>
					<th>Count</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" name="q[1][value]" id="q1" /></td>
					<td><input type="hidden" name="q[1][count]" id="q1count" value="0" /><span id="q1show">0</span></td>
				</tr>
				<tr>
					<td><input type="text" name="q[2][value]" id="q2" /></td>
					<td><input type="hidden" name="q[2][count]" id="q2count" value="0" /><span id="q2show">0</span></td>
				</tr>
				<tr>
					<td><input type="text" name="q[3][value]" id="q3" /></td>
					<td><input type="hidden" name="q[3][count]" id="q3count" value="0" /><span id="q3show">0</span></td>
				</tr>
			</tbody>
		</table>
	</form>
</body>
</html>

Open in new window

0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
gksinghietCommented:
To make it simple use a array instead of a hidden textbox like:
  <script language="javascript" type="text/javascript" >
            var questions =new Array(0,0,0);
            function increment(index) {
              question[index]++;
            }
</script>

Now in question box text field call the increment() function like:
question1: <input name="question1" value="" type="text" onclick="increment(0)"/>
question2: <input name="question1" value="" type="text" onclick="increment(1)"/>
question3: <input name="question1" value="" type="text" onclick="increment(2)"/>
0
 
Richard QuadlingSenior Software DeveloperCommented:
Now go figure! The code works in Chrome and FireFox. But IE? Seems events on input don't bubble. Argh!!!!

So. Have to attach events to every input tag. Gee!
<html>
<head>
<title>Demo counter</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript">
function handleCount(ev)
	{
	// Determine the input tag that generated the onChange event call.
	var el = ev.findElement('input[type="text"]');

	// Find the counter.
	var elc = $(el.id + 'count');

	// Increment the value of the associated change counter.
	elc.setValue(1 + parseInt(elc.getValue(), 10));

	// Display the count.
	$(el.id + 'show').innerHTML = elc.getValue();
	}

// Wait until the DOM is fully loaded before trying to access it.
document.observe('dom:loaded', function()
	{
	// Add the onChange handler to the input elements
	$$('input[type="text"]').invoke('observe', 'change', handleCount);
	});
</script>
</head>
<body>
	<form id="MyForm">
		<table>
			<thead>
				<tr>
					<th>Value</th>
					<th>Count</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" name="q[1][value]" id="q1" /></td>
					<td><input type="hidden" name="q[1][count]" id="q1count" value="0" /><span id="q1show">0</span></td>
				</tr>
				<tr>
					<td><input type="text" name="q[2][value]" id="q2" /></td>
					<td><input type="hidden" name="q[2][count]" id="q2count" value="0" /><span id="q2show">0</span></td>
				</tr>
				<tr>
					<td><input type="text" name="q[3][value]" id="q3" /></td>
					<td><input type="hidden" name="q[3][count]" id="q3count" value="0" /><span id="q3show">0</span></td>
				</tr>
			</tbody>
		</table>
	</form>
</body>
</html>

Open in new window

0
 
jiritsuAuthor Commented:
here is the php/html

while($row = mysql_fetch_assoc($result))
{
      $level = $row['lvl'];
      if($level==0){
            $table .= "<tr><td>Activity: <b>{$row['t3_code']}</b> {$row['description']}</td></tr>";
      }
      if($level==1){
            $table .= "<tr><td>&nbsp;&nbsp;Objective:  <b>{$row['t3_code']}</b> {$row['description']}</td></tr>";
      }      
      if($level==2){
            $table .= "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;Task:  <b>{$row['t3_code']}</b> {$row['description']}</td></tr>";
      }      
      if($level==3){
            $meth=$row['t3_code'];
            $table .= "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Methodology:<b>{$row['t3_code']}</b> {$row['description']}</td></tr>";
            
            $s2="Select m.measure,i.answer,i.comments from info_form i, measures m where i.measure = m.qid and i.dept=$dept and t3_code=$meth";
            $res = mysql_query($s2) or die(mysql_error());
            while($measures= mysql_fetch_assoc($res)){
            $table .="<tr><td>Measure:<span class='measure'>{$measures['measure']}</span></td><td><input type='text' name='m_changed' id='m_changed' value=0></td></tr>";
            $table .="<tr><td>Answer:<span class='answer'><input type= text id='ans' value='{$measures['answer']}' onchange='test()'></span></td></tr>";
            $table .="<tr><td>Comments:<span class='comments'><input type= text id='com' value='{$measures['comments']}' onchange='test()'></span></td></tr>";
            }
            }
      
}
?>
0
 
jiritsuAuthor Commented:
I will try these possible solutions and get back to you guys shortly.
here is the php/html

while($row = mysql_fetch_assoc($result))
{
      $level = $row['lvl'];
      if($level==0){
            $table .= "<tr><td>Activity: <b>{$row['t3_code']}</b> {$row['description']}</td></tr>";
      }
      if($level==1){
            $table .= "<tr><td>&nbsp;&nbsp;Objective:  <b>{$row['t3_code']}</b> {$row['description']}</td></tr>";
      }      
      if($level==2){
            $table .= "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;Task:  <b>{$row['t3_code']}</b> {$row['description']}</td></tr>";
      }      
      if($level==3){
            $meth=$row['t3_code'];
            $table .= "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Methodology:<b>{$row['t3_code']}</b> {$row['description']}</td></tr>";
            
            $s2="Select m.measure,i.answer,i.comments from info_form i, measures m where i.measure = m.qid and i.dept=$dept and t3_code=$meth";
            $res = mysql_query($s2) or die(mysql_error());
            while($measures= mysql_fetch_assoc($res)){
            $table .="<tr><td>Measure:<span class='measure'>{$measures['measure']}</span></td><td><input type='text' name='m_changed' id='m_changed' value=0></td></tr>";
            $table .="<tr><td>Answer:<span class='answer'><input type= text id='ans' value='{$measures['answer']}' onchange='test()'></span></td></tr>";
            $table .="<tr><td>Comments:<span class='comments'><input type= text id='com' value='{$measures['comments']}' onchange='test()'></span></td></tr>";
            }
            }
      
}

Open in new window

0
 
jiritsuAuthor Commented:
gksinghiet,
I could not implement your solution but I got RQuadling to work.

Thanks for the assistance.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.