Add up and change values of 3 text boxes - javascript

I have 3 text boxes (testbox, testbox2, testbox3) that get values from an input field, radio button selection and checkbox/tick. The correct values go into testbox, testbox2, testbox3.
However, I need the total of testbox, testbox2, testbox3 to go into text box 'total' - with the total to change if the users selects different radio buttons or tick/unticks etc..
One more thing I need the total to also be shown in the form, echo, (in addition to going into the text box - which will eventually be hidden).
Thank you.
<head>
<script type="text/javascript">
function checkboxClick() {
var textbox = document.forms[0].testbox3;
textbox.value = (textbox.value == 0) ? '1.00' : '0.00';
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<form action="" method="get">
<input name="form1" type="radio" onclick="document.forms[0].testbox2.value='0.00'; "/>
<input name="form1" type="radio" onclick="document.forms[0].testbox2.value='1.00'; "/>
<input name="" type="checkbox" value="" onclick='checkboxClick()'/>
<input name="testbox" type="text" value"2.00"/>
<input name="testbox2" type="text" value"0.00"/>
<input name="testbox3" type="text" value="0.00"/>
<input name="total" type="text" value=""/>
</form>
<body>
</body>
</html>

How about writing a function to update the total (and being careful to parse the textbox inputs as floats):
function updateTotal() {
var textbox1val = parseFloat(document.forms[0].testbox.value);
var textbox2val = parseFloat(document.forms[0].testbox2.value);
var textbox3val = parseFloat(document.forms[0].testbox3.value);
var total = textbox1val + textbox2val + textbox3val;
document.forms[0].total.value = total;
}
And then calling this function in an onchange attribute?

Related

Form with input and output immediately reload the page after printing the output

I need to do a simple homework where you enter two integers in two text fields of a form and then you compute the sum and you print it in a "text field (not editable)". My program seems to work but it prints the right output and immediately reload the page. I want the page to remain with the printed output if the user does not click again on "submit" button
Here is my code HTML & JS :
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
}
<!DOCTYPE html>
<html>
<head>
<title>Number in a form</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="function.js">
</script>
</head>
<body>
<div id="mainDiv">
<H3>Insert two positive numbers</H3>
<form>
First number:<br>
<input id="n1" type="text" name="firstname"><br>
Second number:<br>
<input id="n2" type="text" name="lastname">
<BR>
<input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>
</form>
The sum is:<br>
<output id="sum" name="x" for="a b"></output>
</div>
<noscript>
Sorry: Your browser does not support or has disabled javascript
</noscript>
</body>
</html>
When form is submited, the page will be reloaded. To prevent this you should change input type attribute from submit to button.
<input type="submit" value="Submit" onClick="updateExpr()"/>
to
<input type="button" value="Submit" onClick="updateExpr()"/>
You can simply avoid server call by changing your form tag
<form onSubmit="return false">
You dont really need a form to do something like this.
Forms send values to the backend, e.g. a server.
You only want to manipulate some front-end elements like a container to have some new text inside it.
a <form> tag typically sends you to some URI with some aprameters,
this is done by the actions attribute.
<form action="addnames.php">
for example would call the addnames.php script on your server...
You dont need a server tho..look below:
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum =x1 +x2;
document.getElementById("sum").innerHTML = sum;
}
<h2>HTML Forms</h2>
First name:<br>
<input id="n1" type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input id="n2" type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" onclick="updateExpr()">Submit</button>
<div id="sum">
</div>
<script>
</script>
I would recommand you to add onSubmit method to the form instead of onclick to the input.
Also you better add a return : false to your function and add onsubmit="return updateExpr()".
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
return false;
}
<!DOCTYPE html>
<html>
<head>
<title>Number in a form</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="function.js">
</script>
</head>
<body>
<div id="mainDiv">
<H3>Insert two positive numbers</H3>
<form onsubmit="return updateExpr()">
First number:<br>
<input id="n1" type="text" name="firstname"><br>
Second number:<br>
<input id="n2" type="text" name="lastname">
<BR>
<input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>
</form>
The sum is:<br>
<output id="sum" name="x" for="a b"></output>
</div>
<noscript>
Sorry: Your browser does not support or has disabled javascript
</noscript>
</body>
Another way of doing this would have been to add a button outside of the form linked to the function by onclick event
juste add preventDefault(), like this
function updateExpr(e) {
e.preventDefault();
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
}

