What could be the reason for the malfunctioning of my Quantity Spinner script?

The code below controls the Quantity Input and Order button

<div class="clear" id="dvQty">
  <p class="qty-label">Qty:</p>
  <div class="qty-plus" id="divup">+</div>
  <div class="qty-input">
    <input name="vwquantity" value="1" class="qty-input" type="text">
  </div>
  <div class="qty-minus" id="divdown">-</div>
  <div class="add2cart fl"><input value="Add to Cart" class="ys_primary" title="Add to Cart" type="submit"><input name="vwcatalog" value="bodylogic" type="hidden"><input name="vwitem" value="herbal-select-creme-gallon" type="hidden"></div>

</div>

Javascript Functionality:

$("#txtQty").numeric();
$("#divup").click(function() {
  var qty = $("#txtQty").val();
  qty++;
  $("#txtQty").val(qty);
});
$("#divdown").click(function() {
  var qty = $("#txtQty").val();
  if(qty > 1) {
    $("#txtQty").val(qty - 1);
  }
});

Is there something obvious that I'm missing?

javascriptproduct-quantity

Answer №1

Make sure to include the id="txtQty" attribute in your input field, as it is being referenced with $("#txtQty").

<input id="txtQty" name="vwquantity" value="1" class="qty-input" type="text">

Remove the .numeric() function from your script, since it is not a built-in jQuery function. If you don't have jQuery included, add the following line at the end of your HTML body:

<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change the font awesome class when the button is clicked

Here is the code I have in this jsfiddle. I am trying to change the font awesome icon on button click using javascript, but it doesn't seem to be working. I am new to javascript, so please pardon me if this is a silly question. HTML <button id="f ...

javascriptjqueryhtmlfont-awesome

Steps for retrieving user information post authentication query:1. Begin by initiating the query to authenticate the

This is my script.js file var express = require('express'); var router = express.Router(); var expressValidator = require('express-validator'); var passport = require('passport'); const bcrypt = require('bcrypt'); c ...

javascriptnode.jsexpresspassport.js

The jQuery script removal functionality originated from the use of ajax

I have adapted a nested modal script (jQueryModal) to better suit the project's requirements, but I've encountered an unusual issue that I can't seem to resolve. When I invoke the modal to load some content via ajax, and the response from t ...

javascriptjqueryajaxmodal-dialog

Triggering the MouseLeave event in Chart.js with Angular

I encountered a situation with my Angular component code and need some guidance. Below is the code in question: Angular component html <canvas myChart> [dataset] = "dataVariable" [labels] = "labelVariable" (chartHover) = "chartHover($event ...

javascriptangularchart.jsfrontend

The connection between `this` and its calling context

Is all information from its call site accessible to a function? I was under the impression that a function would have access to the scope of its call site, but I could be mistaken. Any feedback and explanation would be greatly appreciated. function bar() ...

javascriptobjectbindingthis

Updating state with new data in React: A step-by-step guide

Recently, I delved into the world of reactjs and embarked on a journey to fetch data from an API: constructor(){ super(); this.state = {data: false} this.nextProps ={}; axios.get('https://jsonplaceholder.typicode.com/posts') ...

javascriptreactjs

Error encountered: JSON data is incomplete at the start of line 1, column 1

My project consists of a database, analysis.php, and index.php web pages. The analysis.php script retrieves data from the database, organizes it in a specific manner, and then displays it using json_encode($array); inside a div element with the id 'da ...

javascriptjqueryjson

Sparse planeBufferGeometry in THREE.js is a specialized type of geometry that

I am currently working with a file that contains sparse elevation data derived from GPS information. I have been utilizing this data to fill a PlaneBuffer array with elevations. var vertices = new Float32Array( (grid.NCOL*grid.NROW) * 4 ); for (var i = 0, ...

javascriptthree.jsgisarcgis-js-api

Ensure the date is displayed in the format of dd-mm-yyyy when using the input type=date

Here is the code I am currently using : <input type="date" class="form-control" id="training_date" name="training_date" placeholder=" select" value="" onfocus="(this.type='date')" onfocusout="(this.type='date')" max=<?php echo ...

javascriptjqueryhtmldate

The Vue emit function within a parent-child component relationship is disrupting the v-model binding

Currently troubleshooting a bug in another person's code and looking to minimize the amount of changes needed. Encountering an issue where v-model binding in components is lost when using the $emit functionality to execute functions between child and ...

javascriptvue.jscomponentsparent-childemit

Is there a way to securely store my JWT Token within my application's state?

userAction.js -> Frontend, Action export const login = (userID, password) => async (dispatch) => { try { dispatch({ type: USER_LOGIN_REQUEST }); const url = "http://localhost:8080/authenticate/"; const ...

javascriptreactjsjwt

The NuxtLink feature in Nuxt3 doesn't automatically refresh the layout CSS when the route changes

The functionality described in the code snippet below is quite straightforward. When a user visits the /blog route, the layout is switched to the blog layout which has a different header style. Similarly, the homepage has its own unique header style. Howev ...

javascriptvue.jsnuxt3.js

What is the best method to clear data in a field following a change in selection in another field?

Currently, I am exploring the functionality of ejTimePicker from the reference site: In my project, I have implemented two select boxes, named textbox1 and textbox2, which store selected times. My goal is to reset the time in textbox2 whenever a different ...

javascriptjquerytimepicker

Error: The parameter "callback" must be in the form of a function

Following a tutorial to upload images to Twitter using Node.js with Twit. Here is the code: function upload_random_image(){ console.log('Opening an image...'); var image_path = path.join(__dirname, '/random_cam/' + random_cam()), ...

javascriptnode.jsexpresstwittercallback

Navigating JSON data in a Kendo JavaScript Template

Currently, I am attempting to create a Kendo template that will iterate through a JSON array retrieved from an AJAX request. The structure of the data object is as follows: [{"Id":5, "CreatedBy":"testuser1"}, {"Id":6,"Archived":false,"CreatedBy":"testuser ...

javascriptjqueryjsonkendo-uikendo-ui-window

Tips on inserting table data into a textarea input using a button

Is there a way to display the text from the table in a textarea box when clicking the "add" button, without removing the data once it's added? I simply want the text "Add this text to textarea" to show up in the textarea box. https://jsfiddle.net/bj ...

javascriptjqueryhtml

The dynamic change of a required field property does not occur

I am facing an issue where one of my fields in the form should be mandatory or not based on a boolean variable. Even if the variable changes, the field always remains required. I'm puzzled about why my expressionProperties templateOptions.required is ...

javascriptangularjsangular-formly

The Angular model fails to update upon completion of animation callback

I have the following HTML code within my ng-controller div: <div id="cards-slider"> <div ng-repeat="card in cards"> <a href="#" title="Title" ng-click="toggleFavorite(card)"> <i class="icon-star" ng-class="card.isF ...

javascriptangularjs

Sending a parameter between files in a React application: a step-by-step guide

I am currently working on a Pokedex website where I have Pokemon cards displaying data from a JSON file. When a user clicks on a card, a modal view appears with more detailed information about that specific card. I need help in ensuring that only the deta ...

javascriptreactjstypescriptreact-tsx

Angular Material 2 with Customized Moment.js Formatting

Is there a way to display the year, month, day, hours, minutes, and seconds in the input field of my material datepicker? I have successfully customized the parse() and format() methods in my own DateAdapter using native JavaScript objects. Howe ...

javascriptangulartypescriptmomentjsangular-material2