• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 357
  • Last Modified:

How do I clear an iframe form in a chat application?

How do I clear an iframe form in a chat application?
This chatroom is a online help chat, and each person that logs in gets their own room.  The admin sees a list and can enter any open chat (up to 4 chats simultaneously).  For the chat window, I have a main page that has two iframes, the display and the form. The form enters data into two related tables (chatLogs) & (chatRooms).  There is minimal CF code on the form page, because it has goes to the display page to process the form data.  The display has a JS script refreshing it every 5 seconds.  The problem is that every time I send a message, it shows what I just typed in the textarea AFTER I submit the form. So I have to manually delete the text every time I want to type in another message.  

The functionality that I want is that it either clears after I run the insert statement, or clears on load.  Any process that provides the same result is fine.

Though research, I found that the <body onload="document.forms[0].reset()"> function does not work.  The only thing that I have found that did anything is <form name="form1" onsubmit="document.forms[i].reset();">.  Unfortunately, it clears the form before running the insert statement.  Also, if I reload the whole page (by re-entering the URL) it clears properly. Niether of these work:
window.location = "shoutform.cfm?" + frm.chatID.name + "=" + frm.chatID.value + frm.text.name + "=" + frm.text.value;
parent.location = "inc_shoutbox.cfm?"  + frm.chatID.name + "=" + frm.chatID.value;

There is far more current functionality than I have explained.  If you wish to see a sample of code or have a detailed explanation of the process, just let me know.  It completely works, I just have this one tiny bug.

This project has been my first exposure to JS as a intermediate CF programmer.  I have been trying to build it mostly with CF, but I still need JS functionality that CF is incapable of delivering.
0
Arquiel
Asked:
Arquiel
  • 7
  • 6
  • 4
1 Solution
 
azcheCommented:
Hi, i suposse that you have a textarea inside de the form, so, in that case.. you can try to remove the text manually in the onload event:

document.getElementById(textarea_id).innerHTML = '';
0
 
ArquielAuthor Commented:
I tried your suggestion ( I put into the <body onload="">), and nothing happened.  I clicked submit, and it submitted, but I still have text in the textarea.
0
 
azcheCommented:
i mean to use that code in the onload event :

<body onload="document.getElementById([textarea_id]).innerHTML = '';"

remember to change [textarea_id] with the id param of the textarea tag
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ArquielAuthor Commented:
I did it exactly that way, yet to no avail. "text" is the field name.

<body onLoad="document.getElementById(text).innerHTML = '';">

 One thing to mention, is that it may not be reloading the entire page.  The form's action is itself, and after it loads with the FORM vars, I have it transferring to the display page via  
 
The form page processes smiley faces, bold text, and a few other code elements, and turns them into what someone wants to see in the display. (primarily JS)
The display page inserts the message into the tables. (primarily CF)
0
 
azcheCommented:
im sorry.. i dont understand you.. your using ajax?
0
 
ArquielAuthor Commented:
No, for the structure of the web application, I am using ColdFusion with an MySQL back-end. For all the little things you need in a "chat" web application (pop-up windows, automatic refresh, and so forth), I am using Javascript.

On my last post,  the third paragraph got cut up.  To finish it: ...via the ColdFusion <cflocation> tag.

I hope that helps.
0
 
ZvonkoSystems architectCommented:
Check this:
<BODY onload="document.forms.form1.text.value='';"  >

Open in new window

0
 
ZvonkoSystems architectCommented:
You can do it also on ColdFusion side.
Put this after your INSERT cfquery:

<cfset FORM.text = "" >

Open in new window

0
 
ZvonkoSystems architectCommented:
Also avoid ambigous form element names, like: name, value, text, date, number, action, target and so on.
Why not name the userInput simply: userInput
The name "text" is really not the best choice.

0
 
ArquielAuthor Commented:
Its aggravating.  Neither choice worked, although they should have.   I really don't think it is reloading the page after submission.
0
 
ZvonkoSystems architectCommented:
Check this:


<BODY>
<FORM id=form1 name=form1 action=shoutform.cfm?chatID=121 method=post target=top onSubmit="setTimeout('document.form1.text.value=\'\';',100)">
<TEXTAREA class=shoutbox_form id=text name=text rows=3 cols=53></TEXTAREA>
<BR>

Open in new window

0
 
azcheCommented:
use an alert('blabla') on the onlad event to check if the page is reloading... if it does.. check the html rendered (view source) and  search for that textarea, check the correct id (with '') .. additionally i reccomend to use a js debugger .. you have pluggin in firefox to see what is happening ..
0
 
ArquielAuthor Commented:
ZVONKO!!!! It worked!!!!!!  Thank you so much!  The timeout was perfect to delete the var after submission.
0
 
ZvonkoSystems architectCommented:
No need for all that test because in the form tag you can see the target="top" attribute that sends the submit to the iframe with the name "top". Therefore is the form in the iframe named "bottom" not reloaded at submit time.
0
 
ZvonkoSystems architectCommented:
Oh! What time zone are you in to be up so early? :)
0
 
ArquielAuthor Commented:
I see, that makes sense.  I found this little chat application online and built on to it.  Sad to say, it was my first time using frames, and I didn't completely understand how the related to each other in terms of refreshing and other such topics.

Thanks again for the help, I have been building this application for 2 weeks and this was the last bug.

PS: my time zone is EST :)
0
 
ZvonkoSystems architectCommented:
Can you contact me on email address from my member profile?
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 7
  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now