HTML - posting from a form to a text file

In summary: LoadCommentData(cp.files[0]);} </script> <div id="CommFrame"></div> <iframe src="file://localhost/comments.txt" frameborder="0"></iframe> </body> </html>In summary, you can't post new messages to the top of the comments file on your website, but you can use Javascript to modify the order of the comments.
  • #1
jjiimmyy101
74
0
HTML -- posting from a form to a text file

Hey all!

I have an angelfire website and on one of my pages I have a "comments page". It simply asks for a user's name and any comments he/she may have. These two pieces of information are then submitted to a text file.

My problem is that a new message (i.e. most recent message) is always added to the bottom of the text file, but I would like new messages to be posted to the top of the text file. (the messages are separated by three asterisks above and below the message)

Is there anyway to accomplish this, keeping in mind that angelfire will not allow me to add any of my own cgi, php, asp, etc.

Is there a way to read the file from the bottom to the top and post it to another text file?

Any suggestions would be appreciated.

Jimmy
 
Technology news on Phys.org
  • #2
When a message is submited it's probably POSTed to a server-side script and added to a database. For viewing the messages another script pulls the saved content from the database and writes it out to the page.

So the order that the messages appear in is defined in either the server-side or database layer both of which you probably don't have access to.

You should make sure there aren't some configuration settings (i.e. an AngelFire control panel, etc) that will allow you to set the ordering.

If you can write Javascript onto any of your AngelFire pages then you have some further options.
 
  • #3
Thanks for the input.

I cannot set the ordering of the messages, but I can use Javascript. I have some knowledge of programming, but by no means is it extensive. I would appreciate any pointers you could give me that would get me going in the right direction.

Jimmy
 
  • #4
Do you have a link you can post? You can use Javascript to modify the HTML document, but the specifics are dependent on the html structure of the page.
 
  • #5
I've attached what the comments page looks like and what the actual comments text file looks like. Is this what you need to see?
 

Attachments

  • form.txt
    456 bytes · Views: 239
  • comments.txt
    332 bytes · Views: 447
Last edited:
  • #6
I need to look at the HTML in the comments page.
 
  • #7
I don't quite understand.

The form.txt file is all the coding that appears on the comments page (it's a very simple and basic web page. I just didn't copy the <HTML> and </HTML> tags). When the person clicks on submit, the message is then added to the comments.txt file. That's it.

I don't have access to the cgi script called "form_handler_file" though.
 
  • #8
Ok, so the comments "page" does not contain any html? It's just plain text?
 
  • #9
Yes, just plain text
 
  • #10
Ok, then you can create a separate HTML page, for viewing comments that loads the comments from comments.txt using Ajax and displays them. This way you'll have full control over how and where the comments are displayed.

I'll try to post some sample javascript.
 
  • #11
That's super news :smile:
 
  • #12
The following HTML/Javascript uses Ajax to load the data from the comments.txt that you posted parses the comments (to extract date, ip, author, text), reverses the order of the comments (so that latest show on top) and then prints them onto the page. You can customize the look for example, or place this in another html page.

I have a link to a sample page here if you want to see this in action:
http://pi.bloo.us:800/temp/help/

Code: 
<html>
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .comTitle{
            font-family: Arial;
            background-color: #CCCCCC;
        }
        .comText{
            font-family: Arial;
        }
    </style>
</head>
<body>
    <h1>Comments:</h1>
    <div id="CommPanel"></div>
    <script type="text/javascript">
        cp = document.getElementById('CommPanel');
        cf = window.frames['CommFrame'];
        function LoadCommentData(file){
            var xmlhttp=false;
            /*@cc_on @*/
            /*@if (@_jscript_version >= 5)
            try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {
            try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (E) {xmlhttp = false;}}
            @end @*/
            if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
            try {xmlhttp = new XMLHttpRequest();} catch (e) {xmlhttp=false;}}
            if (!xmlhttp && window.createRequest) {try {xmlhttp = window.createRequest();} catch (e) {xmlhttp=false;}}
            if(xmlhttp){
                xmlhttp.open("GET", file,true);
                xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState==4)PutComments(ParseComments(xmlhttp.responseText));}
                xmlhttp.send(null);
            }
        }
        function ParseComments(str){
            temp = str.split('\n***');
            comArray = [];
            for(t in temp){
                ts = temp[t];
                date = '';
                ip = '';
                author = '';
                text = '';
                try{
                    date = ts.substring(t!=0, ts.indexOf('Submitting Host: ')-1);
                    ip = ts.substring(ts.indexOf('Submitting Host: ') + 17, ts.indexOf('\nCOMMENTS:\t'));
                    author = ts.substring(ts.indexOf('WRITTEN_BY:\t') + 12);
                    text = ts.substring(ts.indexOf('COMMENTS:\t') + 9, ts.indexOf('WRITTEN_BY:\t'));
                }catch(x){}
                if(text)comArray.push({Date:date, IP:ip, Author:author, Text: text});
            }
            return comArray
        }
        function PutComments(comArray){
            comArray.reverse();
            for(c in comArray){
                cmt = comArray[c];
                cp.innerHTML += '<span class="comTitle">' + cmt.Author + ' (' + cmt.IP + ') on ' + cmt.Date + ' said:</span><br />';
                cp.innerHTML += '<span class="comText">' + cmt.Text + '</span><br /><br />';
            }
        }
        LoadCommentData("comments.txt");
    </script>
