I want to add height and width calculator in my website which ask user to enter width and height size. but there should be a validation for minimum value like 200 and max value like 5000 for both height and width.
if the use add smaller than 200 and greater than 5000 it should alert a message to correct it.
I have developed this code but its not working like to ask seperatly
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
if(myBox1 >= 200 && myBox2 >=200) {
var result = document.getElementById('result');
var myResult = [(myBox1 * myBox2 * 0.69)/100];
result.value = parseFloat(myResult).toFixed(2);
} else {
alert("Please enter Minimum Width and Height is greater than 200")
}
}
<script type="text/javascript">
</script>
<div style="background-color:gray; border-bottom-width:2; border-color:orange;">
<h3 class="page-header">Price Calculator </h3>
<div class="docs-data">
<form name="pricecalculator" id="pricecalculator" method="post" action="<?php echo $buy;?>"/>
<div class="input-group" style="display:table-row-group; alert">
<label class="input-group-addon" for="dataWidth">Width</label>
<input id="box1" type="text" onchange="calculate();"/>
<!-- <input type="text" class="form-control" id="dataWidth" placeholder="width"> -->
<span class="input-group-addon">cm</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataHeight">Height</label>
<input id="box2" type="text" onchange="calculate();"/>
<!-- <input type="text" class="form-control" id="dataHeight" placeholder="height"> -->
<span class="input-group-addon">cm</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataHeight">Total Price</label>
<input id="result" type="text" readonly="readonly" onchange="calculate();"/>
<!--<input type="text" class="form-control" id="dataHeight" placeholder="height"> -->
<span class="input-group-addon">AUD</span>
</div>
</div>
</div>
Try this:
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
if (showAlert(myBox1, 'Width') && showAlert(myBox2, 'Height')) {
var result = document.getElementById('result');
var myResult = [(myBox1 * myBox2 * 0.69)/100];
result.value = parseFloat(myResult).toFixed(2);
}
}
function showAlert(boxValue, type) {
if(boxValue < 200) {
alert("Please enter Minimum " + type + " greater than 200");
return false;
}
return true;
}
The event change fires when input-element loses focus.
I would use the following decision:
function startValidator(){
var oldWidth = document.getElementById('box1').value;
var oldHeight = document.getElementById('box2').value;
setInterval(function(){
var newWidth = document.getElementById('box1').value;
var newHeight = document.getElementById('box2').value;
if (newWidth!=oldWidth || newHeight!=oldHeight){
calculate();
oldWidth = newWidth;
oldHeight = newHeight;
}
},400);
}
Related
I was implementing a LiveCart updating method using JavaScript that calculates the total amount. But the JavaScript function is not being invoked. It was working before using Django variables as HTML values. But now even after removing them the function is not being invoked.
function display() {
var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
var fd = document.getElementById("search-input-in").value;
var sd = document.getElementById("search-input-out").value;
var firstDate = new Date(fd);
var secondDate = new Date(sd);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (oneDay)));
var ind = document.getElementById("search-input-min").value;
var base = document.getElementById("search-input").value;
var button = document.getElementById("search-button");
if (base == "Cottage and Food"
or "Cottage") {
base = 2000;
}
if (base == "Other") {
base = 1500;
}
if (diffDays == 0) {
diffDays = 1;
}
num = base * ind * diffDays;
str1 = "Pay Rs.";
str2 = num.toString();
res = str1.concat(str2);
if (isNaN(num)) {
button.value = "Pay Rs.0";
alert(".........");
} else {
button.value = res;
return num;
}
}
<div class="form-div">
<form class="form-control" action="#" method="post">{% csrf_token %}
<script type="text/javascript" src="{% static 'js/livecart.js' %}">
display();
</script>
<h1 id="search-text">\ Checkout \</h1>
<hr>
<br>
<label class="search-input" for="select-package">Package </label><br>
<select required id="search-input" name="package-type">
<option class="search-input" value={{package}}>{{package}}</option>
</select>
<br>
<label class="search-input" for="in-date">Check-in date </label><br>
<input required id="search-input-in" type="date" name="in-date" value={{inDate}}><br>
<label class="search-input" for="out-date">Check-out date </label><br>
<input required id="search-input-out" type="date" name="out-date" value={{outDate}}><br>
<label class="search-input" for="indiviuals">Indiviuals</label><br>
<input required id="search-input-min" type="number" name="individuals" value="0" onchange="display();"><br>
<hr>
<input id="search-button" type="submit" name="search" value="Pay Rs.0">
</form>
</div>
According to this tutorial.
If src is set, the script content is ignored.
So try this:
<script src="{% static 'js/livecart.js' %}"></script>
<script type="text/javascript">
display();
</script>
You have an issue in the JavaScript code in the if condition (base == "Cottage and Food" or "Cottage"). Replace it with (base == "Cottage and Food" || base == "Cottage").
See the code below.
function display() {
var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
var fd = document.getElementById("search-input-in").value;
var sd = document.getElementById("search-input-out").value;
var firstDate = new Date(fd);
var secondDate = new Date(sd);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (oneDay)));
var ind = document.getElementById("search-input-min").value;
var base = document.getElementById("search-input").value;
var button = document.getElementById("search-button");
if (base == "Cottage and Food" ||
base == "Cottage") {
base = 2000;
}
if (base == "Other") {
base = 1500;
}
if (diffDays == 0) {
diffDays = 1;
}
num = base * ind * diffDays;
str1 = "Pay Rs.";
str2 = num.toString();
res = str1.concat(str2);
if (isNaN(num)) {
button.value = "Pay Rs.0";
alert(".........");
} else {
button.value = res;
return num;
}
}
<div class="form-div">
<form class="form-control" action="#" method="post">{% csrf_token %}
<script type="text/javascript" src="{% static 'js/livecart.js' %}">
display();
</script>
<h1 id="search-text">\ Checkout \</h1>
<hr>
<br>
<label class="search-input" for="select-package">Package </label><br>
<select required id="search-input" name="package-type">
<option class="search-input" value={{package}}>{{package}}</option>
</select>
<br>
<label class="search-input" for="in-date">Check-in date </label><br>
<input required id="search-input-in" type="date" name="in-date" value={{inDate}}><br>
<label class="search-input" for="out-date">Check-out date </label><br>
<input required id="search-input-out" type="date" name="out-date" value={{outDate}}><br>
<label class="search-input" for="indiviuals">Indiviuals</label><br>
<input required id="search-input-min" type="number" name="individuals" value="0" onchange="display();"><br>
<hr>
<input id="search-button" type="submit" name="search" value="Pay Rs.0">
</form>
</div>
Im new to Javascript and i was doing some DOM maniputalion, and i tried to create the BMI (body mass index) calculator, which is bodyMass / ( bodyWeight * bodyWeight ).
Then i've done some code:
HTML:
var bodyMass, bodyWeight;
bodyMass = parseInt(document.getElementById("bodyMass").value, 10);
bodyWeight = parseInt(document.getElementById("bodyWeight").value, 10);
var BMI = bodyMass / (bodyWeight * bodyWeight);
document.getElementById("check").onclick = function() {
alert(BMI);
}
<input type="text" placeholder="Body Mass" id="bodyMass">
<input type="text" placeholder="Body Weight" id="bodyWeight">
<button id="check">CHECK</button>
<div id="result"></div>
You need to calculate the body mass index when the button is clicked, not on page load. By not placing your code inside the event handler, you are calculating everything before any values are entered.
<input type="text" placeholder="Body Mass" id="bodyMass">
<input type="text" placeholder="Body Weight" id="bodyWeight">
<button id="check">CHECK</button>
<div id="result"></div>
<script>
var bodyMass, bodyWeight;
document.getElementById("check").onclick = function() {
bodyMass = parseInt(document.getElementById("bodyMass").value, 10);
bodyWeight = parseInt(document.getElementById("bodyWeight").value, 10);
var BMI = bodyMass / (bodyWeight * bodyWeight);
alert(BMI);
}
</script>
To make sure the value is not NaN before alerting, you use isNaN.
<input type="text" placeholder="Body Mass" id="bodyMass">
<input type="text" placeholder="Body Weight" id="bodyWeight">
<button id="check">CHECK</button>
<div id="result"></div>
<script>
var bodyMass, bodyWeight;
document.getElementById("check").onclick = function() {
bodyMass = parseInt(document.getElementById("bodyMass").value, 10);
bodyWeight = parseInt(document.getElementById("bodyWeight").value, 10);
var BMI = bodyMass / (bodyWeight * bodyWeight);
if(!isNaN(BMI)){
alert(BMI);
} else {
alert("Please enter two valid numbers!");
}
}
</script>
You are getting the values of bodyWeigt and bodyMass even before the button is clicked, at this stage (after parseInt-ing them) they are of course not a number (NaN).
Grab the values on click of the button i.e when the user has (hopefully) entered some valid values...
document.getElementById("check").onclick = function() {
var bodyMass, bodyWeight;
bodyMass = parseInt(document.getElementById("bodyMass").value);
bodyWeight = parseInt(document.getElementById("bodyWeight").value);
var BMI = bodyMass / (bodyWeight * bodyWeight);
alert(BMI);
}
<input type="number" placeholder="Body Mass" id="bodyMass">
<input type="number" placeholder="Body Weight" id="bodyWeight">
<button id="check">CHECK</button>
<div id="result"></div>
Because your input are numeric, you should instead do
<input type="number" placeholder="Body Mass" id="bodyMass">
<input type="number" placeholder="Body Weight" id="bodyWeight">
and place the calculation inside the button click event, else the calculation will get executed once the page loads and you will get a NaN alert.
I'm trying to configure a live caluator based on the Input of a form field.
My problem is, that I simply can not figure out how I would display the result on the Website.
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" />
<span id="member-kosten">
<script type="text/javascript">document.write(ausgabe)</script>
</span>
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
var ausgabe = (calculate);
Use this code:
function fun(){
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
var ausgabe = (calculate);
document.getElementById("member-kosten").innerHTML = ausgabe;
}
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" onkeyup="fun()" />
<span id="member-kosten">
</span>
Set the html of element member-kosten from the script (last line):
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
document.getElementById("member-kosten").innerHTML = calculate;
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input value="10" class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" />
<span id="member-kosten">
</span>
I would like to create similar calculator like here. It calculates the volume of a mulch. Visitor inserts three numbers: width, length and height (thickness) and it tells how much it has to buy.
html:
<form method="post" accept-charset="UTF-8">
<div class="form_area">
<div class="form_fields">
<div class="form_field ">
<label class="form_field_label">Width (m)</label>
<input type="text" value="" name="laius" id="laius" rel="calc" class="form_field_textfield form_field_size_medium">
</div>
<div class="form_field ">
<label class="form_field_label">Length (m)</label>
<input type="text" value="" name="pikkus" id="pikkus" rel="calc" class="form_field_textfield form_field_size_medium">
</div>
<div class="form_field ">
<label class="form_field_label">Thickness (cm)</label>
<input type="text" value="" name="paksus" id="paksus" rel="calc" class="form_field_textfield form_field_size_medium">
</div>
<div class="form_field ">
<label class="form_field_label">Total (m<sup>3</sup>)</label>
<input type="text" value="" readonly name="kokku" id="kokku" class="form_field_textfield form_field_size_small">
</div>
</div>
<div class="form_submit">
<input type="submit" value="Arvuta" id="calc_submit" name="commit">
</div>
</div>
</form>
javascript:
! function($) {
$(function() {
$("[rel='calc']").arvutus();
});
$.fn.arvutus = function() {
var inputs = $(this);
var kokku = $("#kokku:first");
inputs.bind("change keyup", function() {
var obj = $(this);
if (obj.val() !== "") {
parseFloat(obj.val()).toFixed(2);
};
arvuta();
});
$("#calc_submit").bind("click", function(e) {
e.preventDefault();
arvuta();
});
function arvuta() {
var width = inputs.filter("#laius").val();
width = width.toString();
width = width.replace(",", ".");
var lenght = inputs.filter("#pikkus").val();
lenght = lenght.toString();
lenght = lenght.replace(",", ".");
var thickness = inputs.filter("#paksus").val();
thickness = thickness.toString();
thickness = thickness.replace(",", ".");
thickness = thickness / 100;
var sum = width * lenght * thickness
sum = sum.toFixed(2);
kokku.val(sum + " m3 multši.");
};
};
}(window.jQuery);
I inserted html and javascript into jsfiddle, but mine doesn't work. Probably i miss something very obvious. some more javascript?
update: a little while ago, somebody provided a working code, but moderator removed it so quickly i couldn't copy it... :(
The code parseFloat(obj.val()).toFixed(2) returns a value, but you're not doing anything with it. Should it be stored somewhere so you can use it in calculating the volume?
i have a simple script, which calculates for example: eggs based on the inputs/divided by a predefined number with a conditional checkbox to change the divided number. What i would like is to show/span links next to the results output, which are conditinal based on the result.
For example:
if a result is less than 30, span link 1
if a result is more than 30 and below 50, span link 2
if a result is more than 50 and below 70, span link 3
if a result is more than 70, span link 4
Current layout: JsFiddle
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
var myBox3 = document.getElementById('box3').value;
var result = document.getElementById('result');
var divide = (document.getElementById('changeValue').checked ? 35 : 25);
var myResult = myBox1 * myBox2 * myBox3 / divide;
result.value = myResult.toFixed(2) + ' eggs';
}
<input type="text" id="box1" oninput="calculate()" />
<input type="text" id="box2" oninput="calculate()" />
<input type="text" id="box3" oninput="calculate()" />
<input id="result" />
<br />
<br />
<br />
<input type="checkbox" name="changeValue" id="changeValue" />
<label for="changeValue">Divide with 35</label>
Any help aprriciated, thanks.
Add all the spans to your HTML, but hide them initially. Then use an if statement to show the one you want.
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
var myBox3 = document.getElementById('box3').value;
var result = document.getElementById('result');
var divide = (document.getElementById('changeValue').checked ? 35 : 25);
var myResult = myBox1 * myBox2 * myBox3 / divide;
var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
links[i].style.display = "none";
}
var linkToShow;
if (myResult < 30) {
linkToShow = 0;
} else if (myResult < 50) {
linkToShow = 1;
} else if (myResult < 70) {
linkToShow = 2;
} else {
linkToShow = 3;
}
links[linkToShow].style.display = "inline";
result.value = myResult.toFixed(2) + ' eggs';
}
.link {
display: none;
}
<input type="text" id="box1" oninput="calculate()" />
<input type="text" id="box2" oninput="calculate()" />
<input type="text" id="box3" oninput="calculate()" />
<input id="result" />
<a class="link" href="link-1">link-1</a>
<a class="link" href="link-2">link-2</a>
<a class="link" href="link-3">link-3</a>
<a class="link" href="link-4">link-4</a>
<br />
<br />
<br />
<input type="checkbox" name="changeValue" id="changeValue" />
<label for="changeValue">Divide with 35</label>