Develop Reference

How to increment the counter value when the input field is filled?

This is my laravel view code. Here,I am trying to increment the counter value(ie.,value="0/5") . I have the input fields inside the modal and when clicking on the save button which is inside the model, the value should get incremented based on the filled input fields.ie(1/5..2/5..)
I have tried to increment those counter value.But it displays NaN
var val;
$("input").click(function() {
val = $('#counter').val();
val++;
$('#counter').prop('value', val)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none">
</div>

<script type="text/javascript">
$("input").click(function() {
let val = parseInt($('#counter').val().split('/')[0]);
$('#counter').prop('value', `${++val}/5`);
});
</script>

Actually your code is working fine. Since you have the view inside a modal, which is only displayed or shown on a click event, you should use the jQuery "on" method to enhance your click handler function definition. In that case you should have your code working
var val;
$(document).on('click','#counter',function()
{
val = $('#counter').val();
val++;
$('#counter').prop('value',val )
});
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i>
Price,stock and Shipping Information<input type="submit" id="counter"
**value="0/5"** style="background-color: transparent; border:none">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

You can use regular expression to parse data before / character
var val;
$("input").click(function() {
val = $('#counter').val();
qty = val.match(/[^/]*/i)[0];
qty++;
$('#counter').prop('value', qty)
});

If you want to increase like this 1/5..2/5 .Use split and increase only upper value .
var val;
$("input").click(function() {
val = $('#counter').val().split("/");
//check eqal value with base
if(val[0] == val[1]) {
return false;
}
val[0]++;
$('#counter').prop('value', val[0]+"/"+val[1]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none">
</div>

Here is your solution:
$("input").click(function() {
var val = $('#counter').val();
$('#counter').prop('value', `${++val % 6}/5`);
});
And a working fiddle:
https://jsfiddle.net/wv2x0mx5/4/

You can also try this.
$("#counter").on("click",function(){
var counterBtn = document.getElementById("counter");
var count = counterBtn.value;
//alert(count.split("/")[0]);
count = count.split("/");
counterBtn.value = ((parseInt(count[0])+1)%(parseInt(count[1])+1))+"/"+count[1];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-title pull-left">
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen">
</i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none">
</div>

On dropdown element click its icon disappears

This code will replace what is shown inside <button></button> with selected icon from dropdown list.
This works good, only problem is that after clicking on selected element, icon inside that element will for some reason disappear? Why does this happen? I want <li> to be unchanged
http://codepen.io/filaret/pen/PGJEAL
HTML:
<div class="input-group-btn">
<button type="button" class="btn" data-toggle="dropdown">
<i class="fa fa-book"></i>
</button>
<ul class="dropdown-menu">
<li><i class="fa fa-book"></i> Something 111</li>
<li><i class="fa fa-newspaper-o"></i> Something 2222</li>
</ul>
</div>
jQuery:
var $selectWrapper = $('.input-group-btn');
$selectWrapper.find(".dropdown-menu li").click(function() {
// Get <i class="fa"></i>
var $selectedIcon = $(this).find('.fa');
// Put it inside <button></button>
$selectWrapper.find(".btn").html($selectedIcon);
});

You need to clone the icon using clone() like following
var $selectedIcon = $(this).find('.fa').clone();
instead of
var $selectedIcon = $(this).find('.fa');
UPDATED CODEPEN

Otherwise since you have i tag in dropdown and button tag and that only class change, why don't you just copy the class, it's more efficient, faster and easy to understand in your code.
jQuery(document).ready(function($) {
"use strict";
var $selectWrapper = $('.input-group-btn');
var $buttonIcon = $('.btn i');
$selectWrapper.find(".dropdown-menu li").click(function() {
// Get <i class="fa"></i>
var $selectedIcon = $(this).find('.fa');
// get icon classes
var classes = $selectedIcon.attr("class");
// Put the class in the button i tag
$buttonIcon.attr('class', classes);
});
});
See code pen: http://codepen.io/anon/pen/ORxQPZ

JQuery toggle() html data

I have tried searching for a solution to this but can't seem to find a working answer. I may have missed something obvious.
I have a link to show the latest comments on a status. When the link is clicked the link data changes to "Close" (all good) but when close is then clicked to toggle the DIV the link data stays "Close", I want it to return to the original text (i.e 3 Comments).
The HTML:
<a class="comments" id="coms-<?php echo $statmainID; ?>" href="javascript:;"><i class="fa fa-comment"></i> <?php echo $numComs; ?> Comments</a>
<div id="comss<?php echo $statmainID; ?>" style="display:none;">Comments Here</div>
The JQuery:
$(function(){
$('body').on('click', '.comments', function(){
var cID =$(this).attr('id');
var theID = cID.split("-");
var divID = theID[1];
$('#comss'+divID).toggle("slide");
$('.comments'+divID).html('Close');
return false;
});
});
As always, any help from you guru's is always appreciated.
Kind regards.

You can use data attribute to store the original text. Then you can show it again.
HTML
<body>
<a class="comments" id="coms-1" href="javascript:;" data-id="comss1" data-text="4 Comments">
<i class="fa fa-comment"></i> 4 Comments
</a>
<div id="comss1" style="display:none;">Comments Here</div>
<a class="comments" id="coms-2" href="javascript:;" data-id="comss2" data-text="2 Comments">
<i class="fa fa-comment"></i> 2 Comments
</a>
<div id="comss2" style="display:none;">Comments Here</div>
</body>
JS
$(function(){
$('body').on('click', '.comments', function(){
var cID =$(this).attr('id');
var theID = cID.split("-");
var divID = theID[1];
$('#comss'+divID).toggle("slide");
var comments = $('#coms-'+divID);
if($(comments).text() === "Close"){
$(comments).html($(comments).data("text"));
} else {
$(comments).html('Close');
}
return false;
});
});

WORKING FIDDLE
var prevText=$(".comments").text();
$(".comments").click(function(){
if($(this).text().indexOf("Comments")>=0){
$(this).text("Close");
}
else
{
$(this).text(prevText);
}
return false;
});
UPDATE
FIDDLE WITH STATIC NUMBER OF COMMENTS

You can do it like following. Keep the original text in a data attribute and show it when on Close click.
$('body').on('click', '.comments', function() {
var cID = $(this).attr('id');
var theID = cID.split("-");
var divID = theID[1];
$('#comss' + divID).toggle("slide");
if ($(this).html().trim() != 'Close') {
$(this).data('text', $(this).html());
$(this).html('Close');
} else {
$(this).html($(this).data('text'));
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" />
<a class="comments" id="coms-1" href="javascript:;"><i class="fa fa-comment"></i> 1 Comments</a>
<div id="comss1" style="display:none;">Comments Here</div>

Javascript .click() not working

I'm creating a store locator for a website and ive got a tooltip box that displays an email the i want to make a link. this is the html:
<div class="gm_popup">
<span class="address"> Address</span><br>
<span class="city"> City</span><br>
<span class="phone"> 123 456</span><br>
<span class="email"> email#example.com</span><br>
</div>
and this is the js:
jQuery(document).ready(function(){
var old_focus_and_popup = focus_and_popup;
focus_and_popup = function (id){
return_val = old_focus_and_popup (id);
setTimeout(function (){
jQuery("#store_map .gm_popup .email").click(function(){
var text = jQuery(this).text();
document.location = "mailto:" + text.trim();
});
jQuery(".gm_popup .email").css('text-decoration','underline').css('color','#2aa8e0');
}, 200);
return return_val ;
}
});
any idea why this wouldnt be working? after adding some console.logs it seems like its getting as far as the .click but no going inside the function. Thanks

You are registering click event
This won't trigger until any click is done manually.
If you wanna get auto click then try like this after registering click event
jQuery("#store_map .gm_popup .email").click();
or
jQuery("#store_map .gm_popup .email").trigger("click");

Well you have all the events code inside the function, and you never end up calling that function. So I've made some changes, removed the setTimeout, as that was unnecessary. Also, made a call to that function.
<div id="store_map">
<div class="gm_popup">
<span class="address"> Address</span><br>
<span class="city"> City</span><br>
<span class="phone"> 123 456</span><br>
<span class="email"> email#example.com</span><br>
</div>
</div>
jQuery(document).ready(function(){
focus_and_popup = function (id){
//return_val = old_focus_and_popup (id);
jQuery("#store_map .gm_popup .email").click(function(){
var text = jQuery(this).text();
console.log("HERE");
document.location = "mailto:" + text.trim();
});
jQuery(".gm_popup .email").css('text-decoration','underline').css('color','#2aa8e0');
return return_val ;
}
focus_and_popup();
var old_focus_and_popup = focus_and_popup;
});

I wrote for you a snippet that simply works.
jQuery(document).ready(function () {
jQuery(".gm_popup .email").click(function () {
alert('hello');
var text = jQuery(this).text();
document.location = "mailto:" + text.trim();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gm_popup">
<span class="address"> Address</span>
<br>
<span class="city"> City</span>
<br>
<span class="phone"> 123 456</span>
<br>
<span class="email"> email#example.com</span>
<br>
</div>

How to get the value of a particular input field using id in the html templates

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