(function ($) {
$.fn.fCycle = function () {
var x;
for (x in arguments) {
$(arguments[x]).close();
}
$(this).collapse("show");
};
$(".btn-next").on('click', function() {
var form = [$("#name"), $("#surname"), $("#student_number"), $("#cellphone"), $("#email"), $("#course"), $("#year")],
i = 0,
a = "#" + $(this).attr("data-to"),
b = "#" + $(this).attr("data-from");
if ($(this).hasClass("to_course")) {
for (i; i < 5; i++) {
console.log(form[i].val());
if (form[i].val() === undefined) {
form[i].addClass("has-danger")
$(a).fCycle(b);
} else if (form[i].hasClass("has-danger") && form[i].length > 0) {
form[i].removeClass("has-danger")
}
}
$(a).fCycle(b);
}
});
}(jquery));
$(".btn-next").on('click', function () {
var form = [$("#name")],
i = 0,
a = "#" + $(this).attr("data-to"),
b = "#" + $(this).attr("data-from");
if ($(this).hasClass("to_course")) {
for (i; i < form.length; i++) {
if (form[i].val() === undefined) {
form[i].addClass("has-danger")
$(a).fCycle(b);
}
else if (form[i].hasClass("has-danger") && form[i].length > 0) {
form[i].removeClass("has-danger");
}
}
$(a).fCycle(b);
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" id="apply">
<div id="personal" class="collapse in">
<fieldset class="col-xs-10 col-xs-offset-1 form-group">
<div class="row">
<label for="names">Name(s)</label>
<input class="form-control" type="text" name="names" id="names" placeholder="Enter your full name here">
</div>
<hr>
<div class="row">
<nav>
<ul class="pager">
<li>
<button class="btn btn-danger btn-cancel" type="button">cancel</button>
</li>
<li class="pager-next">
<button class="btn btn-next btn-success to_course" type="button" data-to="course" data-from="personal">next</button>
</li>
</ul>
</nav>
</div>
</fieldset>
</div>
<div id="course" class="collapse">
<p>course</p>
</div>
</form>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The above snippet doesn't seem to work at all - in the case of the Original (http://alpha.msauwc.co.za -> if you click on the Join the MSA button,
You'll find that the form does work. The issue is that the next button should not be working when the input fields have not been filled.
This has to be prevented using jquery.
Try defining your array with just selector strings, and then wrapping your form[i] objects like:
$(form[i]).val(), $(form[i]).addClass('has-danger'), etc
You can use these methods to disable & activate the button:
$(".btn-next").addClass('disabled') // when you want to disable it
$(".btn-next").removeClass('disabled') // when you want to activate it
Related
I want the user to be able to edit dynamically created list items that are input into a ul by the user.
I have no problem changing other items but the fact that the li items don't exist until input by the user is stumping me. I don't have any id's or classes to select to add a dblclick event to and selecting the child elements of all ul doesn't seem to work.
In short I just want to either:
click an icon on each list item that will allow me to edit the text
or
just double click the text which will allow me to edit it. (dblclick because the items are already draggable.)
I've tried a number of things but I'm not sure where to start now.
Thanks!
<div id="listWrapper" class="row">
<div id="dayInfo" class="container col-8">
<div class="card">
<img id="mondayImg" class="card-img-top">
<div class="card-body">
<h3 id="title" class="card-title">My Coding To-Do List</h3>
<div id="subTitle" class="row">
<div class="col">
<h5>Still to do</h5>
<button id="allFinished" class="btn btn-success">Move all to finished</button>
<hr>
<ul class="toBeSaved edit" id="stillToDo">
</ul>
<!-- <i class="fas fa-edit"></i> -->
</div>
<div class="col">
<h5>In Progress</h5>
<button id="allFinished2" class="btn btn-success">Move all to finished</button>
<hr>
<ul class="toBeSaved edit" id="inProgress">
</ul>
</div>
<div class="col">
<h5>Finished</h5>
<button id="removeFinished" class="btn btn-danger">Remove finished</button>
<hr>
<ul class="toBeSaved edit" id="finished">
</ul>
</div>
</div>
<div id="newItemWrapper">
<input id="newItem" placeholder="Add a new item">
<br>
<h6 id="newItemBtn" class="btn btn-primary">Add new item</h6>
<br>
<h6 id="save" class="btn btn-success">Save</h6>
<h6 id="clear" class="btn btn-warning">Clear</h6>
<p class="card-text"><small id="lastUpdated" class="text-muted toBeSaved">Last updated </small></p>
</div>
</div>
</div>
</div>
</div>
$(function() {
$("#newItem").focus();
//Adding a new items when click or enter pressed//
function addNewItem() {
let newInput = $("#newItem").val();
$("#stillToDo").append("<li>" + newInput + "</li>");
$("#newItem").val("");
$("#lastUpdated").text("Last updated " + Date());
};
$("#newItemBtn").click(addNewItem);
$("#newItem").keypress(function(e) {
if (event.which == 13) {
addNewItem();
}
});
//Moving list itmes and removing list items//
$("#allFinished").click(function() {
$("#finished").append($("#stillToDo li"))
});
$("#allFinished2").click(function() {
$("#finished").append($("#inProgress li"))
});
$("#removeFinished").click(function() {
$("#finished li").remove();
});
//So you can drag items across to another list
$("#stillToDo").sortable({
connectWith: "#finished, #inProgress"
});
$("#inProgress").sortable({
connectWith: "#finished, #stillToDo"
})
$("#finished").sortable({
connectWith: "#stillToDo, #inProgress"
});
//THIS IS SAVING LIST INFO and LAST UPDATED IN THE HTML 5 LOCAL STORAGE//
$(document).ready(function() {
$("#save").click(function(e) { //Clicking the "save button"//
e.preventDefault();
var everything = [];
$(".toBeSaved").each(function() {
everything.push(this.innerHTML);
})
localStorage.setItem('list', JSON.stringify(everything));
});
//RETREIVEING LISTS AND "UPDATED ON" FROM LOCAL STORAGE//
function loadEverything() {
if (localStorage.getItem('list')) {
var everything = JSON.parse(localStorage.getItem('list'));
$(".toBeSaved").each(function(i) {
this.innerHTML = everything[i];
})
}
}
loadEverything(); //<--This is calling the above function, without this nothing happens//
$("#clear").click(function(e) {
e.preventDefault();
localStorage.clear();
location.reload();
});
});
});
One simple way to edit text is to replace the text with an input element with it's value set to the text as follows:
//Edit added li elements
$(document).on('dblclick', 'ul.toBeSaved.edit li', function() {
let inEdit = $('<input/>');
let toEdit = $(this);
toEdit.html( inEdit.val( toEdit.text() ) );
inEdit.focus().select();
});
$(document).on('focusout keypress', 'ul.toBeSaved.edit li input', function(e) {
if( e.which === 13 || e.type === 'focusout') {
let val = $(this).val();
$(this).closest('li').text( val );
}
});
DEMO
$(function() {
$("#newItem").focus();
//Adding a new items when click or enter pressed//
function addNewItem() {
let newInput = $("#newItem").val();
$("#stillToDo").append("<li>" + newInput + "</li>");
$("#newItem").val("");
$("#lastUpdated").text("Last updated " + Date());
};
$("#newItemBtn").click(addNewItem);
$("#newItem").keypress(function(e) {
if (event.which == 13) {
addNewItem();
}
});
//End of adding a new items when click or enter pressed//
//Moving list itmes and removing list items//
$("#allFinished").click(function() {
$("#finished").append($("#stillToDo li"))
});
$("#allFinished2").click(function() {
$("#finished").append($("#inProgress li"))
});
$("#removeFinished").click(function() {
$("#finished li").remove();
});
//End of Moving list itmes and removing list items//
//So you can drag items across to another list
$("#stillToDo").sortable({
connectWith: "#finished, #inProgress"
});
$("#inProgress").sortable({
connectWith: "#finished, #stillToDo"
})
$("#finished").sortable({
connectWith: "#stillToDo, #inProgress"
});
//THIS IS SAVING LIST INFO and LAST UPDATED IN THE HTML 5 LOCAL STORAGE//
$(document).ready(function() {
$("#save").click(function(e) { //Clicking the "save button"//
e.preventDefault();
var everything = [];
$(".toBeSaved").each(function() {
everything.push(this.innerHTML);
})
localStorage.setItem('list', JSON.stringify(everything));
});
//\\END OF THIS IS SAVING LIST INFO and "UPDATED ON" IN THE BROWSER'S LOCAL STORAGE//
//RETREIVEING LISTS AND "UPDATED ON" FROM LOCAL STORAGE//
function loadEverything() {
if (localStorage.getItem('list')) {
var everything = JSON.parse(localStorage.getItem('list'));
$(".toBeSaved").each(function(i) {
this.innerHTML = everything[i];
})
}
}
loadEverything(); //<--This is calling the above function, without this nothing happens//
//END OF RETREIVEING LISTS AND "UPDATED ON" FROM LOCAL STORAGE//
$("#clear").click(function(e) {
e.preventDefault();
localStorage.clear();
location.reload();
});
});
//Edit added li elements
$(document).on('dblclick', 'ul.toBeSaved.edit li', function() {
let inEdit = $('<input/>');
let toEdit = $(this);
toEdit.html( inEdit.val( toEdit.text() ) );
inEdit.focus().select();
});
$(document).on('focusout keypress', 'ul.toBeSaved.edit li input', function(e) {
if( e.which === 13 || e.type === 'focusout') {
let val = $(this).val();
$(this).closest('li').text( val );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js" integrity="sha512-9pm50HHbDIEyz2RV/g2tn1ZbBdiTlgV7FwcQhIhvykX6qbQitydd6rF19iLmOqmJVUYq90VL2HiIUHjUMQA5fw==" crossorigin="anonymous"></script>
<div id="listWrapper" class="row">
<div id="dayInfo" class="container col-8">
<div class="card">
<img id="mondayImg" class="card-img-top">
<div class="card-body">
<h3 id="title" class="card-title">My Coding To-Do List</h3>
<div id="subTitle" class="row">
<div class="col">
<h5>Still to do</h5>
<button id="allFinished" class="btn btn-success">Move all to finished</button>
<hr>
<ul class="toBeSaved edit" id="stillToDo">
</ul>
<!-- <i class="fas fa-edit"></i> -->
</div>
<div class="col">
<h5>In Progress</h5>
<button id="allFinished2" class="btn btn-success">Move all to finished</button>
<hr>
<ul class="toBeSaved edit" id="inProgress">
</ul>
</div>
<div class="col">
<h5>Finished</h5>
<button id="removeFinished" class="btn btn-danger">Remove finished</button>
<hr>
<ul class="toBeSaved edit" id="finished">
</ul>
</div>
</div>
<div id="newItemWrapper">
<input id="newItem" placeholder="Add a new item">
<br>
<h6 id="newItemBtn" class="btn btn-primary">Add new item</h6>
<br>
<h6 id="save" class="btn btn-success">Save</h6>
<h6 id="clear" class="btn btn-warning">Clear</h6>
<p class="card-text"><small id="lastUpdated" class="text-muted toBeSaved">Last updated </small></p>
</div>
</div>
</div>
</div>
</div>
I have a simple HTML form which has an event listener binded to it and when you click on the button inside the form that has a class of 'booking__form__counter--increase' this should increase the input field value by 1. It calls a javascript function named 'increaseCounter()' I declare a variable that points to this value but when i try to use the variable to increment it, it doesn't work. If i use the methods in the variable directly it works? I am missing something simple here but i cannot work out what.
let bookingForm = document.querySelector('.booking__form');
bookingForm.addEventListener('click', function (e) {
let target = e.target;
let inputCounterValue = target.parentElement.firstElementChild.value;
let inputMaxCounterValue = target.parentElement.firstElementChild.dataset.maxCount;
let showCounterValue = target.parentElement.firstElementChild.nextElementSibling.textContent;
if (target.classList.contains('booking__form__counter--increase')) {
increaseCounter();
}
function increaseCounter() {
if (inputCounterValue === inputMaxCounterValue) {
return;
} else {
//does not update
inputCounterValue++;
showCounterValue = inputCounterValue;
//this does update
target.parentElement.firstElementChild.value++;
target.parentElement.firstElementChild.nextElementSibling.textContent = target.parentElement.firstElementChild.value;
}
}
});
<form class="booking__form">
<div class="container">
<div class="booking__form__group">
<div class="booking__form__section booking__form__section--arrival">
<div class="booking__form__control">
<label for="arrival">Arrival Date</label>
<div class="booking__form__counter">
<span class="booking__form__counter--value">0</span>
<div class="booking__form__counter--button booking__form__counter--increase">
<svg class="fal fa-chevron-up"></svg>
</div>
<div class="booking__form__counter--button booking__form__counter--decrease">
<svg class="fal fa-chevron-down"></svg>
</div>
</div>
</div>
</div>
<div class="booking__form__section booking__form__section--duration">
<div class="booking__form__control">
<label for="arrival">Nights</label>
<div class="booking__form__counter">
<input type="hidden" name="duration" value="1" data-max-count="21">
<span class="booking__form__counter--value">1</span>
<div class="booking__form__counter--button booking__form__counter--increase">
<svg class="fal fa-chevron-up"></svg>
</div>
<div class="booking__form__counter--button booking__form__counter--decrease">
<svg class="fal fa-chevron-down"></svg>
</div>
</div>
</div>
</div>
<div class="booking__form__section booking__form__section--adults">
<div class="booking__form__control" id="booking--adults">
<label for="arrival">Adults</label>
<div class="booking__form__counter">
<input type="hidden" name="adults" value="1" data-max-count="8">
<span class="booking__form__counter--value">1</span>
<div class="booking__form__counter--button booking__form__counter--increase">
<svg class="fal fa-chevron-up"></svg>
</div>
<div class="booking__form__counter--button booking__form__counter--decrease">
<svg class="fal fa-chevron-down"></svg>
</div>
</div>
</div>
</div>
<div class="booking__form__section booking__form__section--children">
<div class="booking__form__control" id="booking--children">
<label for="arrival">Children</label>
<div class="booking__form__counter">
<input type="hidden" name="children" value="0" data-max-count="5">
<span class="booking__form__counter--value">0</span>
<div class="booking__form__counter--button booking__form__counter--increase">
<svg class="fal fa-chevron-up"></svg>
</div>
<div class="booking__form__counter--button booking__form__counter--decrease">
<svg class="fal fa-chevron-down"></svg>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
UPDATED Javascript
I have had a play around and added my updated javascript below which now seems to be working ok. I removed the data attributes 'data-max-count' and just added in the 'max' attribute and changed the variable decelerations around.
let bookingForm = document.querySelector('.booking__form');
bookingForm.addEventListener('click', function (e) {
let target = e.target;
let input = target.parentElement.firstElementChild;
let displayValue = target.parentElement.firstElementChild.nextElementSibling;
if (target.classList.contains('booking__form__counter--increase')) {
increaseCounter();
} else if (target.classList.contains('booking__form__counter--decrease')) {
decreaseCounter();
}
function increaseCounter() {
if (input.value === input.max) {
return;
} else {
input.value++;
displayValue.textContent = input.value;
}
}
});
I re-wrote your js and it now works.
You had some issues with your selectors and the way you updated the values.
I associated the max-count with the hidden input you have there and read the data-max-count attribute value. If this is not present then the auto-increment doesn't work because I set the initial value of inputMaxCounterValue equal to 0.
Keep in mind that I only update what the user sees and not the input value.
let bookingForm = document.querySelector('.booking__form');
bookingForm.addEventListener('click', function (e) {
let target = e.target;
let parentElem = target.parentElement;
let inputCounterValue = 0;
let valueContainer = parentElem.querySelector('.booking__form__counter--value');
if (typeof valueContainer.textContent!=="undefined") {
inputCounterValue = parseInt(valueContainer.textContent,10);
}
if (target.classList.contains('booking__form__counter--increase')) {
increaseCounter(valueContainer);
}
function increaseCounter(element) {
let inputMaxCounterValue = 0;
let parentElem = target.parentElement;
if (typeof parentElem.querySelector('input')!=="undefined" && parentElem.querySelector('input')!==null) {
inputMaxCounterValue = parentElem.querySelector('input').getAttribute("data-max-count");
}
if (inputCounterValue === inputMaxCounterValue) {
return;
} else {
//does not update
inputCounterValue++;
showCounterValue = inputCounterValue;
//this does update
element.textContent = inputCounterValue;
}
I can remove any item of array unless the last one. I also use angularjs to show information in the view. I don´t know what is happening with the last item of this array. Please, anyone can help me?
Here is HTML:
<div class="row">
<div class="col-md-12">
<h4><strong>Documento {{index + 1}} de {{documentos.length}}:</strong> {{documentos[index].nome}}</h4>
<iframe style="background: #ccc;" ng-show="exibirPreview" frameborder="0" ng-src="{{versaoLink}}" width="100%" height="300px"></iframe>
<div class="alert alert-warning" ng-hide="exibirPreview">
#Html.Raw(Resources.Dialog.SignDocuments.TypeDocumentCanNotPreDisplayed)
</div>
<hr />
<div class="pull-right btn-row" ng-show="documentos.length > 1">
<button class="btn btn-default" type="button" ng-click="RemoveDoc(index)"><i class="fa fa-fw fa-times"></i> #Resources.Common.RemoveDocList</button>
</div>
</div>
</div>
Here is js/angularjs
$scope.documentos = [
{nome:"document1", chave: "8F65579E3737706F", extensao:".pdf"},
{nome:"document2", chave: "8F65579E3730007F", extensao:".pdf"},
{nome:"document3", chave: "8545579E3737706F", extensao:".pdf"},
{nome:"document4", chave: "8555579E3730007F", extensao:".pdf"}
]
$scope.ViewLink = function () {
var versao = $scope.documentos[$scope.index];
$scope.exibirPreview = versao.extensao == ".pdf" || versao.extensao == ".txt";
if (!$scope.exibirPreview) {
$scope.versaoLink = '';
} else {
$scope.versaoLink = '/Documento/VersaoView?chave=' + versao.chave;
}
};
$scope.ViewLink();
$scope.RemoveDoc = function (index) {
$scope.documentos.splice(index, 1);
$scope.ViewLink();
};
Or Plunker
In your HTML you are preventing the deletion of the last element:
<div class="pull-right btn-row" ng-show="documentos.length > 1">
<!-- -->
</div>
documentos.length > 1 means "hide when it reaches one item in the array".
It should be documentos.length == 0.
It's either this or your index value starts from 1 and not from 0.
The simplest solution would be to change your remove function to take in the document instead of the index. Try this:
$scope.RemoveDoc = function(document) {
var index = $scope.documents.indexOf(document);
$scope.documents.splice(index, 1);
}
in view:
<button class="btn" type="button" ng-click="RemoveDoc(document)">Delete</button>
I have a question & aanswer module, on clicking to write an answer to a question, first time the answer box opens and after submitting the answer, When I again open the answer text box, It doesn't opens.
My HTML Code
<li class="question answered" id="unansweredBlock" ng-if="unanswered_Que.length !==0">
<div class="qstn" id="qBlock-{{questions.question_id}}" ng-repeat="questions in unanswered_Que">
<span class="qstn-icon qicon"></span>
<div>
<div class="qmeta">
<div>Asked by {{questions.asked_by}} on {{questions.asked_at}}</div>
</div>
<h4>{{questions.question}}</h4>
</div>
<div id="ansId-{{questions.question_id}}" class="qbottom">
Write your answer
</div>
<hr class="seperator">
<div class="sendAnswer" ng-show="selectedAnswerPanel== $index" ng-hide="selectedAnswerPanel != $index">
<div class="sndAnswer">
<form action="">
<div class="form-group">
<h5>EXPERTS ANSWER</h5>
<textarea id="answer_Text{{$index}}" ng-model="answerText" placeholder="Write your comments" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" ng-click="answer_Que(questions,'answer_Text'+$index);">Send your Answer</button>
</div>
</form>
</div>
</div>
</div>
My JS Code
$scope.showHideAnswerPanel = function(index) {
if ($rootScope.isUserLoggedIn == true) {
if ($scope.selectedAnswerPanel == index) {
$scope.selectedAnswerPanel = -1
} else {
$scope.selectedAnswerPanel = index;
}
} else {
$rootScope.openLogin();
}
};
and another function is:-
$scope.answer_Que = function(unanswered_Que, answerExp) {
var requestParam = {
"uid": lclStorage.get('userData')[0].uid,
"token_key": lclStorage.get('userData')[0].token_key,
"question_id": unanswered_Que.question_id,
"answer": $("#" + answerExp).val()
}
appServices.doAPIRequest(appSettings.appAPI_ci.answeraQue.sendAnswer, requestParam, null, 'userData')
.then(function(data) {
});
if ($scope.unanswered_Que.length == 1) {
$("#answer_Text").val(" ");
$(".sendAnswer").hide();
$("#unansweredBlock").remove();
} else if ($scope.unanswered_Que.length > 1) {
$("#answer_Text").val(" ");
$(".sendAnswer").hide();
$("#qBlock-" + unanswered_Que.question_id).remove();
} else {
$("#answer_Text").val(" ");
$(".sendAnswer").hide();
}
};
I have two div html elements with different id and here I am using spinner. Whenever values in the spinner input changes alert box will be displayed.
HTML code
<div id="accordion2" class="panel-group" style="display: block;">
<div id="accordion2" class="panel-group">
<div id="Tea">
<div class="spinner Tea input-group ">
<input type="text" id = "servings" class="form-control input- sm" value="Tea"/>
<div class="input-group-btn-vertical">
<button class="btn Tea btn-default">
<i class="fa fa-caret-up"></i>
</button>
<button class="btn Tea btn-default">
<i class="fa fa-caret-down"></i>
</button>
</div>
<h4 id="energy" class="Tea"> Tea </h4>
</div>
<div id="Coffee">
<div class="spinner Coffee input-group ">
<input type="text" id = "servings" class="form-control input-sm" value="Coffee"/>
<div class="input-group-btn-vertical">
<button class="btn Coffee btn-default">
<i class="fa fa-caret-up"></i>
</button>
<button class="btn Coffee btn-default">
<i class="fa fa-caret-down"></i>
</button>
</div>
<h4 id="energy" class="Coffee">Coffee</h4>
</div>
</div>
</div>
JQuery code
$(function(){
$('.spinner:first-of-type input').on('click', function() {
$('.spinner:first-of-type input').val(parseInt($('.spinner:first-of-type input').val(), 10) + 1);
var val = $('.spinner:first-of-type input').val();
changeValues(val);
});
$('.spinner:last-of-type input').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
});
function changeValues(value){
alert($('#energy').attr('class').split(' '));
};
});
But in the alert box whenever I click the spinner up arrow only Tea is displayed.
what I expect is when the spinner is clicked from Tea div tea should be displayed and when from coffee , coffee should be displayed.Please help me out
I'm not sure I totally got what you are trying to do, but it seems to me that you want to increment and decrement number of beverage cups on up/down buttons click. For this you would better modify mark up a little (remove duplicated ids, add classes for convenience). And I may look like this then:
$(function() {
$('.spinner').on('click', '.servings', function(e) {
$(this).val(parseInt($(this).val() || 0, 10) + 1);
var val = $(this).val();
changeValues.call(e.delegateTarget, val);
})
.on('click', '.up', function(e) {
$(e.delegateTarget).find('.servings').val(function() {
return ++this.value;
});
})
.on('click', '.down', function(e) {
var $input = $(e.delegateTarget).find('.servings');
if (+$input.val() > 1) {
$input.val(function() {
return --this.value;
});
}
});
function changeValues(value) {
var type = $(this).find('.energy').data('type');
alert(type);
};
});
Demo: http://plnkr.co/edit/9vXC0RipxkzqhXrHJAKD?p=preview
try this:
$(function () {
$('.spinner').each(function () {
var $el = $(this),
$buttons = $el.find('button'),
$h4 = $el.find('h4'),
input = $el.find('input').get(0);
function showAlert() {
alert($h4.get(0).className);
}
$buttons.eq(0).on('click', function (event) {
event.preventDefault();
input.value = (parseInt(input.value, 10) || 0) + 1;
showAlert();
});
$buttons.eq(1).on('click', function (event) {
event.preventDefault();
input.value = (parseInt(input.value, 10) || 0) - 1;
});
});
});
JSFiddle http://jsfiddle.net/yLtn57aw/2/
Hope this helps