[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 652
  • Last Modified:

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

0
jiritsu
Asked:
jiritsu
  • 4
  • 3
1 Solution
 
Richard QuadlingSenior Software DeverloperCommented:
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 DeverloperCommented:
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Richard QuadlingSenior Software DeverloperCommented:
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
 
Richard QuadlingSenior Software DeverloperCommented:
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
 
jiritsuAuthor Commented:
gksinghiet,
I could not implement your solution but I got RQuadling to work.

Thanks for the assistance.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now