Populating the AJAX pop-up form?

Hello,
I have a PHP form that is linked to a database and has some AJAX script in it. The PHP form pulls up subscriber info from the database. Each row in the form is unique to a subscriber. The unique account number on each row identifies the subscriber. In the last column of the row, I have a radio button. When clicked, an AJAX input form pops up, where I would like to add some notes pertaining to the subscriber. I need 2 things:

1. When the AJAX form pops up, the form should contain the account number, first name, last name of the subscriber (i.e. relevant to the row that was clicked).

2. When the user has added the notes on the AJAX form and clicked the Submit button, the database needs to be populated.

Can someone tell me how I can do this? I have attached the code snippet that I am working on.

Thank you.
A

<?php
include "_db.php";
$code = $_POST['D1'];
$due_amount = $_POST['amount'];
$sql = "SELECT t.account_num,s.first_name, s.last_name,s.home_phone, h.address1, h.address2, h.city,h.state,
 .....
$result_2 = mysql_query($sql2);
 
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 
 
<!--Start of the Ajax script-->
<script type="text/javascript">
function doForm() {
	document.getElementById('formDiv').style.zIndex = "100";
	document.getElementById('formDiv').style.display = "";
	document.getElementById('body').style.backgroundColor = "#000000";
	document.getElementById('button1').style.visibility = "visible";
	
}
function clearForm(frm) {
	frm.title1.value = '';
	frm.protocol.options[0].selected = true;
	frm.link1.value = '';
	frm.desc1.value = '';
}
function quitForm(frm) {
	document.getElementById('formDiv').style.zIndex = "-1";
	document.getElementById('formDiv').style.display = "none";
	document.getElementById('body').style.backgroundColor = "#CC9966";
	document.getElementById('button1').style.visibility = "visible";
	
	clearForm(frm);
}
</script>
<!--End of the Ajax script-->
 
</head>
 
    
	<?php
	while ($row2= mysql_fetch_assoc($result_2))
	{
	?>
      <tr >
    <td colspan="8"><div align="center" class="style5">Balance Due Report for <?=$row2['name']?> </div></td>
    </tr>
	<tr >
    <td colspan="8"><div align="center" class="style5">Due Amount Greater than $<?php echo $due_amount;?> </div></td>
    </tr>
	<?php
	}
	?>
  
    
    <table>
	<form action="subscriber_report_mod.php" method="get">
	<thead>
  <tr>
    <th> <div align="center"><span class="style3">Sr No</span> </div></th>
    <th> <div align="center"><span class="style3">Account Number</span> </div></th>
    <th><div align="left"><span class="style3">First Name</span></div></th>
    <th><div align="left"><span class="style3">Last Name</span> </div></th>
    <th><div align="left"><span class="style3">Address 1 </span></div></th>
    <th><div align="left"><span class="style3">City</span></div></th>
    <th><div align="left"><span class="style3">Balance Due</span> </div></th>
	<th><div align="left"><span class="style3">Home Phone</span> </div></th>
	<th><div align="left"><span class="style3">Notes</span> </div></th>
	</tr>
  </thead>
  <?php
	if (!mysql_num_rows($result)){
	?>
<tr>
  <td colspan="8"><div align="center"><span class="style1">No reports for this period</span></div></td>
</tr>
<?php
}
$i=0;
while ($row=mysql_fetch_assoc($result)){
$i++;
?>
  
  <tr>
  	 <td align="center"><?php echo $i;?></td>
    <td><?=$row['account_num']?></td>
    <td><?=$row['first_name']?></td>
    <td><?=$row['last_name']?></td>
    <td><?=$row['address1']?></td>
    <td><?=$row['city']?></td>
    <td><?=$row['balance_due']?></td>
	<td><?=$row['home_phone']?></td>
	<td><p>
	  <label>
	  <input type="radio" name="RadioGroup1" value="radio" id="button1" onClick="doForm();">New Note</label>
	  <br>
	  <label>
	   <input type="radio" name="RadioGroup1" value="radio" id="button2" onClick="doForm2();">View Note</label>
	  <br>
	  </p></td>	
	</tr> 
 
  <?php
		}
	?>	
   </table>  
   <div id="formDiv" style="width: 60%; margin: 0 auto; padding: 10px; background-color: #ccff99;  text-align: center; z-index: -1; position: absolute; top: 50px; left: 150px; border: solid 10px #cc6600; font-weight: bold; display: none;"> <h3>Calls Notes</h3>
