Welcome to WebmasterWorld Guest from 23.20.147.6

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)

Junior Member

5+ Year Member

joined:Jan 16, 2009
posts: 56
votes: 3


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">
window.focus();
</script>

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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
posts:945
votes: 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 = '';
}
}
}
</script>

Then add this to the form tag:

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

Junior Member

5+ Year Member

joined:Jan 16, 2009
posts: 56
votes: 3


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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
posts:945
votes: 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)

Junior Member

5+ Year Member

joined:Jan 16, 2009
posts: 56
votes: 3


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)

Junior Member

5+ Year Member

joined:Jan 16, 2009
posts: 56
votes: 3


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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
posts:945
votes: 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)

Junior Member

5+ Year Member

joined:Jan 16, 2009
posts: 56
votes: 3


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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
posts:945
votes: 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)

Junior Member

5+ Year Member

joined:Jan 16, 2009
posts: 56
votes: 3


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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
posts:945
votes: 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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members