Trying to adapt my working email code to work on a different page... I have VERY little javascript experience...and don't know proper syntax.

I want to put this on a page that is created with a while loop (php) and has many members on one page. So it needs a unique identifier for the form (and I think each field in the form) so it will properly update back to the correct section of the while loop (instead of just the top one like it does now.).

I appreciate your assistance.

Javascript

var thisRandNum = "<?php echo $thisRandNum; ?>"; 

// Start Private Messaging stuff
$('#pmForm').submit(function(){$('input[type=submit]', this).attr('disabled', 'disabled');});
function sendPM ( ) {
      var pmSubject = $("#pmSubject");
	  var pmTextArea = $("#pmTextArea");
	  var sendername = $("#pm_sender_name");
	  var senderid = $("#pm_sender_id");
	  var recName = $("#pm_rec_name");
	  var recID = $("#pm_rec_id");
	  var pm_wipit = $("#pmWipit");
	  var url = "scripts_for_profile/private_msg_parse.php";
      if (pmSubject.val() == "") {
           $("#interactionResults").html('<img src="images/round_error.png" alt="Error" width="21" height="20" /> &nbsp; Please type a subject.').show().fadeOut(6000);
      } else if (pmTextArea.val() == "") {
		   $("#interactionResults").html('<img src="images/round_error.png" alt="Error" width="21" height="20" /> &nbsp; Please type in your message.').show().fadeOut(6000);
      } else {
		   $("#pmFormProcessGif").show();
		   $.post(url,{ subject: pmSubject.val(), email_body: pmTextArea.val(), senderName: sendername.val(), senderID: senderid.val(), rcpntName: recName.val(), rcpntID: recID.val(), thisWipit: pm_wipit.val() }, function(data) {
			   $("#pmForm").slideUp("fast");
			   $("#interactionResults").html(data).show().fadeOut(5000);
			   document.pmForm['. $id  .'].pmTextArea.value='';
			   document.pmForm['. $id  .'].pmSubject.value='';
			   $("#pmFormProcessGif").hide();
           });
	  }
}
// End Messaging

PHP / HTML

<div class="interactContainers" id='.$id.' style="background-color: #EAF4FF;">
<table  width="770" border="0" cellspacing="2" cellpadding="2">
<form action="javascript:sendPM();" name="pmForm" id='. $id  .'  method="post">

<tr >
<td  colspan="2" align="center">
<font size="+1">Sending Private Message to <strong><em>'.$username.'</em></strong></font><br /><br />
<!-- START DIV - interaction status container that only appears when we instruct it to -->
     <div id="interactionResults" ></div>
<!-- END DIV - interaction status container that only appears when we instruct it to -->
</td >
<td align="center"><font size="+1">E-mail Tips</font><br /><br /></td >
</tr>

<tr ><td  align="right" valign="top" width="30px">Subject:</td>
<td width="60%" valign="top" align="left" ><input name="pmSubject" id="pmSubject" type="text"  cols="50" maxlength="85" /><br></td><td width="30%" rspan="4"><div><table border="1">&nbsp;</table></div></td>
</tr>

<tr><td align="right" valign="top" width="30px">Message:</td>
<td width="60%" valign="top" align="left"><textarea name="pmTextArea" id="pmTextArea" cols="55" rows="8" ></textarea></td>

</tr>

<tr><td>
  <input name="pm_sender_id" id="pm_sender_id" type="hidden" value='. $_SESSION['id'] .' />
  <input name="pm_sender_name" id="pm_sender_name" type="hidden" value='. $_SESSION['username'] .' />
  <input name="pm_rec_id" id="pm_rec_id" type="hidden" value='. $id  .' />
  <input name="pm_rec_name" id="pm_rec_name" type="hidden" value='. $username .' />
  <input name="pmWipit" id="pmWipit" type="hidden" value='. $thisRandNum .' />
  <span name="PMStatus" style="color:#F00;"></span>
</td>
<td ></td >

</tr>