</body>
</html>
 
Last edited by a moderator:
  • #13
Thank you so much for all your help and time. It works great.

Jimmy
 
  • #14
Two more quick questions...how would I...

(1) only bold the user's name, while leaving the date and ip address as is?

(2) put line breaks after the name, ip address and date so that they appear on top of each other instead of next to each other in a row?
 
  • #15
That's easily accomplished. You only need to look at the following function:
Code: 
function PutComments(comArray){
            comArray.reverse();
            for(c in comArray){
                cmt = comArray[c];
                cp.innerHTML += '<span class="comTitle">' + cmt.Author + ' (' + cmt.IP + ') on ' + cmt.Date + ' said:</span><br />';
                cp.innerHTML += '<span class="comText">' + cmt.Text + '</span><br /><br />';
            }
        }

Here cmt is a comment object with four properties:
cmt.Author
cmt.IP
cmt.Date
cmt.Text

The PutComments function generates the html for the comments section by looping through each comment object. So you can add <b> </b> for bold and <br /> for a line break:

Code: 
        function PutComments(comArray){
            comArray.reverse();
            for(c in comArray){
                cmt = comArray[c];
                cp.innerHTML += '<span class="comTitle"><b>' + cmt.Author + '</b></span>';
                cp.innerHTML += '<span class="comText"><br />' + cmt.IP + '<br />on ' + cmt.Date + '<br /><br />' + cmt.Text + '</span><br /><br />';
            }
        }
 
  • #16
Thanks again. That works great.

Just out of curiosity though, in post #8 you asked if the comments page had any html on it and because it doesn't, this method you showed me would work. What would happen if there was html in the comments page? Would this code still work? I'm assuming the code could be modified to make it work or am I wrong?
 
  • #17
If the comments were HTML then you could add javascript that would modify the way the comments are displayed, and you wouldn't need to use Ajax to load them separately.

If you can add javascript to an html page then you have 100% control over what the page looks like.
 
  • #18
thanks for all the help!
 

FAQ: HTML - posting from a form to a text file

Can I post data from an HTML form to a text file?

Yes, it is possible to post data from an HTML form to a text file. This can be done using server-side scripting languages such as PHP, ASP, or CGI.

How do I create a form in HTML?

To create a form in HTML, you need to use the <form> tag and include various form elements such as text fields, checkboxes, and radio buttons within it. You can also add labels and submit buttons to your form.

How do I specify the action and method for a form?

The <form> tag has two attributes, action and method, which allow you to specify the URL of the file that will process the form data and the HTTP method to be used (e.g. GET or POST).

Can I post data to a specific location in a text file?

Yes, you can use server-side scripting to process the form data and write it to a specific location in a text file. This can be useful for organizing and storing the data in a structured manner.

Is it possible to validate form data before posting it to a text file?

Yes, you can use HTML attributes such as required and pattern to validate user input before it is submitted. You can also use server-side scripting to perform more complex form validation and handle any errors before writing the data to a text file.

Similar threads

Python Does anyone know about python flask and wtf forms?....
Replies
2
Views
1K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
Replies
5
Views
485
HTML/CSS HTML - counting the number of responses from a text file
Replies
2
Views
2K
HTML/CSS Are HTML and CSS files necessary in the HTDOCS folder for PHP to work in XAMPP?
Replies
3
Views
2K
HTML/CSS HTML and PHP issue: display HTML form variables using PHP echo
Replies
6
Views
6K
HTML/CSS Html5 <canvas> element related apps not working
Replies
3
Views
2K
Should users confirm their account deletion before it is processed?
Replies
24
Views
2K
Why do emails from my contact form bounce?
Replies
10
Views
1K
Storing program source as relations in a database instead of text file
2
Replies
65
Views
3K
HTML/CSS Can a Fortran 95 Program Run Online Using a HTML Form?
Replies
1
Views
2K

Hot Threads

Recent Insights

Back
Top