Skip to content

Instantly share code, notes, and snippets.

@mouadziani

mouadziani/Increment-increase-Input.html

Last active May 19, 2019 17:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mouadziani/a83cec4ccccfb3606705b82b9d1d6f85 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mouadziani/a83cec4ccccfb3606705b82b9d1d6f85 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Increment-increase-Input.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Increment-increase-Input</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br><br>
<div class="container">
<div class="input-group increment-increase-input">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary increment" type="button">+</button>
</div>
<input type="number" readonly class="form-control text-center" value="0" placeholder="" aria-label="" aria-describedby="basic-addon1">
<div class="input-group-append">
<button class="btn btn-outline-secondary increase" type="button">-</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
// Events
$('.increment-increase-input .increment').click(function () {
var targetInput = $(this).parent().parent().find('input[type="number"]');
$(targetInput).val(
(isNaN($(targetInput).val()) || $(targetInput).val() == '') ? 1 : parseInt($(targetInput).val()) + 1
);
});
$('.increment-increase-input .increase').click(function () {
var targetInput = $(this).parent().parent().find('input[type="number"]');
$(targetInput).val(
(isNaN($(targetInput).val()) || $(targetInput).val() == '')
? 0
: (parseInt($(targetInput).val()) < 1 ? 0 : parseInt($(targetInput).val()) - 1)
);
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment