Jump to content

Issue adding custom quantity form element

Recommended Posts

Hi, 

I'm having issues with the JS of the below custom quantity selector component not working on one of my site pages. The code works fine on Code Pen but as soon as I put into the relevant page using the Code module, the buttons don't have any affect on the QTY number. Looks like the JS is not speaking to the component. 

Any help would be great!

I put all of the code below in the code module on the specific page I want it to appear on (not the index file).

I've put the CSS in <style> tags and JS in <script> tags but no joy. 

Code below:



<form>
    <fieldset>
        <input type="button" value="-" class="decrease" />
        <input type="text" id="three-max" value="0" disabled />
        <input type="button" value="+" class="increase" />
    </fieldset>
</form>



* {
    margin: 0;
    padding: 0;
    text-align: center;
}
body {
    background-color: #F4F3F3;
    font: normal 14px/100% Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    color: #444;
}
form {
    background-color: #fff;
    width: 300px;
    padding: 10px;
    margin: 20px auto;
    -webkit-box-shadow: 0 0 5px rgba(170, 169, 169, .3);
    box-shadow: 0 0 5px rgba(170, 169, 169, .3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
legend {
    padding-bottom: 14px;
    text-align: left;
}
fieldset {
    margin-bottom: 14px;
    padding-bottom: 14px;
}
fieldset, input[type="button"] {
    border: 0;
}
input[type="button"] {
    background-color: #ED5A48;
    color: #fff;
    cursor: pointer;
    width: 24px;
    height: 24px;
}
input[type="text"] {
    border: 1px solid #F4F3F3;
    height: 22px;
    width: 50px;
}





$(function () {

    set_($('#three-max'), 2);  //return 3 maximum digites

    function set_(_this, max) {
        var block = _this.parent();

        block.find(".increase").click(function () {
            var currentVal = parseInt(_this.val());
            if (currentVal != NaN && (currentVal + 1) <= max) {
                _this.val(currentVal + 1);
            }
        });

        block.find(".decrease").click(function () {
            var currentVal = parseInt(_this.val());
            if (currentVal != NaN && currentVal != 0) {
                _this.val(currentVal - 1);
            }
        });
    }
});

 

Link to comment
  • Replies 2
  • Views 530
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Hi,

Your code missing

  • <style> tag in CSS
  • <script> in JS code
  • jQuery library
  • some CSS conflict with Squarespace code

Use this new code. Add all to Code Block

<form>
    <fieldset>
        <input type="button" value="-" class="decrease" />
        <input type="text" id="three-max" value="0" disabled />
        <input type="button" value="+" class="increase" />
    </fieldset>
</form>


<style>
form * {
    margin: 0;
    padding: 0;
    text-align: center;
}
form {
    background-color: #fff;
    width: 300px;
    padding: 10px;
    margin: 20px auto;
    -webkit-box-shadow: 0 0 5px rgba(170, 169, 169, .3);
    box-shadow: 0 0 5px rgba(170, 169, 169, .3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
legend {
    padding-bottom: 14px;
    text-align: left;
}
fieldset {
    margin-bottom: 14px;
    padding-bottom: 14px;
}
fieldset, input[type="button"] {
    border: 0;
}
input[type="button"] {
    background-color: #ED5A48;
    color: #fff;
    cursor: pointer;
    width: 24px;
    height: 24px;
}
input[type="text"] {
    border: 1px solid #F4F3F3;
    height: 22px;
    width: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {

    set_($('#three-max'), 2);  //return 3 maximum digites

    function set_(_this, max) {
        var block = _this.parent();

        block.find(".increase").click(function () {
            var currentVal = parseInt(_this.val());
            if (currentVal != NaN && (currentVal + 1) <= max) {
                _this.val(currentVal + 1);
            }
        });

        block.find(".decrease").click(function () {
            var currentVal = parseInt(_this.val());
            if (currentVal != NaN && currentVal != 0) {
                _this.val(currentVal - 1);
            }
        });
    }
});
</script>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.