<tr>
<td width="30px"></td>
<td align="right" width="60%">
  <br /><input name="pmSubmit" type="submit" value="Send" /> or <a href="#" onclick="return false" onmousedown ="javascript:toggleSlideBox('. $id  .');">Close</a>
<span id="pmFormProcessGif" style="display:none;"><img src="images/loading.gif" width="28" height="10" alt="Loading" /></span></td>

</tr>
</form>
</table>
</div>

I know the '. $id . ' needs to go into the php / html sections but I am unsure the proper place to put them. I don't think this is hard...I think I am just JavaScript ignorant.

I meant that the '. $id .' needs to be captured by the javascript to identify which person the message and its related fields to work with (not php/html - its already there). How does the Jquery need to be altered to handle it?

I have modified all the html / php to include all id tags so I know which person it relates to but what is needed to alter the javascript? (section below) I have lost functionality of jquery reporting text back if subject is blank, if text area is blank, message sent, pmForm doesn't refresh, or clear the fields, and the loadergif... I think I am on the right track though... please assist. Thank you

<div class="interactContainers" id='.$id.' style="background-color: #EAF4FF;">
<table  width="770" border="0" cellspacing="2" cellpadding="2">
<form action="javascript:sendPM('.$id.');" name="pmForm" id="pmForm" method="post">

<tr >
<td  colspan="2" align="center">
<font size="+1">Sending Private Message to <strong><em>'.$username.'</em></strong></font><br /><br />

</td >
<td align="center"><font size="+1">E-mail Tips</font><br /><br /></td >
</tr>

<tr ><td  align="right" valign="top" width="30px">Subject:</td>
<td width="60%" valign="top" align="left" ><input name="pmSubject'.$id.'" id="pmSubject'.$id.'" type="text"  cols="50" maxlength="85" /><br></td><td width="30%" rspan="4"><div><table border="1">&nbsp;</table></div></td>
</tr>

<tr><td align="right" valign="top" width="30px">Message:</td>
<td width="60%" valign="top" align="left"><textarea name="pmTextArea'.$id.'" id="pmTextArea'.$id.'" cols="55" rows="8" ></textarea></td>

</tr>

<tr><td>
  <input name="pm_sender_id'.$id.'" id="pm_sender_id'.$id.'" type="hidden" value='. $_SESSION['id'] .' />
  <input name="pm_sender_name'.$id.'" id="pm_sender_name'.$id.'" type="hidden" value='. $_SESSION['username'] .' />
  <input name="pm_rec_id'.$id.'" id="pm_rec_id'.$id.'" type="hidden" value='. $id  .' />
  <input name="pm_rec_name'.$id.'" id="pm_rec_name'.$id.'"  type="hidden" value='. $username .' />
  <input name="pmWipit'.$id.'" id="pmWipit'.$id.'" type="hidden" value='. $thisRandNum .' />
</td>
<td ></td >
</tr>

<tr>
<td width="30px"></td>
<td align="right" width="60%">
<!-- START DIV - interaction status container that only appears when we instruct it to -->
     <div name="interactionResults" id='. $id  .' ></div>
<!-- END DIV - interaction status container that only appears when we instruct it to -->
  <br /><input name="pmSubmit" type="submit" value="Send" /> or <a href="#" onclick="return false" onmousedown ="javascript:toggleSlideBox('. $id  .');">Close</a>
<span id="pmFormProcessGif'. $id  .'" style="display:none;"><img src="images/loading.gif" width="28" height="10" alt="Loading" /></span></td>

</tr>
</form>
</table>
</div>

I have modified the html / php again to include all id tags so I know which person it relates to and I added an $id(b) variable in the javascript sendPM(b) and related fields... My interactive div containers work...show / hide but I have lost functionality of jquery reporting text back if subject is blank("#interactionResults"+b), if text area is blank("#interactionResults"+b), message sent("#interactionResults"+b), pmForm doesn't refresh(document.pmForm.pmTextArea.value='';), or clear the fields(document.pmForm.pmSubject.value='';), and the pmFormProcessGif isn't showing now.

I think I am on the right track though... please assist. Thank you

