Jump to content

Add a form field and script in an accordion

Recommended Posts

Hi everyone,

Is it possible to insert a small script and a form field inside an accordion which will be located in the product additional information?

This is the code I'd like to insert in one of the item of the accordion:

<script>
function rolls() {
var totalrolls = Math.ceil(((document.input.input2.value -0) + 53) * (document.input.input1.value -0) / 50000) ;
document.getElementById('txtrolls').innerText=totalrolls;
}
</script>
 
<form name="input">
<p> Height from floor to ceiling (cm): <input type="text" name="input1" value="" onkeyup="rolls()"><br></p>
<p> Total width of all the walls (cm): <input type="text" name="input2" value="" onkeyup="rolls()"><br></p>
<h4>
Number of rolls needed:
<span id="txtrolls" style="font-size:150%”> </span>
</h4>
</form>
 
Link to comment

You probably can't do that easily with SQSP's built in accordion, but there are plenty of plugin accordions that work with a markdown or code block, and hence would be much easier to add that code to. 

This is one of many options:
https://www.will-myers.com/products/p/accordion-dropdown-plugin-for-squarespace

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • 2 weeks later...
On 11/11/2022 at 10:40 PM, Arthur2465 said:

Hi everyone,

Is it possible to insert a small script and a form field inside an accordion which will be located in the product additional information?

This is the code I'd like to insert in one of the item of the accordion:

<script>
function rolls() {
var totalrolls = Math.ceil(((document.input.input2.value -0) + 53) * (document.input.input1.value -0) / 50000) ;
document.getElementById('txtrolls').innerText=totalrolls;
}
</script>
 
<form name="input">
<p> Height from floor to ceiling (cm): <input type="text" name="input1" value="" onkeyup="rolls()"><br></p>
<p> Total width of all the walls (cm): <input type="text" name="input2" value="" onkeyup="rolls()"><br></p>
<h4>
Number of rolls needed:
<span id="txtrolls" style="font-size:150%”> </span>
</h4>
</form>
 

I think you can add form field then we can try code to move it into Accordion? If you share link to a product, we will check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.