Javascript needed for payment forms

We have two donate pages which are build on a 3rd-party system. We do not have control over the html of the form elements but do control the template surrounding it.

We have one page for our direct debit donations (DD)

[login to view URL]

and one for single credit/debit card gifts (CC)

[login to view URL]

These are linked using buttons on the different tabs.

I have developed the pages to their current state using a number of 3rd-party javascript plugins. These have been used to create the tabbed layout, the styling on the dropdown select fields and the concertina dropdown on the direct debit form.

These are linked to here

[login to view URL]

[login to view URL]

[login to view URL]

What I need is for someone to recreate all of the functions which currently exist but without the 3rd party scripts, minimising http calls and resolving any conflicting js.

The postcode lookup button is also provided by a 3rd-party script but this should be kept as is.

I also have a list of further functions which we would like adding to the forms.

1. When form is submitted and there are fields which aren't valid an error message appears. Currently the page reloads at the top of the page with all of the field hidden, I need it to:

a. Scroll to the error message div

b. Display all form fields which have been filled in

2. When the Title field is changed, update Account Holder (DD) or Name on Card (CC), as it does with First Name & Last Name

3. If there is a value selected on DD form, then they decide to do a credit card gift then the value of CC gift is not passed through

4. If a £value is passed through to CC form from DD form (or vice versa), then the Your Details fields need to be both revealed and scrolled down to

5. Strip non-numeric characters from number field on keyup (eg. if user inputs sort code 12-34-56, strip out to be 123456)

6. Format display in sort code and card number fields (i.e. group numbers 00 00 00, 0000 0000 0000 0000)

7. Prevent the Flash Of UnStyled Content on page load [login to view URL]

9. On the thank you page (see example here [login to view URL]), we want to hide the photo and the tabs etc. and just show our thank you message. This means removing all of the content of <div class="body-content"></div> and just retaining the content of <div id="Thanks_-_credit_cardDiv" class="eaFullWidthContent"></div> (which has to be inside the body-content div in our template)

10. Set opacity of submit button to 0.5 and make it unclickable until all mandatory fields are filled in (and on DD form until last question is answered yes)

I have created two duplicates of the form without any of the surrounding template so that you can see the form on its own.

Direct Debit Form - [login to view URL]

Single Gift Form - [login to view URL]

Please feel free to ask if any clarification is needed.

As previously stated, I cannot give access to the html of the form but can edit the html of the template. When developing the solution it would make sense to link to a js file which you can host.

JavaScript jQuery / Prototype

Project ID: #6445970

About the project