I already implemented this with success. My only problem now is to reset also the input fields. For example the user logs in checks out his order. He gets to the billing page, where his data is already predefined within the fields (name, first name, email and so on). I don't need an extra shipping address step, so the billing info = shipping info. When the user now decides to ship to another address he should be able to clear all fields by clicking a clear button

I tried several approaches. Most of them worked as fiddle but when I'm trying to use them with magento, they won't work.

In the billing.phtml I added a button on the bottom via

<button type="button" onclick="clearFields()" title="Clear" id="form_clear">Clear</button>

The javascript function I added to the bottom of the file:

function clearFields() { // several approaches tested, nothing worked

fiddle example 1 fiddle example 2

Is there anybody who has already done this and got this working? I guess this is not very complicated, but I don't see anything anymore.

###### update

I couldn't get either solution to work. jquery is loaded. What I have now is the following in billing.phtml in the script part at the bottom.

var billing = new Billing('co-billing-form', '<?php echo $this->getUrl('checkout/onepage/getAddress') ?>address/', '<?php echo $this->getUrl('checkout/onepage/saveBilling') ?>'); var billingForm = new VarienForm('co-billing-form'); . . . // my code $('suggestform_clear').observe('click', function(){
// alert($('co-billing-form')); // console.log('test'); }.bind(billingForm));

This code works. It's resetting the validation when I click the button. But still no chance to reset the input fields. If don't use default template. Maybe the problem is that I use an extension with my own inputfields, but it shouldn't make a difference because they are built the same way as the default inputfields.

Example: <input type="text" id="billing:aitoc_checkout_968 " class=" required-entry form-control input-text" name="billing[aitoc_checkout_968]" value="test test">

2 Answers 2


Using the default theme's classes and id's the following will reset all the inputs inside the ul that the shipping address section is contained.

$$('#billing-new-address-form ul input, #billing-new-address-form ul input').each(
    function(item) {
  • didn't get it to work, but please see my update on top May 16, 2014 at 15:46
  • @user3432078 sorry I did not see it was billing and not shipping address that you wanted to clear. May 16, 2014 at 15:48
  • Thank you so much man! I got it working. I'm really not good at javascript, most of the time it's trial and error... and within magento it is likely to drive me crazy sometimes. May 16, 2014 at 16:05

Are you loading JQuery? As far as I know the latest versions of CE and Enterprise do not include it by default. They use Prototype. You should be able to use the default JS libs to do the same thing. Try this:

$('button').on('click', function(event){
  • jQuery is loaded but your code did not work for me. At least in the magento environment. In the jsFiddles several approaches did work May 16, 2014 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.