Develop Reference

Format currency input field with dollar sign & commas

I have a revenue input field in a javascript/jquery form:
Need a dollar sign :before
add commas as the currency increases
I have a dollar sign showing via css, but issues centering it and ensuring the field entry point is next to it without overlapping. Unsure how to do the commas. Any suggestions or tips are welcome!
HTML:
<form id="rev-calculator">
<label for="price">Monthly Revenue</label>
<div class="fields">
<input type="number" name="price" id="price" min="0" max="10000000000" required data-type="number"> </input>
<br>
</form>
CSS:
<style>
.body {
text-align: left;
}
.fields {
margin: 0 10px 0 0;
}
.fields:before {
content: "$";
text-align: center;
position: relative;
left:30px;
}
#price {
border-radius: 5px;
margin: 15px;
padding: 10px;
color: black;
}
</style>
JS:
<script>
$('#rev-calculator').on('click', 'button', function(e) {
e.preventDefault();
var price = $("#price").val();
console.log(price);
})
</script>
codepen: https://codepen.io/kedarPE/pen/JjroYyb
input field

Well here's a way, though in truth not as simple as I hoped when I started down this path. You can use Intl.NumberFormat to get the comma in there (according to locale). To accomodate decimals, I sniff for them in the beginning and append them to the result.
To allow for the comma, I made this a text field with a pattern attribute. Also, I adjusted your CSS to make it a little nicer looking with the $
$('#price').keydown(function(e) {
setTimeout(() => {
let parts = $(this).val().split(".");
let v = parts[0].replace(/\D/g, ""),
dec = parts[1]
let calc_num = Number((dec !== undefined ? v + "." + dec : v));
// use this for numeric calculations
// console.log('number for calculations: ', calc_num);
let n = new Intl.NumberFormat('en-EN').format(v);
n = dec !== undefined ? n + "." + dec : n;
$(this).val(n);
})
})
.body {
text-align: left;
}
.fields {
margin: 0 10px 0 0;
}
.fields:before {
content: "$";
text-align: center;
position: relative;
left: 35px;
}
#price {
border-radius: 5px;
margin: 15px;
padding: 10px 10px 10px 20px;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="rev-calculator">
<label for="price">Monthly Revenue</label>
<div class="fields">
<input type="text" pattern="[0-9.,]+" name="price" id="price" required data-type="number" />
<br>
</form>

I'm surprised the unique answer for this issue has a lot of votes because it has a tiny but major flaw: the event shouldn't be keydown, it should be keyup. If you use keydown, it won't read the keys you are pressing at the moment but the previous one. So, please update your answer.

Hex to rgb converter in javascript

I'm trying to make a simple rgb to hex converter and I keep getting stuck with Javascript, what am I doing wrong?
In html part I made a form which on submit calls convert() function.
function convert() {
r = parseInt(document.getElementById('r').value);
g = parseInt(document.getElementById('g').value);
b = parseInt(document.getElementById('b').value);
rgb(r, g, b);
function rgb(r, g, b){
res = ColorToHex(r) + ColorToHex(g) + ColorToHex(b);
function ColorToHex(color) {
if (color > 255) return "FF";
else if (color < 0) return "00";
else color.toString(16).padStart(2, "0").toUpperCase();
}
}
document.getElementById('result').innerHTML = res;
return false;
}

This returns hex from RGB
console.log(convert('255','18', '50'));
function convert(r, g, b) {
r = parseInt(r); g = parseInt(g); b = parseInt(b);
res = r.toString(16) + g.toString(16) + b.toString(16);
res = res.toUpperCase();
return res;
}

