Develop Reference

Updated: How do I pass a default value into my modal input element

UPdated: have been stuck on this for 3 day's now and I cannot find an answer anywhere.
I have a model that contains -input type="text" name="mycardname" id="CardName"/-
I want to post the card name into the value of the input box.
I can put it in a label or a span, but cannot find a way or example to add it to the input box.
My code is below.
var ATTRIBUTES = ['cardname', 'metric', 'month'];
$('.CardModal').on('click', function (e) {
var $target = $(e.target);
var modalSelector = $target.data('target');
ATTRIBUTES.forEach(function (attributeName) {
var $modalAttribute = $(modalSelector + ' #modal-' + attributeName);
var dataValue = $target.data(attributeName);
$modalAttribute.text(dataValue || '');
$target('#CardName')('value try This');
});
});
$('#settingsModal,#monthModal').on('show.bs.modal', function (event) {
alert("this alert");
var $card = $(event.relatedTarget).closest('.card');
var $modal = $(this);
var data = $card.data();
Document.getElementById('#CardName').val("try This");
for (var item in data) {
$modal.find('[name="' + item + '"]').val(data[item]);
}
});
$('#monthModal .btn-primary').click(function () {
var $modal = $(this).closest('.modal');
var searchType = $modal.find('input[name="SearchTypeRadio"]:checked').val();
var metric = $modal.find('[name="metric"]').val();
var month = $modal.find('[name="month"]').val();
var cdName = $modal.find('[name="mycardname"]').val();
alert("SearchType: " + searchType + " Metric: " + metric + " Month: " + month + " Card Name: " + cdName);
});
$('.btnApplyColors').on('click', function () {
var $modal = $(this).closest('.modal');
var cardName = $modal.find('[name="name"]').val();
var grMin = $modal.find('[name="greenmin"]').val();
var grMax = $modal.find('[name="greenmax"]').val();
var yMin = $modal.find('[name="yellowmin"]').val();
var yMax = $modal.find('[name="yellowmax"]').val();
var rMin = $modal.find('[name="redmin"]').val();
var rMax = $modal.find('[name="redmax"]').val();
var cardTR = cardName + 'TR';
var elements = document.getElementsByClassName(cardTR); // get all elements
for (var i = 0; i < elements.length; i++) {
var tsd1 = cardName + i + 'TD1';
var tsd2 = cardName + i + 'TD2';
var td1 = document.getElementById(tsd1).innerHTML;
var td2 = parseInt(document.getElementById(tsd2).innerHTML);
alert(td1 + " - " + td2);
switch (true) {
case (td2 >= yMin && td2 <= yMax):
alert(td1 + " - " + td2 + " YMin " + yMin + " yMax " + yMax);
elements[i].style.backgroundColor = "lightyellow";
elements[i].style.color = 'brown';
break;
case (td2 >= grMin && td2 <= grMax):
alert(td1 + " - " + td2 + " grMin " + grMin + " grMax " + grMax);
elements[i].style.backgroundColor = "#E7FCE3";
elements[i].style.color = 'darkgreen';
break;
case (td2 >= rMin && td2 <= rMax):
alert(td1 + " - " + td2 + " rMin " + rMin + " rMax " + rMax);
elements[i].style.backgroundColor = "mistyrose";
elements[i].style.color = 'red';
break;
default:
alert("Hit the Default because " + td2 + " not found");
break;
}
}
$('#ScoreCardDefaults').modal('hide');
});
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
// clean this up //
let startYear = 2000;
let endYear = new Date().getFullYear();
for (i = endYear; i > startYear; i--) {
$('#yearpicker').append($('<option />').val(i).html(i));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
<div class="col mb-4" data-mincoolscale="71">
<div class="card text-center" data-metric="14" data-month="2020-10" data-mincoolscale="71" data-maxcoolscale="100" data-minwarmscale="51" data-maxwarmscale="70" data-minhotscale="0" data-maxhotscale="50">
<div class="card-img-top d-flex align-items-center justify-content-center bg-primary text-light metric-header">
<span class="h5 my-1">my card</span>
</div>
<div class="card-body pt-3">
<h6 class="card-title">
my card title
</h6>
<p>
<span class="metric-date">#DateTime.Now.ToString("MMMM yyyy")</span>
<button type="button" class="btn btn-sm btn-link CardModal" data-cardname="The Card Name" data-toggle="modal" data-target="#monthModal" title="Edit" aria-title="Edit">
Ccc
</button>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="monthModal" tabindex="-1" aria-labelledby="monthModalTitle" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="monthModalTitle">Display Statistics For</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span id="modal-cardname"></span>
<input type="text" name="mycardname" id="CardName" />
<div class="myRadios">
<label><input type="radio" name="SearchTypeRadio" value="Monthly"> Monthly</label>
<label><input type="radio" name="SearchTypeRadio" value="Quarterly"> Quarterly</label>
</div>
<div style="display:none" class="Monthly box">You have selected Monthly</div>
<div style="display:none" class="Quarterly box">You have selected quarterly</div>
<div style="display:none" class="Monthly box form-group">
<input type="month" id="month" name="month" class="form-control w-auto" placeholder="mm/yyyy" max="#DateTime.Now.ToString("yyyy-MM")" min="2010-01" />
</div>
<div style="display:none" class="Quarterly box form-group">
#*<label for="month">Yearly Quarter of</label>*#
<select id="QTRS">
<option value="1" selected>1st Quarter</option>
<option value="2">2nd Quarter</option>
<option value="3">3rd Quarter</option>
<option value="4">4th Quarter</option>
</select>
<select name="yearpicker" id="yearpicker"></select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
#*<a class=" btn btn-primary" asp-controller="Home" asp-action="updateSSOA"> Apply</a>*#
<button type="button" class="btn btn-primary" data-dismiss="modal">Apply</button>
</div>
</div>
</div>
</div>

I don’t know if there are multiple text boxes and buttons that are the same on this page. Do you mean to traverse all ATTRIBUTES to the text box corresponding to this button or to pass the ATTRIBUTES corresponding to the modal value into the text box?
If you pass in a corresponding ATTRIBUTES, please refer to the following example:
<input type="text" name="mycardname" id="CardName" />
<button type="button" class="btn btn-sm btn-link CardModal"
data-cardname="kls01" data-toggle="modal" data-target="#monthModal"
title="Edit" aria-title="Edit">
Launch Modal
</button>
#section Scripts{
<script>
$(function () {
var ATTRIBUTES = ['cardname', 'metric', 'month'];
$('.CardModal').on('click', function (e) {
var $target = $(e.target);
var modalSelector = $target.data('target');
ATTRIBUTES.forEach(function (attributeName) {
var $modalAttribute = $(modalSelector + ' #modal-' + attributeName);
var dataValue = $target.data(attributeName);
$modalAttribute.text(dataValue || '00');
if ($target.prev().val() == '' || $target.prev().val == null) {
$target.prev().val(attributeName || '')
}
});
});
})
</script>
}
Result:

