reset form fields in billing form - onepage checkout

Question

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(){
billingForm.validator.reset();
// 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">

Answer 1

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) {
        item.clear();
    }
);

Answer 2

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){
   $('form_id').reset();
});