How to delete a check box using javascript

I'm working on this HTML Page where i can add a check-box along with the label by clicking the add button, is there anyway that i can have a delete button as well so that when i select a check-box and press the delete button the check-box along with the text box is deleted??Please find my code below!!
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Add()
{
var checkbox=document.createElement('input');
var inps=document.createElement('input');
var output=document.getElementById('output');
checkbox.type='checkbox';
inps.type='text';
inps.name='textboxname';
checkbox.name='checkname';
output.appendChild(checkbox);
output.appendChild(inps);
output.appendChild(document.createElement('br'));
}
</script>
</head>
<body>
<form action="http://localhost:9990" method="post">
<span id="output"></span>
<input type="button" value="Add" onclick="Add()">
<center>
<p>
<input type="file" name="datafile" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</center>
</form>
</body>
</html>
Give all of the check boxes that could potentially be deleted the same class. Additionally label all of the text boxes that could be deleted with their own class. My check boxes will be labeled with chk and my text boxes will be labeled with txt. As in:
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />
The following solution should work as long as check boxes and text fields are 1 to 1.
the function you will add to your delete button will loop through all of the check boxes and see if they are deleted and then delete the checked ones.
Heres the JS:
function delBoxes(){
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for(var i = 0; i<boxes.length; i++){
box = boxes[i];
txt = texts[i];
if(box.checked){
box.parentNode.removeChild(box);
txt.parentNode.removeChild(txt);
}
}
}
That will delete all of the checked check boxes, all you have to do now is make a button and add that function as an onclick.
<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
Sample HTML
<div>
<input type='checkbox' value='asd' id='test' name='test' />
<input type='checkbox' value='asd' id='tester' name='test' />
<input type='button' value='remove' id='rmvBtn' />
</div>
In pure javascript, you can do this,
var rmvBtn = document.getElementById('rmvBtn');
rmvBtn.addEventListener('click', function(){
var rmvCheckBoxes = document.getElementsByName('test');
for(var i = 0; i < rmvCheckBoxes.length; i++)
{
if(rmvCheckBoxes[i].checked)
{
removeElm(rmvCheckBoxes[i]);
}
}
});
function removeElm(elm){
elm.parentElement.removeChild(elm);
}
JS Fiddle
HTML
<input type="checkbox" id="checkboxid" name="checkboxname">
<button id="btnDeleteid" onclick="deleteCheckBox()" name="btnDeletename">Delete</button>
JavaScript
function deleteCheckBox(){
if (document.getElementById('checkboxid').checked){
var answer = confirm('Are you sure you want to delete this checkbox?');
if (answer)
{
$("#checkboxid").remove();
}
}else{
alert("Pls check the checkbox.");
}
}
I hope this will help.
Refer fiddle - http://jsfiddle.net/F8w8B/3/

html How can I get multiple instant results from single calculation

Is it possible to get a dozen results from this single basic calculation? I have two output textboxes in the sample code; how can I get these two fields to work?
<!DOCTYPE html>
<html lang = "en">
<head>
<title> multiple results calculation </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="style" href="css/main.css" type"text/css"/>
<!-- I need multiple results from single calculation!
<script type="text/javascript">
function sum()
{
var width = document.multiple results.width.value;
var height = document.multiple results.value;
var sum = parseInt(width) * parseInt(height) /144;
document.getElementById('Calculate').value = sum;
document.getElementById("results1").readOnly=true;
document.getElementById("results2").readOnly=true;
var result1= $1.99;
var result2= $2.99;
document.getElementById('Calculate').value = sum * result1;
document.getElementById('Calculate').value = sum * result2;
}
</script>
-->
</head>
<body>
<div>
<H2> Multiple instant results from single calculation</h2>
<p> the goal eventually is to have about a dozen results from this single calculation
</div>
<form name="multiple results">
<label for="width"> Width: </label>
<input type="number" <id="width" maxlength="4" size="10" value=""/>
<label for="height"> Height: </label>
<input type="number" <id="height" maxlength="4" size="10" value=""/>
<input type="button" name="button" value="Calculate" onClick="sum"/>
<div>
<label for="result1"> Result1: $ </label>
<input type="number" id="result1" name="result1"/>
<label for="result2"> Result2: $ </label>
<input type="number" id="result2" name="result2"/>
</div>
</form>
</body>
</html>
I found a solution by removing the first document.getElementById('Calculate').value = sum;, changed the remaining getElementById's and input type's to result and result2 also added the missing value="" to input, not necessary but renaming Id's helped me

