Page HTML not working with new theme

[TwinTraders]

Hi! I have a page on my website with an automatic calculator that allows users to enter values and it tells them the total cost. It currently works fine and looks great - here is the link to it: https://www.twintraders.co.uk/pages/pokemon-bulk-submission

However the issue arises as I've been working on a new theme, and whenever I go to preview mode the calculator page does display correctly and the calculator functions are no longer working. 

The code currently being used for it is as follows, any help would be much appreciated! 🙂 

I've also included a couple screenshots of the working version, along with the faulty version with the new theme.

<div id="tradingform"><form action="(my email)" method="post"><input type="hidden" name="form" value="tt-pokemon"><input value="0" name="total" type="hidden">
<div id="bulk-requirements">
<div class="text_wrap">
<p>&nbsp;</p>
<div class="header">Bulk Requirements</div>
<div class="headerdivide"></div>
<ul>
<li>Bulk submission requests must be worth a minimum total of £15</li>
<li>All cards need to be 95% near mint and English language. We pay 1.5p per common/uncommon, 5p per reverse-holo and 6p per holo</li>
<li>For immediate payment, split by rarity; commons/uncommons, reverses, and holos. Make sure all cards are tightly packed to ensure they remain safe in transit.</li>
<li>Enter your card quantities in the table below to receive a total price for your submission.</li>
<li>Click ‘Submit’ after filling in your details to confirm your submission, and if you’re happy to proceed we will email you back with postage labels once it’s been approved.</li>
<li>If you have any questions regarding any of the processes, or to provide updates/proof of postage once you’ve shipped, feel free to send us a message letting us know directly. We try to process all bulk submissions within a maximum 2-3 days of receiving the cards.</li>
</ul>
</div>
<div class="divide"></div>
<div class="header">Bulk Submission Form</div>
<div class="headerdivide"></div>
<p>Please fill out all of the required fields below as accurately as possible and click submit once finished. We will then process the information provided and get back to you with further details regarding your request as soon as possible.</p>
<br>
<div id="details">
<div class="row">
<div class="col data-in name">
<div class="form_wrap"><label for="input-email" class="title">Name</label>
<div class="headerdivide"></div>
<input aria-describedby="emailHelp" placeholder="Full name" type="text" required="" class="input form-control"></div>
</div>
<div class="col data-in emial">
<div class="form_wrap"><label for="input-email" class="title">Email address</label>
<div class="headerdivide"></div>
<input aria-describedby="emailHelp" placeholder="Enter email" id="email" name="email" type="email" required="" class="input form-control"></div>
</div>
</div>
<div class="row">
<div class="data-in col-md-4 data-in-3 method">
<div class="form_wrap"><label for="input-email" class="title">Payment Method</label>
<div class="headerdivide"></div>
<div class="store-credit custom-control custom-radio custom-control-inline"><input class="custom-control-input" name="payment-method" value="Store Credit" id="customRadio1" type="radio"> <label for="customRadio1" class="custom-control-label">Store Credit</label></div>
<div class="paypal custom-control custom-radio custom-control-inline"><input class="custom-control-input" name="payment-method" value="PayPal" id="customRadio2" type="radio"> <label for="customRadio2" class="custom-control-label">PayPal</label></div>
</div>
</div>
<div class="col-xs-2 col-md-8 col-lg-8 data-in data-in-3 paypal">
<div class="form_wrap"><label for="input-email" class="title">PayPal Email Address</label>
<div class="headerdivide"></div>
<input aria-describedby="emailHelp" placeholder="PayPal email address" id="paypal" name="paypal" type="email" class="input form-control"></div>
</div>
<div class="col-xs-2 col-md-8 col-lg-8 data-in notes">
<div class="form_wrap"><label for="input-email" class="title">Note(s)</label>
<div class="headerdivide"></div>
<input aria-describedby="emailHelp" placeholder="Note" id="notes" name="notes" type="text" class="input form-control"></div>
</div>
</div>
</div>
<div class="table-responsive">
<div class="quantity-warning">
<p>*Disclaimer. Maximum card quantity is 20,000. Please contact us directly for a specialised quote if you have above this amount.</p>
</div>
<div id="table">
<table class="table table-bordered table-hover">
<thead class="thead">
<tr>
<th scope="col data-in" class="col-4 data-in">Card Type</th>
<th scope="col">Price</th>
<th scope="col data-in" class="col-4">Quantity</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr data-breaks="1:0.15" data-type="Commons" class="typeline">
<td scope="row">Trainers</td>
<td>£0.015 /card</td>
<td>
<div class="qty_wrap"><input placeholder="0" max="20000" min="0" type="number" class="qty"></div>
</td>
<td class="subTotal">£0.00</td>
</tr>
<tr data-breaks="1:0.15" data-type="Commons" class="typeline">
<td scope="row">Common/Uncommon</td>
<td>£0.015 /card</td>
<td>
<div class="qty_wrap"><input placeholder="0" max="20000" min="0" type="number" class="qty"></div>
</td>
<td class="subTotal">£0.00</td>
</tr>
<tr data-breaks="1:0.15" data-type="Commons" class="typeline">
<td scope="row">Black Rare</td>
<td>£0.03 /card</td>
<td>
<div class="qty_wrap"><input placeholder="0" max="20000" min="0" type="number" class="qty"></div>
</td>
<td class="subTotal">£0.00</td>
</tr>
<tr data-breaks="1:0.15" data-type="Commons" class="typeline">
<td scope="row">Reverse Holo</td>
<td>£0.05 /card</td>
<td>
<div class="qty_wrap"><input placeholder="0" max="20000" min="0" type="number" class="qty"></div>
</td>
<td class="subTotal">£0.00</td>
</tr>
<tr data-breaks="1:0.15" data-type="Commons" class="typeline">
<td scope="row">Holo</td>
<td>£0.06 /card</td>
<td>
<div class="qty_wrap"><input placeholder="0" max="20000" min="0" type="number" class="qty"></div>
</td>
<td class="subTotal">£0.00</td>
</tr>
<tr data-breaks="1:0.15" data-type="Commons" class="typeline">
<td scope="row">V and above</td>
<td>£0.30 /card</td>
<td>
<div class="qty_wrap"><input placeholder="0" max="20000" min="0" type="number" class="qty"></div>
</td>
<td class="subTotal">£0.00</td>
</tr>
<tr>
<td scope="row">Total</td>
<td colspan="2"></td>
<td class="subtotal last">£0.00</td>
</tr>
</tbody>
</table>
<textarea name="offer"></textarea></div>
</div>
</div>
<div class="divide"></div>
<div id="shipping">
<div class="select">
<div class="form_wrap"><label for="input-email" class="title">Shipping Method</label>
<div class="headerdivide"></div>
<div class="paypal custom-control custom-radio custom-control-inline"><input value="We Arrange Shipping" class="custom-control-input" name="shipping" id="customRadio3" type="radio" selected="selected"> <label for="customRadio3" class="custom-control-label">We Arrange Shipping</label></div>
<div class="store-credit custom-control custom-radio custom-control-inline"><input value="You Arrange Shipping" class="custom-control-input" name="shipping" id="customRadio4" type="radio"> <label for="customRadio4" class="custom-control-label">You Arrange Shipping</label></div>
<div class="store-credit custom-control custom-radio custom-control-inline"></div>
</div>
</div>
<div class="divide-two"></div>
<div class="details">
<div class="text_wrap">
<p>Enter the required details below and we will send you a&nbsp;label to use for shipping.<br><br> Please provide the most accurate package specifications in order to ensure that the correct postage label is provided.<br><br><strong>When sending your bulk please ensure you package securely and include a note with your name and email address details</strong>.</p>
</div>
<div class="row">
<div class="col data-in dimensions">
<div class="form_wrap"><label for="input-dimensions" class="title">Box Dimensions</label>
<div class="headerdivide"></div>
<div class="row">
<div class="col-sm">Length (cm) <input aria-describedby="emailHelp" placeholder="Length (cm)" name="shipping_dimensions_length" type="text" class="input form-control requirable"></div>
<div class="col-sm">Width (cm) <input aria-describedby="emailHelp" placeholder="Width (cm)" name="shipping_dimensions_width" type="text" class="input form-control requirable"></div>
<div class="col-sm">Height (cm) <input aria-describedby="emailHelp" placeholder="Height (cm)" name="shipping_dimensions_height" type="text" class="input form-control requirable"></div>
</div>
</div>
</div>
</div>
<div class="data-in weight">
<div class="form_wrap"><label for="input-weight" class="title">Box Weight (KG)</label>
<div class="headerdivide"></div>
<input aria-describedby="emailHelp" placeholder="Weight in KG" id="shipping_weight" name="shipping_weight" type="text" class="input form-control requirable"></div>
</div>
<div class="row">
<div class="col data-in house">
<div class="form_wrap"><label for="input-house" class="title">House Number / Name</label>
<div class="headerdivide"></div>
<input aria-describedby="emailHelp" placeholder="House Number / Name" id="shipping_house" name="shipping_house" type="text" class="input form-control requirable"></div>
</div>
<div class="col data-in road">
<div class="form_wrap"><label for="input-road" class="title">Road Name</label>
<div class="headerdivide"></div>
<input aria-describedby="emailHelp" placeholder="Road Name" type="text" id="shipping_road" name="shipping_road" class="input form-control requirable"></div>
</div>
</div>
<div class="row">
<div class="col data-in county">
<div class="form_wrap"><label for="input-county" class="title">County</label>
<div class="headerdivide"></div>
<input aria-describedby="emailHelp" placeholder="County" type="text" id="shipping_county" name="shipping_county" class="input form-control"></div>
</div>
<div class="col data-in postcode">
<div class="form_wrap"><label for="input-postcode" class="title">Postcode</label>
<div class="headerdivide"></div>
<input aria-describedby="emailHelp" placeholder="Postcode" type="text" id="shipping_postcode" name="shipping_postcode" class="input form-control requirable"></div>
</div>
</div>
</div>
<div id="self-shipping">
<div class="text_wrap">
<p>Once you have shipped the bulk, please email proof of postage and your full name to ‘[email protected]’ in order to be reimbursed (this helps us to identify the correct parcel). <br><br> Please try to use the most cost-effective shipping method if selecting this option. <br><br> Alternatively, you can select ‘‘We Arrange Shipping’ if you’d rather have us generate a pre-paid postage label for you. <br><br> Our address is as follows; <br><br> 
</div>
</div>
<div class="bttns"><input type="submit" aria-disabled="true" role="button" class="btn btn-primary" value="Submit"> <!-- a aria-disabled="true" role="button" class="btn btn-secondary" href="#">Print</a --></div>
</div>
</form></div>

[BlackCro]

There should be some javascript to go along with the code that handles the functionality. This looks to be controlled by trading-form.js on the functioning version. 

Hope this helps

Simon 

[TwinTraders]

Hi! Thanks for the help! I've found the trading-form.js code on the current theme, what would I have to do to make it function correctly on my new theme? 

Tyler

[BlackCro]

Is the trading-form.js in it's own file within the current theme? If so you will need to create a file for it in the new theme under the Assets folder. 

You can do this by going to Online Store, ..., Edit Code and scrolling down to the Assets folder and clicking +Add new asset. Select Create blank file and select js from the extension drop down. Call the file trading-form

Simon

[TwinTraders]

Hi Simon!

I've added an asset to the new theme called 'trading-form' and added the code from the previous js.trading-form file on the current theme, however nothing seems to be changing. Any ideas why or what I could do? Thanks for the help,

Tyler

[TwinTraders]

Hi! Thanks for replying on my problem, it’s much appreciated. Saw you mentioned to message you about your solution that you came up with? Thanks for the help, apologies for any hassle this causes!
Tyler