<table align="center">
<form name="form1" action="" method="post">
		<tr>
			<td  align="right">CSR:</td> 
			<td align="left"><select name="CSR">
					<option value="0">Select</option>
					<option value="1">A</option>
					<option value="2">B</option>
					<option value="3">C</option>
					<option value="4">D</option>
				</select></td></tr>
		<tr><td align="right">Account No:</td> <td align="left"> I need the account num to be picked in this cell </td></tr>
		<tr><td align="right">Date:</td> <td align="left"> I need the current date to be picked in this cell </td></tr>
		<tr><td align="right">Notes:</td> <td align="left"><textarea name="notes" cols="40" rows="5"></textarea></td></tr>
		<tr><td colspan="2" align="center"><input type="button" name="reset" value="Submit" onclick="quitForm(this.form);" /></td></tr>
</form>
<br /><br />
</table>
</div>
  
</table>
 
</td>
  </tr> 
 
</table>
 
</body>
</html>

Open in new window

aej1973Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
Refer to the following AJAX tutorial:
http://w3schools.com/ajax/ajax_intro.asp

Pay special attention to:
http://w3schools.com/ajax/ajax_database.asp
0
aej1973Author Commented:
Hi,
I have figured out how to submit the data from the AJAX pop-up form to the database. The only drawback is that I need to enter all the subscriber information, including the account number. How can I pass these values to the AJAX pop-up form so that these fields are already populated and I only have to add the notes? The account number needs to be picked up from the portion of the code that I have shown below.
Thanks,
A
<?php
	if (!mysql_num_rows($result)){
	?>
<tr>
  <td colspan="8"><div align="center"><span class="style1">No reports for this period</span></div></td>
</tr>
<?php
}
$i=0;
while ($row=mysql_fetch_assoc($result)){
$i++;
?>
  
  <tr>
  	 <td align="center"><?php echo $i;?></td>
    <td><?=$row['account_num']?></td>
    <td><?=$row['first_name']?></td>
    <td><?=$row['last_name']?></td>
    <td><?=$row['address1']?></td>
    <td><?=$row['city']?></td>
    <td><?=$row['balance_due']?></td>
	<td><?=$row['home_phone']?></td>
	<td><p>
	  <label>
	  <input type="radio" name="RadioGroup1" value="<?=$row['account_num']?>
" id="button1" onClick="doForm();">New Note</label>
	  <br>
	  <label>
	   <input type="radio" name="RadioGroup1" value="<?=$row['account_num']?>
" id="button2" onClick="doForm2();">View Note</label>
	  <br>
	  </p></td>	
	</tr> 
 
  <?php
		}
	?>	
   </table>  

Open in new window