checking a form before submitting - JavaScript

I have the following form:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Choose</title>
<script type="javascript/text">
function ischecked(){
var check = document.getElementsByTagName( 'input' );
for( var i = 0; i < check.length; i++ ){
if( check[ i ].type == 'radio' && check[ i ].checked ){
return true;
}
}
return false;
}
</script>
</head>
<body>
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
<h1>Choose</h1>
<p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br>
<br>
<input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
<br>
<input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
<br>
<input type="submit" name="Submit" value="Go"></p>
</form>
</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>
I wanted to make sure one of the radio buttons have been checked before submitting the form. However, it does not work, and the form is submitted anyways. What am I doing wrong here?
You need to return the result of your function from the inline event handler.
You have to check against the value returned in your validation function directly in the attribute value. That is, in your HTML form declaration
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
you should write:
onsubmit="return ischecked();"
instead of:
onsubmit="ischecked();"

How might I calculate the sum of radio button values using jQuery?

I am trying to create a form with many groups containing many radio buttons. When the user selects a button, I would like to calculate the sum of each selected radio button value and show this sum to the user.
I have found a plugin for jQuery which will do the calculation, this plugin use the name attribute of the buttons to calculate. For example, it will sum the values of all buttons which have the name sum.
So far, I have tried two ways of setting this up: in the first method, I create a hidden field for each group to hold the sum of the selected values inside it, this hidden field gets the value but the problem is that the total value will not update when a user selects a button. My code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="jquery.js" type="text/javascript">
</script>
<script src="calc.js" type="text/javascript">
</script>
<script src="calc_f.js" type="text/javascript">
</script>
<script type="text/javascript">
function DisplayPrice(price){
$('#spn_Price').val(price);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="hidden" id="spn_Price" name="sum" value="">
<br>
<input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">
<br>
<input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">
<br>
<input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">
</form>
</body>
</html>
In this code, the input tag with the name totalSum is where the value will update, but it won't update when changing the buttons.
As I said before, the reason why I use a hidden field is to hold each group's subtotal. It has the name sum, which indicates to the plugin that it should be added to others.
I dont know if this is the right way to do this, i have tried to change the name attribute of the buttons when user click them to sum but that didn`t work either!
Here is plugin address : http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm
How can I do this ?
Plugin schmugin. Get rid of your onclick and try this:
$("input[type=radio]").click(function() {
var total = 0;
$("input[type=radio]:checked").each(function() {
total += parseFloat($(this).val());
});
$("#totalSum").val(total);
});
Untitled Document
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var sum=parseInt(val1) + parseInt(val2);
document.getElementById('totalSum').value=sum;
}
</script>
</head>
<body>
Choose a number:<br>
<form name="form1" id="form1" runat="server">
<br>
<input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">159
<br>
<input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">259
<br>
</form>
Choose another number:<br>
<form name="form2" id="form2" runat="server">
<br>
<input id="rdo_1" type="radio" value="345" name="price2" onclick="DisplayPrice(this.value);">345
<br>
<input id="rdo_2" type="radio" value="87" name="price2" onclick="DisplayPrice(this.value);">87
<br>
</form>
<input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">
</body>
The code above will dinamically sum the checked values from both groups.
parseInt will convert to integers. Use parseFloat otherwise.

Categories