Jump to content

Passing variables from javascript to php

Janus13

By Janus13
in PHP Coding Help

 Share

Recommended Posts

Janus13 Member

Janus13

Posted
Posted
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
Link to comment
Share on other sites
mainewoods Newbie

mainewoods

Posted
Posted
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.
Link to comment
Share on other sites
Janus13 Member

Janus13

Posted
  • Author
Posted
[!--quoteo(post=385856:date=Jun 19 2006, 09:00 PM:name=mainewoods)--][div class=\'quotetop\']QUOTE(mainewoods @ Jun 19 2006, 09:00 PM) [snapback]385856[/snapback][/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)

[code]

$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>

[/code]

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:

[code]
$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>
[/code]

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?
Link to comment
Share on other sites
mainewoods Newbie

mainewoods

Posted
Posted
Just noticed the statement:
[code]<? $editor->show(); ?>[/code]
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.
Link to comment
Share on other sites
mainewoods Newbie

mainewoods

Posted
Posted
[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:

[code]$emailbody = $_POST['spaw1'];[/code]
Link to comment
Share on other sites
Janus13 Member

Janus13

Posted
  • Author
Posted
[!--quoteo(post=385881:date=Jun 19 2006, 10:37 PM:name=mainewoods)--][div class=\'quotetop\']QUOTE(mainewoods @ Jun 19 2006, 10:37 PM) [snapback]385881[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Just noticed the statement:
[code]<? $editor->show(); ?>[/code]
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:

[code]
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 );
    }
}
[/code]

The call for it is

[code]
$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>
[/code]
Link to comment
Share on other sites
mainewoods Newbie

mainewoods

Posted
Posted
-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:

[code]$emailbody = $_POST['spaw1'];  //'spaw1' is what you named it in your code[/code]
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.