0
hieloCommented:
>> How can I pass these values to the AJAX pop-up form so that these fields are already populated and I only have to add the notes?
From all the posted code, it is not clear how you are creating the pop up form. If you are using window.open("somescript.php","windowName,"");

then on the first argument you can append the data you need:
window.open("somescript.php?firstNameSent=John&lastNameSent=Doe&acctSent=23","windowName,"");

From the popup's point of view, its url is:
somescript.php?firstName=John&lastName=Doe&acct=23
so you could just extract the data from ther url. On the popup window you could include the javascript function below. On your popup, if you have:
<input type="text" id="myFirstName" name="first" value=""/>

then to fill it you would do:
window.onload=prefillValues;

function prefillValues()
{
 document.getElementById("myFirstName").value = gup("firstNameSent")
}

There's a lot of info on this post, but they address your problems. Read two or three times if necessary and read carefully.
function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

aej1973Author Commented:
Helio, if you take a look at my first code snippet (that give you my entire code you will see that I am not useing the 'window.open'.

A
0
hieloCommented:
It seems that your "popup" is just a div with a high zindex value:
document.getElementById('formDiv').style.zIndex = "100";

So technically the "popup" and the "parent page" see the same elements. So if you need to pass data to the server via AJAX you can just extract the values similar to:
document.getElementById("firstName").value

but your input element will need to have a corresponding id attribute:
<input type="text" name='first' id='firstName' value=''/>

once you have the value, you pass it via the ajax request.
0
aej1973Author Commented:
Thanks Helio, so this is what I have done too. But the only problem is that for some reason, irrespective of the row I click only the values from the first row is getting picked up  For eg, the account number on my first row is 100 and this get picked up if I click this row, but when I click the next row with account_num = 200 thr form still picks up account_num as 100. Why is this? I am attaching my updated code snippet. Thanks for the help.

A
}
</script>
<script src="/balance_due/sorttable.js"></script>
<!--Start of the Ajax script-->
<!--Start of the Ajax script-->
<script type="text/javascript">
function doForm() {
	document.getElementById('formDiv').style.zIndex = "100";
	document.getElementById('formDiv').style.display = "";
	document.getElementById('body').style.backgroundColor = "#000000";
	document.getElementById('button1').style.visibility = "visible";
	document.getElementById('acnum').value=document.getElementById('button1').value;
	
}
function clearForm(frm) {
	//frm.protocol.options[0].selected = true;
	frm.acnum.value=document.getElementById('button1').value;
	//frm.firstname.value='Mary';
	//frm.lastname.value='Jayaprakash';
	frm.notes.value='';
}
function quitForm(frm) {
	document.getElementById('formDiv').style.zIndex = "-1";
	document.getElementById('formDiv').style.display = "none";
	document.getElementById('body').style.backgroundColor = "#CC9966";
	document.getElementById('button1').style.visibility = "visible";
	clearForm(frm);
}
</script>
<!--End of the Ajax script-->
 
</head>
 
<body bgcolor="#CC9966" id="body">
	
	<!------------------more code comes here which  I have deleted-------------->
  <tr>
  	 <td align="center"><?php echo $i;?></td>
    <td align="center"><input name="submit" value="<?=$row['account_num']?>" type="submit"  class="mybutton" /></td>
	<td><?=$row['first_name']?></td>
    <td><?=$row['last_name']?></td>
    <td><?=$row['address1']?></td>
    <td><?=$row['city']?></td>
    <td><?=$row['balance_due']?></td>
	<td><?=$row['home_phone']?></td>
	<!--<td align="center"><input name="Add Note" value="<?=$row['account_num']?>" type="submit" id="button1" onSubmit="doForm();" /></td>-->
	
		<td><p>
	  <label>
	  <input type="radio" name="RadioGroup1" value="<?=$row['account_num']?>" id="button1" onClick="doForm();">New Note</label>
	  <br>
	  <label>
	   <input type="radio" name="RadioGroup1" value="<?=$row['account_num']?>" id="button2" onClick="doForm2();">View Note</label>
	  <br>
	  </p></td>
	</tr> 
	
	
  <?php
		}
	?>	
	
	</table>  
	
   <div id="formDiv" style="width: 50%; margin: 0 auto; padding: 10px; background-color: #ccff99;  text-align: center; z-index: -1; position: absolute; top: 30px; left: 300px; border: solid 10px #cc6600; font-weight: bold; display: none;"> <h3>Balance Due Collection Calls Notes</h3>
<table>
<form name="form1" action="" method="post">
		
		<tr><td align="right">Account No:</td> <td align="left"><input type="text" name="acnum" size="15"  id="acnum"/></td></tr>
		<tr><td align="right">Notes:</td> <td align="left"><textarea name="notes" cols="40" rows="5" id="notes"></textarea></td></tr>
		<tr><td colspan="2" align="center"><input type="button" name="reset" value="Submit" onClick="quitForm(this.form);" /></td></tr>
</form>
<br /><br />
</table>
   <form name="form1" action="" method="post">
   <p>Account No: <input type="text" name="acnum" size="15"  id="acnum"/></p>
   <p><textarea name="notes" cols="40" rows="5" id="notes"></textarea></p>
   <p><input type="button" name="reset" value="Submit" onClick="quitForm(this.form);" /></p>
   </form>
</div> 
</table>
 
</td>
  </tr> 
 
</table>
 
</body>
</html>

Open in new window

0
hieloCommented:
>>the account number on my first row is 100 and this get picked up if I click this row, but when I click the next row with account_num = 200 thr form still picks up account_num as 100. Why is this?
I see more than one <input> element with id="acnum". That is your problem. The value of the id attribute MUST BE UNIQUE throughout the entire document. Different browsers will interpret:
document.getElementById("acnum") differently since acnum does not identify a unique <input> element.
Some of them may pick the very first <input> with said id, others will give you the last <input> on the document with said id.
0
aej1973Author Commented:
I have only one element with id - acnum. Even if I start by clicking the 3rd row with account_num = 300
the form still picks up the account_num of the first row which = 100.
0
hieloCommented:
>>I have only one element with id - acnum
Not according to your last code post (Lines 69 and 76). Look at the HTML code generated, not at your server script. Open the page in question via your browser, look at the HTML code it gets from the server script and look for duplicate ids. From what you are describing, it sounds like you DO have duplicate ids.
0
aej1973Author Commented:
I have attached my new code snippet. This clearly show that I have only one 'acnum' element. I am wondering if the issue could be something with my php code and the 'while' statement here...

A

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</script>
<script src="/balance_due/sorttable.js"></script>
<!--Start of the Ajax script-->
<!--Start of the Ajax script-->
<script type="text/javascript">
function doForm() {
	document.getElementById('formDiv').style.zIndex = "100";
	document.getElementById('formDiv').style.display = "";
	document.getElementById('body').style.backgroundColor = "#000000";
	document.getElementById('button1').style.visibility = "visible";
	document.getElementById('acnum').value=document.getElementById('button1').value;
	
}
function clearForm(frm) {
	//frm.protocol.options[0].selected = true;
	frm.acnum.value=document.getElementById('button1').value;
	frm.notes.value='';
}
function quitForm(frm) {
	document.getElementById('formDiv').style.zIndex = "-1";
	document.getElementById('formDiv').style.display = "none";
	document.getElementById('body').style.backgroundColor = "#CC9966";
	document.getElementById('button1').style.visibility = "visible";
	clearForm(frm);
}
 
</script>
<!--End of the Ajax script-->
 
<!--End of the Ajax script-->
 
</head>
 
<body bgcolor="#CC9966" id="body">
 
<!--REMOVED CODE FROM HERE ,,,-->
  <tr>
    <th> <div align="center"><span class="style3">Sr No</span> </div></th>
    <th> <div align="center"><span class="style3">Account Number</span> </div></th>
    <th><div align="left"><span class="style3">First Name</span></div></th>
    <th><div align="left"><span class="style3">Last Name</span> </div></th>
    <th><div align="left"><span class="style3">Address 1 </span></div></th>
    <th><div align="left"><span class="style3">City</span></div></th>
    <th><div align="left"><span class="style3">Balance Due</span> </div></th>
	<th><div align="left"><span class="style3">Home Phone</span> </div></th>
	<th><div align="left"><span class="style3">Notes</span> </div></th>
	</tr>
  </thead>
  <?php
	if (!mysql_num_rows($result)){
	?>
<tr>
  <td colspan="8"><div align="center"><span class="style1">No reports for this period</span></div></td>
</tr>
<?php
}
$i=0;
while ($row=mysql_fetch_assoc($result)){
$i++;
?>
  
  <tr>
  	 <td align="center"><?php echo $i;?></td>
    <td align="center"><input name="submit" value="<?=$row['account_num']?>" type="submit"  class="mybutton" /></td>
	<td><?=$row['first_name']?></td>
    <td><?=$row['last_name']?></td>
    <td><?=$row['address1']?></td>
    <td><?=$row['city']?></td>
    <td><?=$row['balance_due']?></td>
	<td><?=$row['home_phone']?></td>
	<!--<td align="center"><input name="Add Note" value="<?=$row['account_num']?>" type="submit" id="button1" onSubmit="doForm();" /></td>-->
	
		<td><p>
	  <label>
	  <input type="radio" name="RadioGroup1" value="<?=$row['account_num']?>" id="button1" onClick="doForm();">New Note</label>
	  <br>
	  <label>
	   <input type="radio" name="RadioGroup1" value="<?=$row['account_num']?>" id="button2" onClick="doForm2();">View Note</label>
	  <br>
	  </p></td>
	</tr> 
		
 
  <?php
		}
	?>	
	
	</table>  
	
   <div id="formDiv" style="width: 50%; margin: 0 auto; padding: 10px; background-color: #ccff99;  text-align: center; z-index: -1; position: absolute; top: 30px; left: 300px; border: solid 10px #cc6600; font-weight: bold; display: none;"> <h3>Balance Due Collection Calls Notes</h3>
 
<form name="form1" action="" method="post">
		<p>Account No: <input type="text" name="acnum" size="15"  id="acnum"/></p>
		<p><textarea name="notes" cols="40" rows="5" id="notes"></textarea></p>
		<p><input type="button" name="reset" value="Submit" onClick="quitForm(this.form);" /></p>
</form>
 
</div>
 </table>
 
</td>
  </tr> 
 
</table>
 
</body>
</html>

Open in new window

0
hieloCommented:
OK. I see one unique acnum, but the principle of the duplicate ids still applies. I see:
quitForm(this.form) which at the end calls clearForm(frm) which in turn does frm.acnum.value=document.getElementById('button1').value;

Basically it sets acnum to whatever value is in document.getElementById('button1').value.  I specifically told you to "Open the page in question via your browser, look at the HTML code it gets from the server script and look for duplicate ids." Once again you pasted Server code, and it makes it difficult to see these duplicates. The id="button1" is created by the while loop which means that it occurs multiple times.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Computer101Commented:
Forced accept.

Computer101
EE Admin
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.