homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

javascript to clear form after submit
Need to clear input fields after submitted

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

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)

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)

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)

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)

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)

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)

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)

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)

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)

Would you prefer that I post the code here or in sticky mail?


 6:03 pm on Aug 8, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved