Ask a Question Register Login

javascript - Lacking concept on editable html email

368

I have a button on a php created html page that on click a javascript function posts specific element values to another php page, does a mysql query, creates a html email and automatically sends it without user interaction. Works great.

An additional step has now been requested to be able to view the email and potentially edit it before it is sent and I am lacking a concept of how to do it. Preferably without destroying the code I already have.

Maybe something like a message box....do you want to review email (yes/no) no continues sending the email and yes allows it to be edited.

Any thoughts or input would be great.

adding current code:

Page1.php

echo "<td>";
if ($x == "Y"){$sent1 = "Y"; $checkcolor1 = 'images/greencheck.jpg';} else {$sent1 = "N"; $checkcolor1 = 'images/redcheck.jpg';}
echo "<div id='stepA$a' title='$sent1$a' value='$mycode'><a id='$a' href='' class ='step1'><div id='stepB$a'><img src='$checkcolor1' title='Send Rental Agreement' border='0' height='24' width='24'></img></div></a></div>";
echo "</td>";

Javascript Function

    $(".step1").on("click", function () {
    var element = $(this);
    var I = element.attr("id");
    var id = $("#id" + I).val();
    var checkname1 =  $("#stepA" + I).attr("title");
    var code =  $("#stepA" + I).attr("value");
    $.post("page2.php", {
        id: id, checkname1: checkname1, code: code          
    },
    function (data) {
        var response = (data).split(";", 2);
        $("#stepA" + I).attr("title", (response[0]));   
        $("#stepB" + I).html(response[1]);
        $("#stepB" + I).hide();
        $("#stepB" + I).fadeIn(1500);
    });
    return false;
});

Page2.php

<?php
include('connection.php');

$mycode = $_POST['code']; 

if (empty($mycode)) {die("No Value");}

$result = mysql_query("SELECT code FROM code WHERE code = '$mycode'") or die ( mysql_error ());

if (mysql_num_rows($result) > 0) {

$id=$_POST['id'];
$checkname1=$_POST['checkname1'];
$rest = $checkname1 [0];

if ($rest == "Y"){

    $checkchange1 ="Y$id";
    $checkchange2 ="<img src='images/greencheck.jpg' title='Send Rental Agreement' border='0' height='24' width='24'></img>";
    echo $checkchange1.";".$checkchange2.";";   

} else {    

    $change="Y";
    $query = "UPDATE info SET invoice = '$change' WHERE id = $id";
    $result = mysql_query($query) or die ( mysql_error ());

$query = "SELECT * FROM info WHERE id = '$id'";
$result = mysql_query($query) or die ( mysql_error ());


if (mysql_num_rows($result) > 0) {      

while(list($a,$b,$c,$d,$e) = mysql_fetch_row($result)) { 

$mail_body ='
<img src="images/logo.png" alt="Logo" width="174" height="70"></img><br />
<p><b>HTML Email body</b></p>';}

            $to = $e;                       

            $headers = 'MIME-Version: 1.0' . "\r\n" .
                       'Content-Type: text/html; charset=ISO-8859-1' . "\r\n" .
                       'From: Rental<[email protected]>' . "\r\n" .
                       'Reply-To: [email protected]' . "\r\n" .
                       'X-Mailer: PHP/' . phpversion();         
            $subject = 'Rental Agreement ' . $d . ', ' . $l . ' - ' . $m;

            mail($to, $subject, $mail_body, $headers);  


    $checkchange1 ="Y$id";
    $checkchange2 ="<img src='images/greencheck.jpg' title='Send Rental Agreement' border='0' height='24' width='24'></img>";
    echo $checkchange1.";".$checkchange2.";";           
}
}
}
}   
?>

Updated: I downloaded the TinyMCE as suggested and made the changes below. I have 3 remaining issues.

1 - the TinyMCE does not show any images so I need to look into that. 2 - although it allows me to edit it....none of the edits to the email or source are actually submitted on button click. 3 - there is html code showing up at the bottom of the email that I can not see or find...so still looking into that.

I have changed my javascript to the following -

    $(".step5").on("click", function () {
    var element = $(this);
    var I = element.attr("id");
    var code =  $("#stepI" + I).attr("value");
    var checkname =  $("#stepI" + I).attr("title");
    $("#email").html("<h3>Loading</h3>").css("display", "block");
    $.get("emailtest1.php?code=" + code + "&id=" + I + "&checkname=" + checkname , function (data) {
        $("#email").html(data);
        $("#snd").click(function () {
            var send_to = document.getElementById("addy").value;                
            var email_body = document.getElementById("content").value;
            $("#email").append("<br /><br /><div><i>Sending...</i></div>");
            $.post("emailtest1.php?code=" + code, {
                mode: "snd", send_to: send_to, email_body: email_body          
            }, function (data) {
            var response = (data).split("z",3);         
            $("#email").html(response[0]);
            $("#stepI" + I).attr("title", (response[1]));   
            $("#stepJ" + I).html(response[2]);
            $("#stepJ" + I).hide();
            $("#stepJ" + I).fadeIn(1500);
                });                                 
        });
        $("#cnx").click(function () {
            $.post("emailtest1.php?code=" + code, {
                mode: "cnx"
            }, function (data) {
                $("#email").html(data);

            });
        });
    });
});