First, please declare your variables properly. I don't know what else you have going on in the rest of your code, it may or may not be a factor.
Second, I don't know what you are doing in your HTML. From the code shown, I am assuming your HTML has something like:
<input id="r" type="number"/>
<input id="g" type="number"/>
<input id="b" type="number"/>
And
<span id="result">This Space For Lease</span>
Though I gather you have some of that enclosed in a <form> with a submit button, which is not strictly necessary. For instance you could use something like onBlur to call convert() every time you make any input change for a more dynamic UX. And further, use ' onclick="select()" ` so that when you click in an input it auto-selects the existing contents.
Other optimizations noted in the comments in the below example.
<body>
<h3>Enter integer RGB values</h3>
<input id="r" type="number" onclick="select()" onblur="convert()" value="00" style="width: 5em; background:#fcc;" />
<input id="g" type="number" onclick="select()" onblur="convert()" value="00" style="width: 5em; background:#cfc;" />
<input id="b" type="number" onclick="select()" onblur="convert()" value="00" style="width: 5em; background:#ccf;" />
<br>
<h3>Result as a HEX string</h3>
<div style="margin:1em 0.5em; padding: 0.5em 0;">THE COLOR IS:
<span id="colorPatch" style="margin: 0.5em; padding: 1em; background-color: black; border-radius: 0.6em;"> </span><br>
<span id="result">#000000</span>
</div>
</body>
<script>
// create variables for all "getElement..." this was the DOM
// only needs to be parsed on page load, so future access to
// the elements is via the variable instead for better performance.
let inputR = document.getElementById('r'),
inputG = document.getElementById('g'),
inputB = document.getElementById('b'),
resultOut = document.getElementById('result'),
colorOut = document.getElementById('colorPatch');
function convert() {
// here making the assumption that the expected inputs are
// unsigned integers, we clamp the values to 0-255, then
// make each into a 2 char hex str with padding.
let hexR = Math.min(Math.max(inputR.value, 0), 255).toString(16).padStart(2, "0"),
hexG = Math.min(Math.max(inputG.value, 0), 255).toString(16).padStart(2, "0"),
hexB = Math.min(Math.max(inputB.value, 0), 255).toString(16).padStart(2, "0");
// concatenate to a hex color string
let resultColor = "#" + hexR + hexG + hexB;
// Send to output and set color of sample color patch.
// toUpperCase() is performed once on the final string,
// instead of the substrings
resultOut.innerHTML =
colorOut.style.backgroundColor = resultColor.toUpperCase();
}
</script>
And also added it as a snippet below. Please do read the code comments as they explain what and why things are as they are.
Now, as for the concatenation, it could be even tighter:
function convert() {
colorOut.style.backgroundColor =
resultOut.innerHTML = ("#"
+ Math.min(Math.max(inputR.value,0),255).toString(16).padStart(2,"0")
+ Math.min(Math.max(inputG.value,0),255).toString(16).padStart(2,"0")
+ Math.min(Math.max(inputB.value,0),255).toString(16).padStart(2,"0")).toUpperCase();
}
Everything all on one logical line (line breaks added only for readability), so no need to declare and assign any more variables. Though this kind of thing can impact code readability if taken too far.
When making big strings, I like to put the concatenation operator (+) at the head of each line, which is the opposite of how I'd breakup a long equation by putting the math operators at the end of each line. This makes it clear the + is for concatenation and not addition.
Let me know if any questions...
// create variables for all "getElement..." this was the DOM
// only needs to be parsed on page load, so future access to
// the elements is via the variable instead for better
let inputR = document.getElementById('r'),
inputG = document.getElementById('g'),
inputB = document.getElementById('b'),
resultOut = document.getElementById('result'),
colorOut = document.getElementById('colorPatch');
function convert() {
// here making the assumption that the expected inputs are
// unsigned integers, we clamp the values to 0-255, then
// make each into a 2 char hex str with padding.
let hexR = Math.min(Math.max(inputR.value, 0), 255).toString(16).padStart(2, "0"),
hexG = Math.min(Math.max(inputG.value, 0), 255).toString(16).padStart(2, "0"),
hexB = Math.min(Math.max(inputB.value, 0), 255).toString(16).padStart(2, "0");
// concatenate to a hex color string
let resultColor = "#" + hexR + hexG + hexB;
// Send to output and set color of sample color patch.
// toUpperCase() is performed once on the final string,
// instead of the substrings
resultOut.innerHTML =
colorOut.style.backgroundColor = resultColor.toUpperCase();
}
body {
margin: 0;
padding: 0.5em 1.5em ;
font-family: sans-serif;
background-color: #ffd;
}
h2, h3 { position: relative; font-style: oblique; }
h2 { margin: 0.5em 1em 0.5em;}
h3 { margin: 0.5em 2em 1.4em;}
#r,#g,#b {
width: 5em;
height: 1.75em;
font-size: 1.33em;
font-weight: 600;
text-align: center;
border-radius: 0.6em;
}
#r { background:#fcc; }
#g { background:#cfc; }
#b { background:#ccf; }
.resultDiv {
display: inline-block;
position: relative;
margin: 1.33em;
padding: 0.5em 0.5em 2em;
background-color: #4bb4;
border-radius: 2em;
text-shadow: 0.15em 0.15em 0.3em #6886;
box-shadow: inset 3px 3px 6px #0448,
inset 0 0 22px #4888;
}
.resultVal {
position: relative;
margin: 1em 2em;
padding: 0em;
}
#result {
font-size: 1.5em;
font-weight: 500;
letter-spacing: 0.07em;
color: #135a;
text-shadow: -0.05em -0.05em 0.08em #defd,
0.05em 0.05em 0.08em #1238;
}
#colorPatch {
min-width: 5em;
margin: 0.5em;
padding: 0.5em 1em 2em;
font-size: 1.25em;
background-color: black;
border: 0.33em solid #999;
border-radius: 0.75em;
box-shadow: 2px 2px 3px #2449;
}
<body>
<h2>Enter integer RGB values</h2>
<input id="r" type="number" onclick="select()" onblur="convert()" value="00"/>
<input id="g" type="number" onclick="select()" onblur="convert()" value="00"/>
<input id="b" type="number" onclick="select()" onblur="convert()" value="00"/>
<br>
<div class="resultDiv">
<h3>Result as a HEX string</h3>
<div class="resultVal">THE COLOR IS:
<span id="colorPatch" > </span><br>
<span id="result">#000000</span>
</div>
</div>
</body>