I finally figured it out:
Change:
$target('#CardName')('value try This');
to:
var myCardName = $(this).data('cardname');
$(".modal-body #mycardname").val(myCardName);

JS: Uncaught TypeError: onlcick is not a function

When I put the form tag on the button tag id="paybutton" function, it works well. But when I put the form tag on the div class="form-group, the up and down buttons don't work. i've added type="button" and tried to change input type ="button" but it is still not working.
<script>
var up = function(max) {
document.getElementById("mynumber").value = parseInt(document.getElementById("mynumber").value) + 1;
if (document.getElementById("mynumber").value >= parseInt(max)) {
document.getElementById("mynumber").value = max;
}
document.getElementById("amount").value = parseInt(document.getElementById("mynumber").value) * 5000;
if (document.getElementById("amount").value >= 50000) {
document.getElementById("amount").value = 50000;
}
}
function down(min) {
document.getElementById("mynumber").value = parseInt(document.getElementById("mynumber").value) - 1;
if (document.getElementById("mfFFfFFynumber").value <= parseInt(min)) {
document.getElementById("mynumber").value = min;
}
document.getElementById("amount").value = parseInt(document.getElementById("mynumber").value) * 5000;
if (document.getElementById("amount").value <= 5000) {
document.getElementById("amount").value = 5000;
}
}
</script>
<form method="post" action="/kakaoPay">
<!-- ??? ?? -->
<div class="form-group">
<label>??? ? (1??? : 5??): </label>
<div class="input-group">
<div class="input-group-btn">
<button type="button" id="down" class="btn btn-default" onclick="down('1')">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<input type="text" name="mybumber" id="mynumber" class="form-control input-number" value="1" />
<div class="input-group-btn">
<button type="button" id="up" class="btn btn-default" onclick="up('10')">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
<output type="number" id="amount" name="total" class="form-control input-number"></output>
</div>
-
<h1> ?? </h1>
-
<!-- <form method="post" action="/kakaoPay"> -->
- <button name="paybutton" id="paybutton"> ?? </button> -
</form>

