Clearing a textarea on submit

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
evilmonkey
Forum Regular
Posts: 823
Joined: Sun Oct 06, 2002 1:24 pm
Location: Toronto, Canada

Clearing a textarea on submit

Post by evilmonkey »

Hello,

I have a textarea in which a user can input some information, and I have a submit button. The form is submitted into another frame, therefore, the textarea isn't cleared automatically and I need to do that using javascript. I use the onClick property of the submit button to call the following code:

Code: Select all

function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}
Here's the code for my submit button:

Code: Select all

<input type="image" name="submit" value="newshout" onclick="clearText(shout)" src="images/button_overlay.gif" alt="" width="56" height="14" border="0">
The problem is, when submission fails (there's a php check in the recieving script), the textarea clears. When there's no error, the textarea doesn't clear. This really puzzles me because the javascript code has nothing to do with the recieving script, it's in the same file as the textarea and the submit button. Can anyone see a problem? I see one already: I don't know javascript. :P

Thanks. :)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Code: Select all

<textarea id="shout" name="shout"></textarea>
<input type="image" name="submit" value="newshout" onclick="sendAndClear('shout')">
and the function

Code: Select all

function sendAndClear(what)
{
    document.forms[0].submit();
    document.getElementById(what).value = '';
}
EDIT | Something doesn't look right here :?
User avatar
evilmonkey
Forum Regular
Posts: 823
Joined: Sun Oct 06, 2002 1:24 pm
Location: Toronto, Canada

Post by evilmonkey »

Doesn't work, submits but doesn't clear...BTW, it's not form[0] because there are other forms on the page, i just referenced the form by name. document.shoutbox.submit()
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

any element matching "submit" needs to be renamed. form.submit() will call that object instead of the method.
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post by ryanlwh »

Code: Select all

onclick="clearText(document.shoutbox.shout)"
User avatar
evilmonkey
Forum Regular
Posts: 823
Joined: Sun Oct 06, 2002 1:24 pm
Location: Toronto, Canada

Post by evilmonkey »

Feyd, can you please elaborate? I got the feild to clear, but the problem is it clears first, then submits, thereby submitting a blank message. I got the field to clear by writing a new function,

Code: Select all

function ClearText(what) { //I renamed the other function to clearDefaultText, look up and you'll see why
  what.value="";
}
and calling it with

Code: Select all

onclick = "ClearText(shout)"
Now, I'm faced with the other problem. Suggestions welcome. :)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

ya execute the submit, yar, th'n ya do the clear, yar?
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Code: Select all

HTML

<textarea id="someid">

JS

document.getElementById("someid").value = '';
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post by ryanlwh »

evilmonkey wrote:Feyd, can you please elaborate? I got the feild to clear, but the problem is it clears first, then submits, thereby submitting a blank message. I got the field to clear by writing a new function,

Code: Select all

function ClearText(what) { //I renamed the other function to clearDefaultText, look up and you'll see why
  what.value="";
}
and calling it with

Code: Select all

onclick = "ClearText(shout)"
Now, I'm faced with the other problem. Suggestions welcome. :)
oh so onclick has cleared the text before the form has submitted.

have you defined names in the frameset? if so, when the other frame loads

Code: Select all

<body onLoad=" top.nameOfFirstDocument.shout.value='' ">
User avatar
evilmonkey
Forum Regular
Posts: 823
Joined: Sun Oct 06, 2002 1:24 pm
Location: Toronto, Canada

Post by evilmonkey »

ryanlwh wrote:
evilmonkey wrote:oh so onclick has cleared the text before the form has submitted.

have you defined names in the frameset? if so, when the other frame loads

Code: Select all

<body onLoad=" top.nameOfFirstDocument.shout.value='' ">
And if not? :oops: The iframe to which the submit goes has a name, but I don't think the main frame has one.
Last edited by evilmonkey on Thu Sep 15, 2005 4:00 pm, edited 1 time in total.
User avatar
evilmonkey
Forum Regular
Posts: 823
Joined: Sun Oct 06, 2002 1:24 pm
Location: Toronto, Canada

Post by evilmonkey »

feyd wrote:ya execute the submit, yar, th'n ya do the clear, yar?
LOL thanks feyd, I was more wondering on HOW to do it. I understand that that's what I have to do. :lol:
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

this can be an alternative to your problem

Code: Select all

<form name = 'frmNew' action="" method="get">
<textarea name='ta' rows='5' cols='30'>
</textarea>
<input type = 'button' name='sub' value='submit' onclick = 'form.submit(); document.frmNew.ta.value=""' />
</form>
User avatar
evilmonkey
Forum Regular
Posts: 823
Joined: Sun Oct 06, 2002 1:24 pm
Location: Toronto, Canada

Post by evilmonkey »

raghavan20 wrote:this can be an alternative to your problem

Code: Select all

<form name = 'frmNew' action="" method="get">
<textarea name='ta' rows='5' cols='30'>
</textarea>
<input type = 'button' name='sub' value='submit' onclick = 'form.submit(); document.frmNew.ta.value=""' />
</form>
Won't work, my submit isn't a button, it's an image which submits the form, and the <img> tag doesn't have the onclick property...
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post by ryanlwh »

you forgot input type="image"?
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

may be you should try this

Code: Select all

<form name = 'frmNew' action="" method="get"> 
<textarea name='ta' rows='5' cols='30'> 
</textarea> 
<a href ='#' onclick = 'form.submit(); document.frmNew.ta.value=""'><img src='yourimage.gif'/></a>
</form>
Post Reply