newbie javascript tip calculator issues

So im only just really starting out on my javascript journey. I'm only just getting into DOM manipulation and still very new to a lot of javascript...as you can probably tell by my code!
I'm messing around with a tip calculator (pretty standard newbie project I guess) and having real difficulties with the DOM and how to select certain elements from inputs (text and radio) and have them submit.
Any advice on my below code would be awesome. I am all ears and ready to take a spanking for all of the mistakes...but super keen to learn what I'm doing wrong!
<form class="container">
<h2>Tip Calculator</h2>
<p>Enter Bill Amount</p>
<input type="text" class="input-styles" placeholder="£££" id="bill-amount">
<p>Select Percentage Of Bill</p>
<div class="radio-container">
<div class="radio-styles"> <p>10%</p>
<input type="radio" class="radio-styles" name="tip-percent" value="0.1">
</div>
<div class="radio-styles">
<p>15%</p>
<input type="radio" class="radio-styles" name="tip-percent" value="0.15">
</div>
<div class="radio-styles">
<p>20%</p>
<input type="radio" class="radio-styles" name="tip-percent" value="0.2">
</div>
<div class="radio-styles">
<p>25%</p>
<input type="radio" class="radio-styles" name="tip-percent" value="0.25">
</div>
</div>
<div class="submit-container">
<button type="submit" name="tip-submit" id="submit-button">submit</button>
</div>
<div class="totals-container">
<div class="totals">
<h2>Tip To Pay</h2>
<h2 id="tip-to-pay"></h2>
<h2 id="bill-final">Total Bill To Pay</h2>
<h2 id="bill-to-pay"></h2>
</div>
</div>
</form>
Javascript below...
var bill, percent, tip, finalBill;
document.getElementById('submit-button').addEventListener('click', function() {
// get bill amount
bill = document.getElementById('bill-amount').value
//get percent amount from checkboxes
percent = document.getElementsByName('tip-percent').checked;
tip = calcTip();
finalBill = finalAmount();
// edit results in html
document.getElementById('tip-to-pay').textContent = tip;
document.getElementById('bill-to-pay').textContent = finalBill;
// display result
document.querySelector('.totals-container').style.display = 'flex';
}
function calcTip() {
tip = percent * bill
}
function finalAmount() {
finalBill = tip + bill
}
probably be a lot easier to see this with my below pen!
https://codepen.io/rickwall/pen/WNbpmoW

HTML
On your HTML, you're wrapping your calculator with <form class="container"> - Forms are typically used for sending data to a web-server, for submission or validation among other things. In this case, you're just using it as a container and so are fine to stick to a standard <div>
This was causing the issue with your calculator disappearing when you submit
JavaScript
Scoping - Originally you were defining all of your variables in the global scope, rather than the function scope. This is typically avoided because it can cause issues with variables overwriting, losing track of changes, generally unexpected behaviour - You can ready more about this here
Functions - Your functions were perhaps a product of your scoping, but in general you would want your functions to take an input, and return you a value rather than modifying the values outside of the function scope - Returning your output helps avoid unexpected changes, while using parameters to input values allows more control and readability
In this code, I would be tempted to just not use the functions and perform the maths directly, being as it's simple & called only once - But you're free to do as you want
// This will change the value of tip globally, while also using set variables for percent and bill
function calcTip () {
tip = percent * bill
}
// This allows us to return the output of our function to our chosen variable
// while also taking the inputs we want
function calcTip (percent, bill) {
return percent * bill;
}
let tip = calcTip(0.10, 120); // returns 12;
Read more about functions from the MDN Docs
Types - In your main function, you're retrieving the .value of elements, and assigning them to bill and percent. However, .value will return a String, regardless of if the input is a "a" character, or a "2" character - This is causing issues when you're trying to add values, because the add operator + does different things when used with Strings and Numbers.
For example, when used with a String and a Number, it will simply concatinate the two variables together - not add them as you might expect
let a = "5"; // Type: String
let b = 120; // Type: Number
a + b // "5120"
The correct behavior is seen when used with two Numbers
let a = 5; // Type: Number
let b = 120; // Type: Number
a + b // 125
In your case, we can make our String values bill & percent into Numbers by using parseInt(x) and parseFloat(x) - parseInt converts to an integer Number, while parseFloat converts to a floating point Number
There are a few more minor changes to your code in the snippet, but this is just some quick things for you before you post this over to code review - by no means is this the absolute correct way to do this, there's a fair few, but it's hopefully gonna help you moving forward
document.getElementById('submit-button').addEventListener('click', function() {
// Get bill amount
let bill = parseInt(document.getElementById('bill-amount').value);
// Get percent from selected checkbox
/* let percent = document.getElementsByName('tip-percent'); */
let percent = parseFloat(document.querySelector('input[name="tip-percent"]:checked').value);
// No reason to have these as functions if they're simple & only called once
let tip = percent * bill;
let finalBill = bill + tip;
// Add results in html
document.getElementById('tip-to-pay').textContent = '$' + tip;
document.getElementById('bill-to-pay').textContent = '$' + finalBill;
// Dislay result
document.querySelector('.totals-container').style.display = 'flex';
})
* {
margin: 0;
padding: 0;
}
html {
font-family: zilla slab;
font-size: 18px;
font-weight: 300;
background-image: url(imgs/restaurant.jpg);
background-position: center;
}
.page {
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: rgba(204, 238, 255, 0.9);
padding: 50px 100px 50px 100px;
margin-top: 2%;
text-align: center;
box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.5), 0px 10px 20px rgba(0, 0, 0, 0.7);
border-radius: 40px;
}
.container>h2 {
padding-bottom: 1.6rem;
font-size: 2.5rem;
}
.container>p {
padding-bottom: 1rem;
font-size: 1.5rem;
}
.container>input {
text-align: center;
padding: 4px;
font-size: 1.2rem;
width: 160px;
margin-left: 19%;
margin-bottom: 1rem;
}
.radio-container {
display: flex;
justify-content: space-between;
}
.radio-box {
display: flex;
text-align: center;
align-items: center;
flex-direction: column;
}
.radio-styles {
margin: 10px 0 1.2rem 0;
cursor: pointer;
outline: none;
}
button {
padding: 8px 40px 8px 40px;
text-transform: uppercase;
background-color: #fff;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
font-family: zilla slab;
font-weight: 300;
font-size: 1rem;
}
.totals-container {
display: none;
}
.totals {
display: flex;
flex-direction: column;
}
#bill-final {
font-size: 2rem;
}
.totals h2 {
padding-bottom: 1.6rem;
}
<div class="page">
<div class="container">
<h2>Tip Calculator</h2>
<p>Enter Bill Amount</p>
<input type="text" class="input-styles" placeholder="£££" id="bill-amount">
<p>Select Percentage Of Bill</p>
<div class="radio-container">
<div class="radio-styles">
<p>10%</p>
<input type="radio" class="radio-styles" name="tip-percent" value="0.10">
</div>
<div class="radio-styles">
<p>15%</p>
<input type="radio" class="radio-styles" name="tip-percent" value="0.15">
</div>
<div class="radio-styles">
<p>20%</p>
<input type="radio" class="radio-styles" name="tip-percent" value="0.20">
</div>
<div class="radio-styles">
<p>25%</p>
<input type="radio" class="radio-styles" name="tip-percent" value="0.25">
</div>
</div>
<div class="submit-container">
<button type="submit" name="tip-submit" id="submit-button">submit</button>
</div>
<div class="totals-container">
<div class="totals">
<h2>Tip To Pay</h2>
<h2 id="tip-to-pay"></h2>
<h2 id="bill-final">Total Bill To Pay</h2>
<h2 id="bill-to-pay"></h2>
</div>
</div>
</div>
</div>