use window.up window.down
because scope is current form not window
like this

You have to rename your functions "up" and "down". Try "up2" and "down2" and it will work. This is because the identifier names conflicts with your function names.
<script>
var up2 = function(max) {
document.getElementById("mynumber").value = parseInt(document.getElementById("mynumber").value) + 1;
if (document.getElementById("mynumber").value >= parseInt(max)) {
document.getElementById("mynumber").value = max;
}
document.getElementById("amount").value = parseInt(document.getElementById("mynumber").value) * 5000;
if (document.getElementById("amount").value >= 50000) {
document.getElementById("amount").value = 50000;
}
}
function down2(min) {
document.getElementById("mynumber").value = parseInt(document.getElementById("mynumber").value) - 1;
if (document.getElementById("mfFFfFFynumber").value <= parseInt(min)) {
document.getElementById("mynumber").value = min;
}
document.getElementById("amount").value = parseInt(document.getElementById("mynumber").value) * 5000;
if (document.getElementById("amount").value <= 5000) {
document.getElementById("amount").value = 5000;
}
}
</script>
<form method="post" action="/kakaoPay">
<!-- ??? ?? -->
<div class="form-group">
<label>LABEL (1? : 5?): </label>
<div class="input-group">
<div class="input-group-btn">
<button type="button" id="down" class="btn btn-default" onclick="down2('1')">
<span class="glyphicon glyphicon-minus">DOWN</span>
</button>
</div>
<input type="text" name="mybumber" id="mynumber" class="form-control input-number" value="1" />
<div class="input-group-btn">
<button type="button" id="up" class="btn btn-default" onclick="up2('10')">
<span class="glyphicon glyphicon-plus">UP</span>
</button>
</div>
</div>
<output type="number" id="amount" name="total" class="form-control input-number"></output>
</div>
-
<h1> HEADER </h1>
-
<!-- <form method="post" action="/kakaoPay"> -->
- <button name="paybutton" id="paybutton"> PAY </button> -
</form>
Refer to this answer for more details: Why JS function name conflicts with element ID?

Force user to select text from Autocomplete options in Dynamic Add / Remove Fields

