Jump to content


Photo

Passing variables from javascript to php


  • Please log in to reply
9 replies to this topic

#1 Janus13

Janus13
  • Members
  • PipPipPip
  • Advanced Member
  • 54 posts

Posted 20 June 2006 - 01:19 AM

I've seen several examples of working WYSIWYG interfaces. I have a twist that I can't figure out how to accomplish. I have a form mail script that takes information from a form then composes an email to send out to a list of email addresses. I'd like to make it a little more functional by adding a wysiwyg interface to the front of it. I know the only way to do it is with Javascript, and I have a working interface, but I can't pass the information contained in the javascript window back to the php form script that is creating the email. How can I pass the content of the javascript window back into my php script?

Thanks for any help

Jon

#2 mainewoods

mainewoods
  • Members
  • PipPipPip
  • Advanced Member
  • 685 posts
  • LocationMaine

Posted 20 June 2006 - 02:00 AM

Add some hidden form fields to your form that correlate to your javascript variables.
Add an onSubmit= event to your form tag that specifies a javascipt function.
In the javascript function do stuff like this: document.formname.fieldname.value = javascriptvariable;
You want to call the function like this: onSubmit="return movefields();"
Do it that way and then do a 'return true;' in the function so that the submittal of the form is carried out after the javascript is executed.


#3 Janus13

Janus13
  • Members
  • PipPipPip
  • Advanced Member
  • 54 posts

Posted 20 June 2006 - 02:58 AM