I changed my page1.php to the following

echo "<td>";
if ($x == "Y"){$sent1 = "Y"; $checkcolor1 = 'images/greencheck.jpg';} else {$sent1 = "N"; $checkcolor1 = 'images/redcheck.jpg';}
echo "<div id='stepI$a' title='$sent1$a' value='$mycode'><a id='$a' href='#' class ='step5'><div id='stepJ$a'><img src='$checkcolor1' title='Email Test' border='0' height='24' width='24'></img></div></a></div>";
echo "<div id='email'></div>";

I changed my page2.php to the following

function showForm(){
$id = $_GET['id'];
$checkname =$_GET['checkname'];
$rest = $checkname [0];


$mail_body =' the body of my email';}


echo '<script type="text/javascript">

tinymce.init({
selector: "textarea",
auto_focus: "elm1",
width: 1100,
height: 2500,
plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste"
  ],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

</script>
<h3>Email To Send</h3>
<form name="mf" id="mf" method="post" action="">
<p><label>Address :</label><input type="text" size="35" name="addy" id="addy" value="'.$e.'"/></p>
<textarea name="content" id="content" value="\''.$clean_mail_body.'\'"></textarea>
<p><a href="#" id="snd" name="snd"><img src="images/submitbutton.jpg" title="Send Email" border="0" height="25" width="75"></img></a><a href="#" id="cnx" name="cnx">  <img src="images/cancelemail.jpg" title="Send Email" border="0" height="25" width="80"></img></a></p>
</form>';
}
}
}

function cnxForm(){
      echo '<a href=""><img src="/images/logo.png"></a><br/><h3>Email Not Sent</h3><script type="text/javascript">setTimeout(\'$("#email").fadeOut("fast")\',2000);</script>';
}

function sndForm(){

      $send_to = $_POST['send_to'];
      $email_body = $_POST['email_body'];

      $headers = 'MIME-Version: 1.0' . "\r\n" .
            'Content-Type: text/html; charset=ISO-8859-1' . "\r\n" .
            'From: Rental<[email protected]>' . "\r\n" .
                       'Reply-To: [email protected]' . "\r\n" .
                       'X-Mailer: PHP/' . phpversion();         
            $subject = 'Rental Agreement';

            mail($send_to, $subject, $email_body, $headers);                

            $checkchange0 ='<a href=""><img src="/images/logo.png"></a><br/><h3>Email Sent</h3><script type="text/javascript">setTimeout(\'$("#email").fadeOut("fast")\',2000);</script>';
            $checkchange1 ="Y$id";
            $checkchange2 ="<img src='images/greencheck.jpg' title='Send Rental Agreement' border='0' height='24' width='24'></img>";
            echo $checkchange0."z".$checkchange1."z".$checkchange2."z";

}


$mode=(!empty($_GET['mode']))?$_GET['mode']:$_POST['mode'];
switch($mode){
case 'snd': sndForm();break;
case 'cnx': cnxForm();break;
default: showForm();break;
}
}
66

Answer

Solution:

Two things first:

  • You obviously have to change your existing code somewhere;
  • Your question is very general, so my answer will be as well.

You have most of the code already, so it's not going to be a big change (I figure, I can't see your code).

How I would do it:

  1. POST the values to a PHP script;
  2. There generate the email (so far you are good);
  3. Then, instead of sending this email (you'll have to change your code there), display it on a page to the user (emails are generally HTML, so that shouldn't be too hard) inside a rich text editor so the user can edit it. Take a pick: http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/.
  4. On that page with the editor, display another button and send the edited email to a PHP script that contains the code for sending the email (which you already had).

On this rich text editor: I looked briefly at TinyMCE. It converts a normal<textarea> to an editor, so you can just put it in a<form action="[yourScript].php" action="POST"> and submit the edited email to the server with a<input type="submit">.

Thanks to Mr. Polywhirl: TinyMCE isn't maintained anymore, CKEditor seems a good alternative. That seems to be false. TinyMCE had a release 4 weeks ago.

EDIT:
I just read your comment on your own question, suggesting you post the form data to your script with an AJAX request. In that case:

  1. Split your PHP code into two scripts: one that generates the email and one that sends it.
  2. Post the data to the mail generator. The generator sends the mail back as response to the AJAX call.
  3. Then, you have the mail client-side, display the RTE to the user (for example using something from this thread)
  4. and issue another AJAX call when the user submits the email, posting the mail to the script that sends mails. (Watch out people don't use it to send spam.)

People are also looking for solutions to the problem: php - Why isn't the Codeigniter email class sending mail with sendmail?

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.