I have created an add/remove dynamic fields with Autocomplete option. I am using jquery UI autocomplete for text field. The code works perfect. But I want to force user only to select text that are coming in autocomplete options. Following is the code...
jQuery(document).ready(function($) {
var wrapper = $("#username-fields");
var add_button = $("#add-username-fields");
var x = 1;
var availableAttributes = [
"John",
"Pamela",
"Rogers",
"Peter"
];
add_button.click(function(e) {
e.preventDefault();
x++;
var element = $('<div id="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_role[]" placeholder=""><input type="hidden" class="form-control" name="status[]" value="Unverified" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');
element.fadeIn("slow").find("input[name^='user_login']").autocomplete({
source: availableAttributes,
});
wrapper.append(element);
});
wrapper.on("click", "#remove_field", function(e) {
e.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).closest('#user-fields').remove();
x--;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button type="button" class="btn btn-success" id="add-username-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>
<div id="username-fields">
</div>
I searched and got the following JSFiddle - http://jsfiddle.net/pxfunc/j3AN7/, I want to incorporate the JSFiddle code in my code but some how I am not able to merge both.

Try this Code
jQuery(document).ready(function($) {
var wrapper = $("#username-fields");
var add_button = $("#add-username-fields");
var x = 1;
var availableAttributes = [
"John",
"Pamela",
"Rogers",
"Peter"
];
var previosValue='';
add_button.click(function(e) {
e.preventDefault();
x++;
var element = $('<div id="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" id="user_login" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_role[]" placeholder=""><input type="hidden" class="form-control" name="status[]" value="Unverified" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');
element.fadeIn("slow").find("input[name^='user_login']").autocomplete({
autoFocus: true,
source: availableAttributes,
});
wrapper.append(element);
})
wrapper.on("keyup","#user_login",function() {
var isValid = false;
for (i in availableAttributes) {
if (availableAttributes[i].toLowerCase().match(this.value.toLowerCase())) {
isValid = true;
}
}
if (!isValid) {
this.value = previousValue
} else {
previousValue = this.value;
}
});
wrapper.on("click", "#remove_field", function(e) {
e.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).closest('#user-fields').remove();
x--;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button type="button" class="btn btn-success" id="add-username-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>
<div id="username-fields">
</div>

How do i remove an li my case

how do i remove the text li created in the JavaScript.
the li was created in the javascript and on click on each button in front of them it should only remove that li and not all
function addBook() {
var userInput = document.getElementById('books').value;
if (userInput === "") {
alert("Please Enter A Text");
return false;
}
var book = document.getElementById('addBook');
var list = document.getElementById('addBook').children;
var check = -1;
var btn = document.createElement('button');
btn.innerHTML = 'X';
(list.length === 0) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');
for (var k = 0; k < list.length; k++) {
console.log(list[k].innerText);
if (list[k].innerText === userInput + "x") {
check = 1;
break;
}
}
(check === -1) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');
}
function removeParent(e) {
var book = document.getElementById('addBook').children;
book.parentNode.parentNode.removeChild(e.parentNode);
}
<div class="col-md-4 form-cont">
<h3>Favourite Books </h3>
<caption>Enter Book's name:</caption> <input type="text" id="books" class="form-control" required="required">
<button onclick="addBook()" class="btn btn-success">Add Book</button>
<ol type="i" id="addBook">
</ol>
<h3 id="h">Hoobies</h3>
</div>

book is not an Element, instead it is a list of Elements
Simple use e instead of book
function removeParent(e) {
e.parentNode.parentNode.removeChild(e.parentNode);
}
Demo
function addBook() {
var userInput = document.getElementById('books').value;
if (userInput === "") {
alert("Please Enter A Text");
return false;
}
var book = document.getElementById('addBook');
var list = document.getElementById('addBook').children;
var check = -1;
var btn = document.createElement('button');
btn.innerHTML = 'X';
(list.length === 0) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');
for (var k = 0; k < list.length; k++) {
console.log(list[k].innerText);
if (list[k].innerText === userInput + "x") {
check = 1;
break;
}
}
(check === -1) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');
}
function removeParent(e) {
e.parentNode.parentNode.removeChild(e.parentNode);
}
<div class="col-md-4 form-cont">
<h3>Favourite Books </h3>
<caption>Enter Book's name:</caption> <input type="text" id="books" class="form-control" required="required">
<button onclick="addBook()" class="btn btn-success">Add Book</button>
<ol type="i" id="addBook">
</ol>
<h3 id="h">Hoobies</h3>
</div>

Modify the removeParent function like this:
function removeParent(e) {
var book = document.getElementById('addBook');
book.removeChild(e.parentNode);
}
function addBook() {
var userInput = document.getElementById('books').value;
if (userInput === "") {
alert("Please Enter A Text");
return false;
}
var book = document.getElementById('addBook');
var list = document.getElementById('addBook').children;
var check = -1;
var btn = document.createElement('button');
btn.innerHTML = 'X';
(list.length === 0) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');
for (var k = 0; k < list.length; k++) {
console.log(list[k].innerText);
if (list[k].innerText === userInput + "x") {
check = 1;
break;
}
}
(check === -1) && book.insertAdjacentHTML('beforeend', '<li>' + userInput + '<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a></li>');
}
function removeParent(e) {
var book = document.getElementById('addBook');
book.removeChild(e.parentNode);
}
<div class="col-md-4 form-cont">
<h3>Favourite Books </h3>
<caption>Enter Book's name:</caption> <input type="text" id="books" class="form-control" required="required">
<button onclick="addBook()" class="btn btn-success">Add Book</button>
<ol type="i" id="addBook">
</ol>
<h3 id="h">Hoobies</h3>
</div>

you simply need to use the "e" parameter it's directly pointing on your element that was clicked :
<a class="btn btn-danger btn-sm remove" style="margin-left:10px;" onclick="removeParent(this)">x</a>
h
function removeParent(e) {
e.parentNode.parentNode.removeChild(e.parentNode);
}

How to get a quantity box to update total price

Hi guys I'm building a simple e-commerce site from scratch rather then using Shopify and I've made all the simple front end bits however i cant seem to get the total price to update based on the quantity of products the customers picks.
So far if the customer "adds to cart" then the price and total number in cart will update by 1, but if they want to choose 2 or more it doesn't work and i was wondering how i can get it to work
HTML:
<button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button> //Button to add to cart
<div class="input-group plus-minus-input"> //Quantity of product
<div class="input-group-button">
<button class="button hollow circle1 btn btn-primary"
data-field="quantity" data-quantity="minus" type="button">
<i aria-hidden="true" class="fa fa-minus"></i>
</button>
</div>
<input class="input-group-field" name="quantity" type="number" value="0">
<div class="input-group-button">
<button class="button hollow circle2 btn btn-primary"
data-field="quantity" data-quantity="plus" type="button">
<i aria-hidden="true" class="fa fa-plus"></i>
</button>
</div>
</div>
<p class="cartPrice">0.00 kr</p><input id="search-submit" type="submit"> //Quantity in cart
Javascript:
//Quanity animation when the user clicks + or -
jQuery(document).ready(function(){
$('[data-quantity="plus"]').click(function(e){
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal)) {
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
$('[data-quantity="minus"]').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
});
//When the user clicks add to cart this will update the total price and the quantity in the cart
var currentItems = 0;
var cartPrice = 565.00;
$(document).ready(function(){
$(".add-to-cart").click(function(){
currentItems++;
var totalPrice = currentItems * cartPrice;
$(".cart-badge").text(currentItems);
$(".cartPrice").text(totalPrice + " kr")
});
});
So again I'm just trying to figure out when the user clicks on + to add more prodcuts i want the price to update to that: So if the user wants 5 products it will do 5 * 565 etc.
Thanks

When you click "add to cart" nothing is retrieving the current quantity and so it is always static. By retrieving the value from the quantity input box your math will work correctly.
currentItems = $("input.input-group-field[name='quantity']").val();
//Quanity animation when the user clicks + or -
jQuery(document).ready(function(){
$('[data-quantity="plus"]').click(function(e){
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal)) {
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
$('[data-quantity="minus"]').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('data-field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
});
//When the user clicks add to cart this will update the total price and the quantity in the cart
var currentItems = 0;
var cartPrice = 565.00;
$(document).ready(function(){
$(".add-to-cart").click(function(){
currentItems = $("input.input-group-field[name='quantity']").val();
var totalPrice = currentItems * cartPrice;
$(".cart-badge").text(currentItems);
$(".cartPrice").text(totalPrice + " kr")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button> //Button to add to cart
<div class="input-group plus-minus-input"> //Quantity of product
<div class="input-group-button">
<button class="button hollow circle1 btn btn-primary" data-field="quantity" data-quantity="minus" type="button">-<i aria-hidden="true" class="fa fa-minus"></i></button>
</div>
<input class="input-group-field" name="quantity" type="number" value="0">
<div class="input-group-button">
<button class="button hollow circle2 btn btn-primary" data-field="quantity" data-quantity="plus" type="button">+<i aria-hidden="true" class="fa fa-plus"></i></button>
</div>
</div>
<p class="cartPrice">0.00 kr</p><input id="search-submit" type="submit"> //Quantity in cart