Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

javascript to clear form after submit

Need to clear input fields after submitted

10:21 pm on Aug 4, 2013 (gmt 0)

5+ Year Member

I have a shopping website that I have redesigned to include a "mini cart" at the top of the page so the shopper can see the number of items and total in their cart without leaving the web page and redirecting them to the shopping cart each time an item is submitted. The problem is that after they click "Add All Items to My Cart", although the items pass to the mini cart, the values they placed in each of the "quantity ordered" fields does not revert back to a blank field.

After selecting and adding to the mini cart, I want the form to reset to blank without them needing to refresh the browser. I have searched and tried so many scripts, some with no results and some that reset the form, but do not submit first.

Here is some of the code (I hope it's enough of what you need):

<form name='order' method='post' target='miniview' action='https://www.designcart.net/cgi-bin/cart.cgi'>

<input type=text name='here the sku of each item is called from MySql data base and inserted' size='2' value=''>
<input type='hidden' name='here the description of each item is called from MySql data base'>

<input type='hidden' name='ShowMiniView' value='6'><input type='hidden' name='ShowHeader' value='1'><input type='image' name='AddGraphic' border='0' alt='Add All Items to My Cart' title='Add All Items to My Cart' src='https://www.designcart.net/userpages/mycartusername/images/buy.jpg'>

The mini cart is displayed at the top of the page using the following:

<iframe name="miniview" scrolling="no" frameborder="0" width="230" height="20" src="https://www.designcart.net/cgi-bin/cart.cgi?ViewCart=mycartusername;ShowMiniView=6;ShowHeader=1"></iframe></tr><script language="javascript">

What script will post to the mini cart, then reset the input values?

Please let me know if you need more of the code. Thank you to anyone who has suggestions.
10:41 pm on Aug 4, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Before the form, add this:
<script type="text/javascript">
function clearForm() {
var form = arguments[0];
var inputs = form.getElementsByTagName('input');

for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == 'text') {
inputs[i].value = '';

Then add this to the form tag:

<form onsubmit="clearForm(this);"
2:25 am on Aug 5, 2013 (gmt 0)

5+ Year Member

Thank you for the quick reply. However, this did not work. Although the items are added to the mini cart, the form does not clear.
12:47 pm on Aug 5, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

That code does work... Tested across more than one browser.

I'd suggest you perhaps have a javascript error elsewhere on the site that is preventing this script from running.

Load the page in Chrome / Firefox, and press CTRL + SHIFT + J to see errors.
5:36 pm on Aug 5, 2013 (gmt 0)

5+ Year Member

Used Firefox and CTRL + SHIFT + J. Although there were some css errors, which I corrected, I did not see any javascript errors. Could it be I am placing the script in the wrong place on my page? I put it after <body>, but before <?php.
5:58 pm on Aug 6, 2013 (gmt 0)

5+ Year Member

Did a line-by-line inspection of my mini cart and found that there is a javascript window focus(); I believe this is generated by designcart, since it is not part of my iframe. Could this be the script that is interfering with the clear form script?

I hope this information makes a difference.
10:12 pm on Aug 6, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Humm, I shouldn't think so. The content within the script I sent you need only appear before the <form> tag we want to clean out, in the head or body is fine.

The form tag does 100% need that ammendment I made in my first email, copied like for like - double check you copied that over properly.

Another possibility is - do you have nested form tags?
2:26 am on Aug 7, 2013 (gmt 0)

5+ Year Member

I used ctrl+c/ctrl+v to copy/paste your code to make sure I wouldn't make errors.

I do not have nested form tags. The form tag is before the outermost of nested tables and ends after the outermost table is closed. I have been searching the internet and found other scripts that address the iframe issue, stating that the script may need to be in the iframe referring back to the parent. I've had time to try a few with no positive results yet, but am still searching.

Thank you for your continued support.
7:56 pm on Aug 7, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

The script needs to be within the same scope of the form - so not inside the target iframe.

I'm afraid without seeing more of the code there's not much more I can suggest.
9:03 pm on Aug 7, 2013 (gmt 0)

5+ Year Member

Would you prefer that I post the code here or in sticky mail?
6:03 pm on Aug 8, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

If you're posting code, you can post it here. If you're sending a link, sticky mail me and if I can get to the bottom of things I'll post the solution and relevent code here.

Featured Threads

Hot Threads This Week

Hot Threads This Month