Credit cards types for jessepollak's JQuery.Card.js

I am using jquery.card.js from jessepollak. It is awesome.
If anyone has experience with it, could you please tell me if there is an option to choose what types of credit card you want to support?
e.g.
//This is how I would like it to be...
var card = new Card({
supportedCardTypes: 'Visa, Master'; //I don't want DC or AMEX etc...
});
Is there any options like that? How do I achieve it?
Thank you.
Answer ------------------------------------------------------------
Turns out, only changing cardTypes as TMan suggested didn't work. But it is not about the fish, it is about giving me the idea of fishing. Following TMan's idea hacking into the script, I found adding this line would work:
Card.prototype.handlers = {
setCardType: function($el, e) {
//my modification here to support only Visa and Master!!
var cardType = e.data === 'mastercard' || e.data === 'visa' ? e.data : 'unknown';
//end of my modification!!
if (!QJ.hasClass(this.$card, cardType)) {
QJ.removeClass(this.$card, 'jp-card-unknown');
QJ.removeClass(this.$card, this.cardTypes.join(' '));
QJ.addClass(this.$card, "jp-card-" + cardType);
QJ.toggleClass(this.$card, 'jp-card-identified', cardType !== 'unknown');
return this.cardType = cardType;
}
},
You can just hack the library source code, quick and dirty NOT the best idea, or do something to initialise the handlers your way in your own code.
Thanks again.

Great ideas all around. Here's a way to take your addition to the handler and override it without having to hack at the library. This will persist future changes much better.
var setCardTypeOrig = Card.prototype.handlers.setCardType;
Card.prototype.handlers.setCardType = function($el, e) {
var allowedCards = ['mastercard','visa'];
if (allowedCards.indexOf(e.data) < 0) e.data = 'unknown';
setCardTypeOrig.call(this, $el, e);
}
Demo in Stack Snippets
var setCardTypeOrig = Card.prototype.handlers.setCardType;
Card.prototype.handlers.setCardType = function($el, e) {
var allowedCards = ['mastercard','visa'];
if (allowedCards.indexOf(e.data) < 0) e.data = 'unknown';
setCardTypeOrig.call(this, $el, e);
}
var card = new Card({ form: '.form-container form', container: '.card-wrapper' })
.form-container {
margin-top: 20px;
}
.form-container input {
font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
float: left;
}
.form-container input.col-6 {
width: 50%
}
.form-container input.col-3 {
width: 25%
}
.form-container input[type="text"] {
background-color: #fff;
border: 1px solid #cccccc;
font-size: 0.875rem;
margin: 0 0 1rem 0;
padding: 0.5rem;
height: 2.3125rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-container .button {
cursor: pointer;
position: relative;
text-decoration: none;
text-align: center;
font-size: 0.875rem;
margin: 0 0 1rem 0;
padding: 0.5rem;
height: 2.3125rem;
color: #fff;
background-color: #008CBA;
border-width: 0;
}
.form-container .button:hover,
.form-container .button:focus {
background-color: #007295;
}
<script src="https://rawgit.com/jessepollak/card/master/lib/js/card.js"></script>
<div class="demo-container">
<div class="card-wrapper"></div>
<div class="form-container">
<form action="">
<input placeholder="Card number" type="text" name="number" class="col-6"/>
<input placeholder="Full name" type="text" name="name" class="col-6"/>
<input placeholder="MM/YY" type="text" name="expiry" class="col-3"/>
<input placeholder="CVC" type="text" name="cvc" class="col-3"/>
<input type="submit" value="Submit" class="button col-6"/>
</form>
</div>
</div>
To test it, you can look at the card payment definitions:
mastercard (55*) - works ✓
visa (4*) - works ✓
amex (37*) - doesn't ✓

Based on the Coffeescript file, I think your best bet would be to fork the library and then remove the cards you don't want to support from the cardTypes array so that all other numbers would show up as undefined.
https://github.com/jessepollak/card/blob/master/src/coffee/card.coffee
Or the following line in card.js:
https://github.com/jessepollak/card/blob/master/lib/js/card.js#L1134
Card.prototype.cardTypes = ['jp-card-amex', 'jp-card-dankort', 'jp-card-dinersclub',
'jp-card-discover', 'jp-card-jcb', 'jp-card-laser', 'jp-card-maestro',
'jp-card-mastercard', 'jp-card-unionpay', 'jp-card-visa', 'jp-card-visaelectron'];
You'll also probably want to modify the cardTemplate variable to remove the DOM nodes that no longer apply:
https://github.com/jessepollak/card/blob/master/src/coffee/card.coffee#L36

How do I get my checkbox values and option values to add up and enter the sum into my text area?

I'm trying to make a checkout/shopping page, where you can select what you want to buy, choose your shipping price and when you click calculate shipping the full price for what you have selected will appear in the text area.
I have 3 check boxes with three different values & 3 options with three different values. I want to be able to add up the selected checkbox and option and I want the sum (answer) to be displayed in my textarea at the bottom of the page. The answer will pop in the text area once a button is pressed. My buttons id is #button.
How can this be done with javascript?
If anyone knows how to do this it would be greatly appreciated, I am learning how to use javascript and I would find reading your solutions a very useful way to learn.
Here is a snippet from my html:
<body>
<form action="script.php" method="get" id="myform">
<h1>Select a product below:</h1>
<div>
<p>Product 1</p> €25.00<input type = "checkbox" name = "25" value = "25" id="cb1" class="sum"><br>
<p>Product 2</p> €50.00<input type = "checkbox" name = "50" value = "50" id="cb2" class="sum"> <br>
<p>Product 3</p> €100.00<input type = "checkbox" name = "100" value = "100" id="cb3" class="sum">
</div>
<h2>
Where do you want the products delievered to:
</h2>
<div><select>
<option value="select">Select a shipping option..</option>
<option value="2">Ireland (2.00)</option>
<option value="3">Rest of Europe (3.00)</option>
<option value="7">Rest of World (7.00)</option>
</select></div>
<div>
<textarea cols="20" rows="1" id="shipping">Shipping</textarea>
</div>
<input type = "submit"
value = "Calculate Shipping"
id="button"
>
</form>
</body>
here is my css:
h1{
font-weight: normal;
font-size: 20px;
margin-top: 50px;
margin-left: 50px;
}
p{
margin-left: 50px;
margin-right: 80px;
font-size: 20px;
font-weight: normal;
display: inline-block;}
input{
display: inline-block;
}
h2{
font-weight: normal;
font-size: 20px;
margin-left: 50px;
display: inline-block;
float: left;
}
select{
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
body {
font-size: 20px;
}
#shipping{
margin-left: -370px;
margin-top: 20px;
font-family: arial;
display: inline-block;
}
#button{
display: inline-block;
float: right;
margin-right: 1000px;
margin-top: -26px;
}
textarea {resize: none;}
Sorry about the length of my question, would be great if someone could help me out :)

You can use Javascript to do this. Use Jquery to get all the values of your inputs, sum them and use Jquery to set them to the textarea.
var numbers = $("input:checked").val();
var sum = numbers.reduce(function(sum, i) { return sum + i}, 0);
$("#shipping").val(sum);

If you're using button type submit then it will submit the form to script.php unless you prevent it from submitting using javascript.
I suggest you make the #button type just button instead of submit.
to calculate you can use javascript something like this
var inputs, index, sum;
sum = 0;
inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
var el = inputs[index];
if (el.type && el.type === 'checkbox' && el.checked) {
sum += inputs[index].value;
}
}
Also you should use appropriate names for checkboxes, as they will be referenced in scripts.php on actual form submit.