[!--quoteo(post=385856:date=Jun 19 2006, 09:00 PM:name=mainewoods)--][div class=\'quotetop\']QUOTE(mainewoods @ Jun 19 2006, 09:00 PM) View Post[/div][div class=\'quotemain\'][!--quotec--]
Add some hidden form fields to your form that correlate to your javascript variables.
Add an onSubmit= event to your form tag that specifies a javascipt function.
In the javascript function do stuff like this: document.formname.fieldname.value = javascriptvariable;
You want to call the function like this: onSubmit="return movefields();"
Do it that way and then do a 'return true;' in the function so that the submittal of the form is carried out after the javascript is executed.
[/quote]

Let me see if I can put this into an example and see if you think it'll work.

So I have a mail form that has an email address field, a subject field, and a body field. the body field is the one that will be the wysiwyg editor interface.

The php for that page is: (snippet)


$editor = new SPAW_Wysiwyg('spaw1' /*name*/,isset($HTTP_POST_VARS['spaw1'])?stripslashes($HTTP_POST_VARS['spaw1']):'' /*value*/);
        ?>
        <html>
        <head>
        <link rel="stylesheet" href="../../site.css" type="text/css">
        <script language="javascript1.2" type="text/javascript" src="oodomimagerollover.js"></script>
        <title>Admin Area</title>
        </head>
        <body>
        <div align="center">
        <b>Create the message</b><br>
        <br><br>
        <form name="makemail" method="post" action="mail.php?action=email&who=specific&user=<? echo $user; ?>">
        <table width="95%" border="1">
        <tr>
        <td width="18%">Email Address</td>
        <td width="82%"><input type="hidden" name="email_address" value="<? echo $email_address; ?>"><? echo $email_address; ?></td>
        </td>
        <tr>
        <td width="18%">Subject</td>
        <td width="82%"><input type="text" name="subject" size="40"></td>
        </tr>
        <tr>
        <td width="18%">Message</td>
        <td width="82%"><? $editor->show(); ?></td>
        </tr>
        </table>
        <input type="image" name="Send Mail" src="../images/buttonSendMail.jpg" srcover="../images/buttonSendMailOver.jpg">
        </form>
        <br><br><br>
        </div>
        </body>
        </html>


Currently I'm trying Spaw out to see, but I've tried 3 different interfaces and all have netted the same result. The email gets sent but no body.

So following your directions above then the form should look like so:

$editor = new SPAW_Wysiwyg('spaw1' /*name*/,isset($HTTP_POST_VARS['spaw1'])?stripslashes($HTTP_POST_VARS['spaw1']):'' /*value*/);
        ?>
        <html>
        <head>
        <link rel="stylesheet" href="../../site.css" type="text/css">
        <script language="javascript1.2" type="text/javascript" src="oodomimagerollover.js"></script>
        <title>Admin Area</title>
        </head>
        <body>
        <div align="center">
        <b>Create the message</b><br>
        <br><br>
        <form name="makemail" onSubmit="javascript:return mailBody()" method="post" action="mail.php?action=email&who=specific&user=<? echo $user; ?>">
        <table width="95%" border="1">
        <tr>
        <td width="18%">Email Address</td>
        <td width="82%"><input type="hidden" name="email_address" value="<? echo $email_address; ?>"><? echo $email_address; ?></td>
        </td>
        <tr>
        <td width="18%">Subject</td>
        <td width="82%"><input type="text" name="subject" size="40"></td>
        </tr>
        <tr>
        <td width="18%">Message</td>
        <td width="82%"><? $editor->show(); ?></td>
        </tr>
        </table>
        <input type="image" name="Send Mail" src="../images/buttonSendMail.jpg" srcover="../images/buttonSendMailOver.jpg">
        </form>
        <br><br><br>
        </div>
        </body>
        </html>

Inside whatever javascript I need the above mentioned function to return the body in the end of all the formatting correct? With those settings like that then the changes to the text body should be returned?

#4 mainewoods

mainewoods
  • Members
  • PipPipPip
  • Advanced Member
  • 685 posts
  • LocationMaine

Posted 20 June 2006 - 03:19 AM

So what is SPAW_Wysiwyg()? Is that a php class you are defining? Are you generating javascript code with that php class? Lets see the code for SPAW_Wysiwyg.

#5 mainewoods

mainewoods
  • Members
  • PipPipPip
  • Advanced Member
  • 685 posts
  • LocationMaine

Posted 20 June 2006 - 03:37 AM

Just noticed the statement:
<? $editor->show(); ?>
What does that show in the html that is produced at that place. Does it show a TEXTAREA box that has a name= attached to its tag? It it does then you should just be able to capture it server side by that name when the form is submitted. If that is not the case and it is implemented in only javascript, then you will have to read the documentation for that javascript editor object and find out how to retrieve the current value of the editor area. The rest of what I said would then stay the same.

--If your rich editor sends HTML as the body, then that will not make the email an html email by itself. You will have to set special email headers as well.

#6 mainewoods

mainewoods
  • Members
  • PipPipPip
  • Advanced Member
  • 685 posts
  • LocationMaine

Posted 20 June 2006 - 03:49 AM

[a href=\"http://forums.oscommerce.com/lofiversion/index.php/t138337.html\" target=\"_blank\"]http://forums.oscommerce.com/lofiversion/i...hp/t138337.html[/a]

[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]$control_name - the name of the control. This will be used for the id of the field holding the contents of the control and you will use it to obtain the contents when submitted to the server (i.e. $HTTP_POST_VARS['spaweditor']). The default value is "spaw_editor". Don't forget to set this parameter to different values if using more than one instance of the control on one page.[/quote]

According to your code you should be able to recieve the editor contents by this:

$emailbody = $_POST['spaw1'];


#7 Janus13

Janus13
  • Members
  • PipPipPip
  • Advanced Member
  • 54 posts

Posted 20 June 2006 - 04:07 AM

[!--quoteo(post=385881:date=Jun 19 2006, 10:37 PM:name=mainewoods)--][div class=\'quotetop\']QUOTE(mainewoods @ Jun 19 2006, 10:37 PM) View Post[/div][div class=\'quotemain\'][!--quotec--]
Just noticed the statement:
<? $editor->show(); ?>
What does that show in the html that is produced at that place. Does it show a TEXTAREA box that has a name= attached to its tag? It it does then you should just be able to capture it server side by that name when the form is submitted. If that is not the case and it is implemented in only javascript, then you will have to read the documentation for that javascript editor object and find out how to retrieve the current value of the editor area. The rest of what I said would then stay the same.

--If your rich editor sends HTML as the body, then that will not make the email an html email by itself. You will have to set special email headers as well.
[/quote]
I should eloborate some more. I have several classes in this application, one of which is a HTML based mail class that should be able to take the html formatted input from the wys editor and send it as is, provided I can get it back from the javascript (as previously mentioned). SPAW is one a few wysiwyg editors, and I only use it here as an example, since it's not the end product I intend to use, but it does replace the textarea tag with that show() function with pure javascript (looking at the code - it's pretty lengthy)

The one I intend to use (at the moment is FCKEditor. It's Open Source so I can share the code of the class here:

class FCKeditor
{
    var $InstanceName;
    var $BasePath;
    var $Width;
    var $Height;
    var $ToolbarSet;
    var $Value;
    var $Config;

    function __construct( $instanceName )
     {
        $this->InstanceName    = $instanceName;
        $this->BasePath        = '/FCKeditor/';
        $this->Width        = '100%';
        $this->Height        = '200';
        $this->ToolbarSet    = 'Default';
        $this->Value        = '';

        $this->Config        = array();
    }
    
    // PHP 4 Contructor
    function FCKeditor( $instanceName )
    {
        $this->__construct( $instanceName );
    }

    function Create()
    {
        echo $this->CreateHtml();
    }
    
    function CreateHtml()
    {
        $HtmlValue = htmlspecialchars( $this->Value );

        $Html = '<div>';
        
        if ( $this->IsCompatible() )
        {
            if ( isset( $_GET['fcksource'] ) && $_GET['fcksource'] == "true" )
                $File = 'fckeditor.original.html';
            else
                $File = 'fckeditor.html';

            $Link = "{$this->BasePath}editor/{$File}?InstanceName={$this->InstanceName}";
            
            if ( $this->ToolbarSet != '' )
                $Link .= "&amp;Toolbar={$this->ToolbarSet}";

            // Render the linked hidden field.
            $Html .= "<input type=\"hidden\" id=\"{$this->InstanceName}\" name=\"{$this->InstanceName}\" value=\"{$HtmlValue}\" style=\"display:none\" />";

            // Render the configurations hidden field.
            $Html .= "<input type=\"hidden\" id=\"{$this->InstanceName}___Config\" value=\"" . $this->GetConfigFieldString() . "\" style=\"display:none\" />";

            // Render the editor IFRAME.
            $Html .= "<iframe id=\"{$this->InstanceName}___Frame\" src=\"{$Link}\" width=\"{$this->Width}\" height=\"{$this->Height}\" frameborder=\"0\" scrolling=\"no\"></iframe>";
        }
        else
        {
            if ( strpos( $this->Width, '%' ) === false )
                $WidthCSS = $this->Width . 'px';
            else
                $WidthCSS = $this->Width;

            if ( strpos( $this->Height, '%' ) === false )
                $HeightCSS = $this->Height . 'px';
            else
                $HeightCSS = $this->Height;

            $Html .= "<textarea name=\"{$this->InstanceName}\" rows=\"4\" cols=\"40\" style=\"width: {$WidthCSS}; height: {$HeightCSS}\">{$HtmlValue}</textarea>";
        }

        $Html .= '</div>';
        
        return $Html;
    }

    function IsCompatible()
    {
        global $HTTP_USER_AGENT;

        if ( isset( $HTTP_USER_AGENT ) )
            $sAgent = $HTTP_USER_AGENT;
        else
            $sAgent = $_SERVER['HTTP_USER_AGENT'];

        if ( strpos($sAgent, 'MSIE') !== false && strpos($sAgent, 'mac') === false && strpos($sAgent, 'Opera') === false )
        {
            $iVersion = (float)substr($sAgent, strpos($sAgent, 'MSIE') + 5, 3);
            return ($iVersion >= 5.5);
        }
        else if ( strpos($sAgent, 'Gecko/') !== false )
        {
            $iVersion = (int)substr($sAgent, strpos($sAgent, 'Gecko/') + 6, 8);
            return ($iVersion >= 20030210);
        }
        else
            return false;
    }

    function GetConfigFieldString()
    {
        $sParams = '';
        $bFirst = true;

        foreach ( $this->Config as $sKey => $sValue )
        {
            if ( $bFirst == false )
                $sParams .= '&amp;';
            else
                $bFirst = false;
            
            if ( $sValue === true )
                $sParams .= $this->EncodeConfig( $sKey ) . '=true';
            else if ( $sValue === false )
                $sParams .= $this->EncodeConfig( $sKey ) . '=false';
            else
                $sParams .= $this->EncodeConfig( $sKey ) . '=' . $this->EncodeConfig( $sValue );
        }
        
        return $sParams;
    }

    function EncodeConfig( $valueToEncode )
    {
        $chars = array( 
            '&' => '%26', 
            '=' => '%3D', 
            '"' => '%22' );

        return strtr( $valueToEncode,  $chars );
    }
}

The call for it is

$oFCKeditor = new FCKeditor('FCKeditor1');
$oFCKeditor->BasePath = '/FCKeditor/';
$oFCKeditor->Value = 'Default text in editor';
$oFCKeditor->Create();
$editor = new FCKeditor('FCKeditor1');
$editor->BasePath = '/FCKeditor/';
$editor->Value = 'Enter Body of Email here';
        ?>
        <html>
        <head>
        <link rel="stylesheet" href="../../site.css" type="text/css">
        <script language="javascript1.2" type="text/javascript" src="oodomimagerollover.js"></script>
        <title>Admin Area</title>
        </head>
        <body>
        <div align="center">
        <b>Create the message</b><br>
        <br><br>
        <form name="makemail" method="post" action="mail.php?action=email&who=specific&user=<? echo $user; ?>">
        <table width="95%" border="1">
        <tr>
        <td width="18%">Email Address</td>
        <td width="82%"><input type="hidden" name="email_address" value="<? echo $email_address; ?>"><? echo $email_address; ?></td>
        </td>
        <tr>
        <td width="18%">Subject</td>
        <td width="82%"><input type="text" name="subject" size="40"></td>
        </tr>
        <tr>
        <td width="18%">Message</td>
        <td width="82%"><? $editor->Create(); ?></td>
        </tr>
        </table>
        <input type="image" name="Send Mail" src="../images/buttonSendMail.jpg" srcover="../images/buttonSendMailOver.jpg">
        </form>
        <br><br><br>
        </div>
        </body>
        </html>


#8 Janus13

Janus13
  • Members
  • PipPipPip
  • Advanced Member
  • 54 posts

Posted 21 June 2006 - 01:12 AM

It was late last night so I'll kick this back up. I'd like to know your thoughts on how the above will work together.

#9 mainewoods

mainewoods
  • Members
  • PipPipPip
  • Advanced Member
  • 685 posts
  • LocationMaine

Posted 21 June 2006 - 02:11 AM

-forget what I said about javascript, you don't need it. Refer to my post #6 above. That has a link to a tutorial on your editor(spaw).

According to your code and the editor doc you should not need javascript and should be able to recieve the editor contents by just doing this:

$emailbody = $_POST['spaw1'];  //'spaw1' is what you named it in your code


#10 Janus13

Janus13
  • Members
  • PipPipPip
  • Advanced Member
  • 54 posts

Posted 21 June 2006 - 04:00 AM

Skipped over that all together :) I'll give that a try tomorrow and let ya know if it works. Thanks for the help.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users