Darren E
April 4th, 2007, 10:57 AM
I needed a way to encode data from an HTML form that saves to a text file. The text data was needed so I could recall the text file in Flash 8 using dynamic text fields. I was using a simple PHP script to convert form data to a text file but upon submitting the data, I started to notice extra characters (mainly the backslash \ ) following any ' or " characters and the & symbol is read by flash as a separator. After many hours of searching and finding no help, I referred to my friend, Frank out of California. This is his JavaScript that helped me out so I thought I should share this with others.
This may help some of you looking to encode your form data to a text file- it's SIMPLE and may or may not work for your specific application so take what you read with a grain of salt!
This SPECIFIC tutorial is good for someone who wants to update a dynamic text field in Flash by using an HTML form. In my case, I created a flash website where my client can log in to an administration page and update portions of the website by filling out simple form data and pressing submit. It may be crude- but at least IT WORKS.
Step 1. Create a simple form that contains a textField and a submit button. This tutorial goes with the assumption that you already know how to do this. For the tutorial purpose, leave the textField name as " textField " otherwise, the code will not work.
Step 2. Go to your documents "code view" if you use a program such as Dreamweaver. Add this JavaScript just before the </head> tag.
<script type="text/JavaScript">
function encodeValue(formId)
{
var x=document.getElementById(formId)
x.value = escape(x.value);
return true;
}
</script>Step 3. Find the section where your form tag begins. It is usually started with <form id=" followed with some other data. For tutorial purposes, I will use the generic names to represent each field. At the end of this tag, just before the " > " you will need to add a small command-
onsubmit="encodeValue('textField')" <--Pay attention to textField since the names MUST match in order for this to work.
Step 4. Create the action that your submit button will call when pressed. We will create an action that calls a PHP file saved on your server which we will create after this step. The action will be called " text.php "
The code below assumes text.php is saved in your /public_html/ or /root/ directory.
One way is by selecting the form in Dreamweaver and entering the value in the Action field under Properties. The other, is to look at the code which should look like this-
<form id="form1" method="post" action="../text.php" name="form1" onsubmit="encodeValue('textField')" >Go ahead and check the code. Then, name and save your html file and upload it to your server.
Step 5. Create a simple PHP script that will process your form data to a text file. My method was using Dreamweaver and creating a new dynamic document and going straight to code view. Below is the code you will paste:
<?php
if($_POST)
{
$fp = fopen('text.txt','w+');
fwrite($fp,'textField='.$_POST['textField'],strlen('textField= '.$_POST['textField']));
fclose($fp);
}
?>
<script LANGUAGE="JavaScript">
<!--
function redirect()
{
window.location = "http://yourwebsitethathasyourflashdocument.com/"
}
setTimeout("redirect();", 500)
//-->
</script>Notice in the code- the name " textField " it matches the name of your HTML textField- for this to work, this naming convention must match (unless someone knows something I don't).
The PHP code opens a file named text.txt and writes the encoded data from your textField. Any data from your form will overwrite the existing data and replace it. To change this (if say for instance you want to create a weekly news and events page) you can refer to here (http://www.php.net/fopen) to learn more about fOpen commands.
The JavaScript below that is just a simple delay and redirect script- change the web address to where your Dynamic Flash content (or other application that will utilize your .txt file) is going to appear. This will instantly show your changes after you press submit on your form.
Save this file as text.php and upload it to your server.
Step 6. Create a dynamic text field in your Flash document. Make sure the text type is changed from Single Line to Multiline and next to Var: give it the name " textField "
If you do not know how to do this, there are MANY tutorials on how to create a dynamic text field.
Step 7. Placing the ActionScript to make your dynamic text read from the text.txt file.
On the same timeline that your dynamic text field is on- create a new layer, lock it, and name that layer "actions." Open your actions panel and add this code-
stop();
loadVariables("../text.txt", this);This is BARE BASIC coding with ActionScript but it works.
Save your file, and upload your Flash .swf file to your server.
Step 8. You may want to create a blank .txt file on your server and name it text.txt the reason for this is so you can set the CHMOD or in other words, set the file permissions of this file. How to change this depends ENTIRELY on your server. Usually you need to set the permissions to something like 755 so the PHP file can access it and change it. Unfortunately, the scope of this topic is so broad- you will have to refer to your server's help files or FAQ- here is an example (http://helpcenter.ipower.com/cgi-bin/ipower.cfg/php/enduser/std_adp.php?p_faqid=1398&p_created=1087861400&p_sid=LdchVfyi&p_accessibility=0&p_redirect=&p_lva=&p_sp=cF9zcmNoPTEmcF9zb3J0X2J5PSZwX2dyaWRzb3J0PSZwX 3Jvd19jbnQ9OTkmcF9wcm9kcz0mcF9jYXRzPTAmcF9wdj0mcF9 jdj0mcF9wYWdlPTEmcF9zZWFyY2hfdGV4dD1maWxlIHBlcm1pc 3Npb25z&p_li=&p_topview=1) since it may be different from server to server.
Step 9. Make sure all the files now reside on your server. Go ahead and go to your web page that has the form, fill it out and press "submit."
The submit button calls upon your PHP script- the JavaScript from the form processes the text so Flash can read all the special symbols from the text file. Otherwise the & symbol will be read as a separator. The redirect JavaScript then brings you to your flash site where you can review the change to your dynamic text.
IF YOU DO NOT SEE THE CHANGE- Simply refresh your browser before starting the troubleshooting process.
Step 10. Let me know if you got any use from this tutorial- I would hate to think I spent all this time for nothing. Also, feel free to add to this tutorial because I am by NO MEANS an expert in coding.
This may help some of you looking to encode your form data to a text file- it's SIMPLE and may or may not work for your specific application so take what you read with a grain of salt!
This SPECIFIC tutorial is good for someone who wants to update a dynamic text field in Flash by using an HTML form. In my case, I created a flash website where my client can log in to an administration page and update portions of the website by filling out simple form data and pressing submit. It may be crude- but at least IT WORKS.
Step 1. Create a simple form that contains a textField and a submit button. This tutorial goes with the assumption that you already know how to do this. For the tutorial purpose, leave the textField name as " textField " otherwise, the code will not work.
Step 2. Go to your documents "code view" if you use a program such as Dreamweaver. Add this JavaScript just before the </head> tag.
<script type="text/JavaScript">
function encodeValue(formId)
{
var x=document.getElementById(formId)
x.value = escape(x.value);
return true;
}
</script>Step 3. Find the section where your form tag begins. It is usually started with <form id=" followed with some other data. For tutorial purposes, I will use the generic names to represent each field. At the end of this tag, just before the " > " you will need to add a small command-
onsubmit="encodeValue('textField')" <--Pay attention to textField since the names MUST match in order for this to work.
Step 4. Create the action that your submit button will call when pressed. We will create an action that calls a PHP file saved on your server which we will create after this step. The action will be called " text.php "
The code below assumes text.php is saved in your /public_html/ or /root/ directory.
One way is by selecting the form in Dreamweaver and entering the value in the Action field under Properties. The other, is to look at the code which should look like this-
<form id="form1" method="post" action="../text.php" name="form1" onsubmit="encodeValue('textField')" >Go ahead and check the code. Then, name and save your html file and upload it to your server.
Step 5. Create a simple PHP script that will process your form data to a text file. My method was using Dreamweaver and creating a new dynamic document and going straight to code view. Below is the code you will paste:
<?php
if($_POST)
{
$fp = fopen('text.txt','w+');
fwrite($fp,'textField='.$_POST['textField'],strlen('textField= '.$_POST['textField']));
fclose($fp);
}
?>
<script LANGUAGE="JavaScript">
<!--
function redirect()
{
window.location = "http://yourwebsitethathasyourflashdocument.com/"
}
setTimeout("redirect();", 500)
//-->
</script>Notice in the code- the name " textField " it matches the name of your HTML textField- for this to work, this naming convention must match (unless someone knows something I don't).
The PHP code opens a file named text.txt and writes the encoded data from your textField. Any data from your form will overwrite the existing data and replace it. To change this (if say for instance you want to create a weekly news and events page) you can refer to here (http://www.php.net/fopen) to learn more about fOpen commands.
The JavaScript below that is just a simple delay and redirect script- change the web address to where your Dynamic Flash content (or other application that will utilize your .txt file) is going to appear. This will instantly show your changes after you press submit on your form.
Save this file as text.php and upload it to your server.
Step 6. Create a dynamic text field in your Flash document. Make sure the text type is changed from Single Line to Multiline and next to Var: give it the name " textField "
If you do not know how to do this, there are MANY tutorials on how to create a dynamic text field.
Step 7. Placing the ActionScript to make your dynamic text read from the text.txt file.
On the same timeline that your dynamic text field is on- create a new layer, lock it, and name that layer "actions." Open your actions panel and add this code-
stop();
loadVariables("../text.txt", this);This is BARE BASIC coding with ActionScript but it works.
Save your file, and upload your Flash .swf file to your server.
Step 8. You may want to create a blank .txt file on your server and name it text.txt the reason for this is so you can set the CHMOD or in other words, set the file permissions of this file. How to change this depends ENTIRELY on your server. Usually you need to set the permissions to something like 755 so the PHP file can access it and change it. Unfortunately, the scope of this topic is so broad- you will have to refer to your server's help files or FAQ- here is an example (http://helpcenter.ipower.com/cgi-bin/ipower.cfg/php/enduser/std_adp.php?p_faqid=1398&p_created=1087861400&p_sid=LdchVfyi&p_accessibility=0&p_redirect=&p_lva=&p_sp=cF9zcmNoPTEmcF9zb3J0X2J5PSZwX2dyaWRzb3J0PSZwX 3Jvd19jbnQ9OTkmcF9wcm9kcz0mcF9jYXRzPTAmcF9wdj0mcF9 jdj0mcF9wYWdlPTEmcF9zZWFyY2hfdGV4dD1maWxlIHBlcm1pc 3Npb25z&p_li=&p_topview=1) since it may be different from server to server.
Step 9. Make sure all the files now reside on your server. Go ahead and go to your web page that has the form, fill it out and press "submit."
The submit button calls upon your PHP script- the JavaScript from the form processes the text so Flash can read all the special symbols from the text file. Otherwise the & symbol will be read as a separator. The redirect JavaScript then brings you to your flash site where you can review the change to your dynamic text.
IF YOU DO NOT SEE THE CHANGE- Simply refresh your browser before starting the troubleshooting process.
Step 10. Let me know if you got any use from this tutorial- I would hate to think I spent all this time for nothing. Also, feel free to add to this tutorial because I am by NO MEANS an expert in coding.