Forum:

HTML Pages with CSS and JavaScript

Java Script to clear text box

James Hambrick

Ranch Hand

Posts: 282

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I didnt see a Java Script area but if there is one please move this post into it for me.

I have a simple form

I want to clear out the City Name text box when the user clicks the submit button. Ive seen javascripts that clear out the text box when the user clicks inside the textbox(onFocus) and I tried to make it work but could not. I would also like to have the form set the subject line for me too I used to know how in college, but have not used it awhile and got rid of the book. Help!
[ August 01, 2007: Message edited by: James Hambrick ]

Visit my blog! http://jameshambrick.com

Eric Pascarello

author

Posts: 15385

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

this.value=''

Eric

James Hambrick

Ranch Hand

Posts: 282

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

this.value = "" on the button will clear the text on the button. I have to reference the textbox from the submit button.

Visit my blog! http://jameshambrick.com

Gregg Bolinger

Ranch Hand

Posts: 15304

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Seems kind of like a strange thing to do though. The cityName will post with no value.

James Hambrick

Ranch Hand

Posts: 282

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

After the data is sent I want the text box to be cleared not before.
Maybe I should just redirect them to a different page after clicking submit.
[ August 01, 2007: Message edited by: James Hambrick ]

Visit my blog! http://jameshambrick.com

James Hambrick

Ranch Hand

Posts: 282

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Im searched and not found anything on how to redirect them after clicking the submit button. Any ideas how?

Visit my blog! http://jameshambrick.com

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by James Hambrick:
After the data is sent I want the text box to be cleared not before.
Maybe I should just redirect them to a different page after clicking submit.

What sense would it make to redirect them?

Use an onsubmit handler to clear the field when the form is submitted.
[ August 01, 2007: Message edited by: Bear Bibeault ]

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

James Hambrick

Ranch Hand

Posts: 282

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

when the page reloads, it shows the text still in the texbox I was thinking of sending them to another page that may thank them for their input and assure them that someone is working on their request. I really just want the textbox to be blank after the user clicks submit. how do you use a onsubmit handler?
[ August 01, 2007: Message edited by: James Hambrick ]

Visit my blog! http://jameshambrick.com

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

See my revised reply (which I updated just as you were replying).

[Asking smart questions] [About Bear] [Books by Bear]

James Hambrick

Ranch Hand

Posts: 282

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This is what I have and it does not work

Visit my blog! http://jameshambrick.com

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

"it does not work" is not a particularly useful description of the symptoms.

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Your handler needs to return true to keep the event propagating.

[Asking smart questions] [About Bear] [Books by Bear]

James Hambrick

Ranch Hand

Posts: 282

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

return true???

It does not work means that after I click the submit button and the data is sent the textbox is not clear, it still has the information that was typed into it.

Visit my blog! http://jameshambrick.com

James Hambrick

Ranch Hand

Posts: 282

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

function doClear()
{

document.text_form.city.value = "";
return true;
}

it returns true and still does not clear the textbox after clicking submit, the textbox still has the information that user typed into it.

Visit my blog! http://jameshambrick.com

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

document.text_form.city.value = "";

This doesn't look like what Gregg suggested.

Is the function being called at all?

What debugging tools are you using to help you debug your JavaScript?

[Asking smart questions] [About Bear] [Books by Bear]

James Hambrick

Ranch Hand

Posts: 282

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

didn't know there was a debugging tool for javascript. I did not try what Gregg suggested because I think it said somewhere that if I do that, it will clear the text box before the information is sent. Seems like after submitting the data it the textbox would automatically clear itself after the refresh. Would save alot of trouble.

Visit my blog! http://jameshambrick.com

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by James Hambrick:
didn't know there was a debugging tool for javascript.

There are a number of them. I mostly use FireBug for FireFox.

I did not try what Gregg suggested because I think it said somewhere that if I do that, it will clear the text box before the information is sent.

How you reference the element has no bearing on when it will be cleared. Using document.getElementById() is the surest way to make sure you are referencing the element correctly.

[Asking smart questions] [About Bear] [Books by Bear]

James Hambrick

Ranch Hand

Posts: 282

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

yep it cleared it right before it sent out the email so my email said
cityname = " "

Visit my blog! http://jameshambrick.com

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I take it then that you want it cleared after the submission? Using a mailto as a form submission target is rather a weird deal. Normally a submission causes a page refresh and so there is no native mechanism for an after-submit event.

You could try clearing the field in a timeout handler initiated by the onsubmit event, but I'm a bit uncomfortable with that solution as it could lead to a race condition.

[Asking smart questions] [About Bear] [Books by Bear]

With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.