I am looking to build a webpage that submits into a database (.asp) but also calculates a percentage.
The percentage amount is 8%.
Ideally I want the user to type an amount in an input box (for example lets say £100)
Then underneath there is another input box which automatically caluates the £100 + 8% (so £108)
I haven't got a clue how to start so I haven't got any code
Live jsFiddle: http://jsfiddle.net/5mB3Q/
This is your jQuery:
$("#val").on('keyup', function(){
$("#incPerc").text(parseInt($(this).val())*1.08);
});
you might want to use a library to limit the input to digits only.
something like this: Limit Textfield Input to digits only
added the second input http://jsfiddle.net/5mB3Q/1/
and the round of two digits:
$("#val").on('keyup', function(){
var withPerc = parseFloat($(this).val())*1.08;
$("#incPerc").text(withPerc.toFixed(2));
$("#otherInput").val(withPerc.toFixed(2));
});
edit: ok, full code because of the comment:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<form>
<input id="val">
<input id="otherInput">
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#val").on('keyup', function(){
var withPerc = parseFloat($(this).val())*0.08;
$("#incPerc").text(withPerc.toFixed(2));
$("#otherInput").val(withPerc.toFixed(2));
});
});
</script>
</body>
</html>
You forgot the protocol when you linked the jQuery lib. (and doc.ready)
$('#output').text = (int)($('#input').text.Substring(0, $('#input').text.Length - 1)) * 1,08 + $('#input').text.Substring($('#input').text.Length - 1);
Related
I am trying to write a couple of simple js functions and the first one (and the most simple one) doesn't seem to work. this one is my html page, I have no css.
FunctionLib.js is my file and other script imports jquery(it worked perfectly in my other project)
I just need to show the answer of the function squareSum after the button is clicked.
<!DOCTYPE html>
<html lang="en">
<!-- МЕТА-ІНФОРМАЦІЯ -->
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/FunctionLib.js"></script>
</head>
<body>
<div class="square-sum">
<form name="mathematics">
Enter х: <input type="number" id="x-square"> <br>
Enter y: <input type="number" id="y-square"> <br>
<button onclick="squareSumContainer()">OK</button>
</form>
<p>x^2+y^2 = <span id="square-answer"></span></p>
</div>
</body>
</html>
and my js file:
function squareSum(a, b) {
return a * a + b * b;
}
function squareSumContainer() {
var x = parseInt($('#x-square').html(), 10);
var y = parseInt($('#y-square').html(), 10);
$("#square-answer").html(squareSum(x, y));
//document.getElementById("square-answer").innerHTML = myFunction(4, 3);
var answer = squareSum(x, y);
//alert(answer);
}
And when I press the button nothing happened. I tried using alert to show the answer and it appeared to be NaN.
I am extremely new to js so I don't know what to do at all.
So as #Bravo and #freedomn-m said, the problem was in the part where I tried to use .html() on input instead of .val()
I am using a very simple code to bind the user text input to the model.
The text box prompts the user to enter the name & says hello "username" on enter.
But I also want Hello to appear only when the user enters the name.
Can anyone help me with that. Currently Hello is present by default.
ui page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="../js/prac_controller.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>prac_one</title>
</head>
<body ng-app>
<div ng-controller="pracOne">
Enter the name<br>
<input type="text" ng-model="message.text"/>
<p>Hello, {{message.text}}</p>
</div>
</body>
</html>
controller
function pracOne($scope)
{
$scope.message={text:""};
}
<p>{{message.text ? 'Hello, ' + message.text : message.text}}</p>
Or
<p>{{message.text && 'Hello, '+message.text || message.text}}</p>
Update: You can use ngShow if you want to conditionally display an element:
<p><span ng-show="message.text != ''">Hello, </span>{{message.text}}</p>
How do I get a variable in an iframe from the parent if I do not know how many iframes are on the parent page and the order of the one in question. For instance, I know the iframe in question is the second one, so I can select windows.frames[1]. But if I didn't know know it was the second one, how would I select it by ID.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#getValues').click(function(){
//This works, but I don't want to select the iframe by the number since I don't know it.
console.log(
window.frames[1],
window.frames[1].window,
window.frames[1].window.getMe
);
console.log(
window.frames['myIFrame'],
window.frames['myIFrame'].document,
window.frames['myIFrame'].window,
document.getElementById('myIFrame'),
document.getElementById('myIFrame').window
);
});
});
</script>
</head>
<body>
<button id="getValues">getValues</button>
<div><iframe src="otherIframe.html"></iframe></div>
<!-- iframe3_get.html only sets global variable getMe to something. -->
<div><iframe id="myIFrame" src="iframe3_get.html"></iframe></div>
</body>
</html>
In the bellow example, getM1 and getMe2 will be equal. This doesn't seem to be a very good answer, but it is the only one I have. If it is a bad answer and you elect to vote it down, please provide a better answer.
$('#getValues').click(function(){
var getMe1=window.frames[1].window.getMe;
for (var i = window.frames.length - 1; i >= 0; i--) {
if(window.frames[i].frameElement.id=='myIFrame'){
var getMe2=window.frames[i].frameElement.getMe;
break;
}
}
});
I'm trying to display data in a table format. The table however needs to be dynamic, so it will accommodate more or less rows, depending on the data list shown. I would love to do it with Raphael.js, so I can mess with effects, but plain Jane is good enough now. An example with two rows and two columns will suffice.
Now, I know how to create a static table in HTML inside a div, but I need this to overlay an existing page with JavaScript.
All I was able to do so far is this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TESTING CODE</title>
<script language="JavaScript" type="text/javascript">
function routeIt (kontent, zPath) {
if (zPath == 'Meeting') {
var ta1 = document.createElement('div');
ta1.setAttribute("name","travel");
ta1.setAttribute("id","mobile");
ta1.setAttribute("style","position:float");
ta1.setAttribute("id","mobile");
ta1.setAttribute("width","600");
ta1.setAttribute("height","100");
ta1.setAttribute("left","120");
ta1.setAttribute("top","320");
document.getElementById.('mobile').innerHTML = 'This venerable day of march the 42nd I pledge to uphold the traditions of all the welders...';
}
</script>
</head>
<body>
<a class="linqs" href="javascript:routeIt('Hello','Meeting') "><span title="Make comments about the Meeting...">Meetings</span></a>
<a class="linqs" href="javascript:routeIt('Tzigane','Resolution')"><span title="Make comments about your Portfolio...">Portfolio</span></a>
<a class="linqs2" href="javascript:routeIt('Kratt','SendEmail') "><span title="Emails from ...">Email</span></a>
</body>
</html>
The last line does not work and the DIV or the contents do not show up... but it does not err in creating the DIV. So, I'm not even able to get the DIV to come up!
The data lists are coming in as follows:
zList1 = [['zebra','24'],['cat','153'],['paycheck','$123.56']]
zList2 = [['Wine','gloogloo'],['cereal','bowl'],['garage','three cars']]
Any help would be appreciated...
Dennis
Here is The Bug Fixed code: Try and post the comment,
function routeIt (kontent, zPath) {
if (zPath == 'Meeting') {
var ta1 = document.createElement('div');
ta1.setAttribute("name","travel");
ta1.setAttribute("id","mobile");
ta1.setAttribute("style","position:float");
ta1.setAttribute("id","mobile");
ta1.setAttribute("width","600");
ta1.setAttribute("height","100");
ta1.setAttribute("left","120");
ta1.setAttribute("top","320");
document.getElementById("bodyID").appendChild(ta1);
document.getElementById.('mobile').innerHTML = 'This venerable day of march the 42nd I pledge to uphold the traditions of all the welders...';
}
}
add id="bodyID" to the the body tag definition.
Cheers, Arun
I have made a Language Translator but that translates hard coded strings in a html page using java script. I would to make it flexible by allowing user enter a string into a textbox/textarea and my app can then translate it for the user.
Any help would be appreciable :)
Heres my code: (please note to enter your own API key)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var content = document.getElementById('content');
// Setting the text in the div.
content.innerHTML = '<div id="text">Hola, me alegro mucho de verte.<\/div><div id="translation"/>';
// Grabbing the text to translate
var text = document.getElementById("text").innerHTML;
// Translate from Spanish to English, and have the callback of the request
google.language.translate(text, 'es', 'en', function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="content">Loading...</div>
</body>
</html>
You can use the google translate api
You can make calls to the api and get a translated version. Refer this
Put this in html
<button type="button" onclick="initialize()">Translate</button>
And this in your initialize function if content is a textbox
content.value = "your translated text"
This will change your text in the same box