/ Start Private Messaging stuff
$('#pmForm').submit(function(){$('input[type=submit]', this).attr('disabled', 'disabled');});
function sendPM (b) {
      var pmSubject = $("#pmSubject"+b);
	  var pmTextArea = $("#pmTextArea"+b);
	  var sendername = $("#pm_sender_name"+b);
	  var senderid = $("#pm_sender_id"+b);
	  var recName = $("#pm_rec_name"+b);
	  var recID = $("#pm_rec_id"+b);
	  var pm_wipit = $("#pmWipit"+b);
	  var url = "scripts_for_profile/private_msg_parse.php";
      if (pmSubject.val() == "") {
           $("#interactionResults"+b).html('<img src="images/round_error.png" alt="Error" width="21" height="20" /> &nbsp; Please type a subject.').show().fadeOut(6000);
      } else if (pmTextArea.val() == "") {
		   $("#interactionResults"+b).html('<img src="images/round_error.png" alt="Error" width="21" height="20" /> &nbsp; Please type in your message.').show().fadeOut(6000);
      } else {
		   $("#pmFormProcessGif"+b).show();
		   $.post(url,{ subject: pmSubject.val(), email_body: pmTextArea.val(), senderName: sendername.val(), senderID: senderid.val(), rcpntName: recName.val(), rcpntID: recID.val(), thisWipit: pm_wipit.val() }, function(data) {
			   $("#pmForm"+b).slideUp("fast");
			   $("#interactionResults"+b).html(data).show().fadeOut(5000);
			   document.pmForm.pmTextArea.value='';
			   document.pmForm.pmSubject.value='';
			   $("#pmFormProcessGif"+b).hide();
           });
	  }
}
// End Private Messaging

HTML / PHP Code: With id tags

<div class="interactContainers" id='.$id.' style="background-color: #EAF4FF;">
<table  width="770" border="0" cellspacing="2" cellpadding="2">
<form action="javascript:sendPM('.$id.');" name="pmForm" id='.$id.' method="post">

<tr >
<td  colspan="2" align="center">
<font size="+1">Sending Private Message to <strong><em>'.$username.'</em></strong></font><br /><br />

</td >
<td align="center"><font size="+1">E-mail Tips</font><br /><br /></td >
</tr>

<tr ><td  align="right" valign="top" width="30px">Subject:</td>
<td width="60%" valign="top" align="left" ><input name="pmSubject" id='.$id.' type="text"  cols="50" maxlength="85" /><br></td><td width="30%" rspan="4"><div><table border="1">&nbsp;</table></div></td>
</tr>

<tr><td align="right" valign="top" width="30px">Message:</td>
<td width="60%" valign="top" align="left"><textarea name="pmTextArea" id='.$id.' cols="55" rows="8" ></textarea></td>

</tr>

<tr><td>
  <input name="pm_sender_id" id='.$id.' type="hidden" value='. $_SESSION['id'] .' />
  <input name="pm_sender_name" id='.$id.' type="hidden" value='. $_SESSION['username'] .' />
  <input name="pm_rec_id" id='.$id.' type="hidden" value='. $id  .' />
  <input name="pm_rec_name" id='.$id.'  type="hidden" value='. $username .' />
  <input name="pmWipit" id='.$id.' type="hidden" value='. $thisRandNum .' />
</td>
<td ></td >
</tr>

<tr>
<td width="30px"></td>
<td align="right" width="60%">
<!-- START DIV - interaction status container that only appears when we instruct it to -->
     <div name="interactionResults" id='. $id  .' ></div>
<!-- END DIV - interaction status container that only appears when we instruct it to -->
  <br /><input name="pmSubmit" type="submit" value="Send" /> or <a href="#" onclick="return false" onmousedown ="javascript:toggleSlideBox('. $id  .');">Close</a>
<span class="pmFormProcessGif" id='. $id  .' style="display:none;"><img src="images/loading.gif" width="28" height="10" alt="Loading" /></span></td>

</tr>
</form>
</table>
</div>

Let me know if I am on the right track...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.