This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Addition is not working in JavaScript
In an attempt to learn some java script, I'm trying to build a simple system that adds values when buttons are clicked..
The following code works, but will only add the hardcoded value of +100, can anyone help me change this code so it adds the value nested in the id="add" button?
<html>
<head>
<title>Input tutorial</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
$(function () {
$("#add").click(function() {
$("#total").val(parseInt($("#total").val()) + 100)
});
});
</script>
</head>
<body>
<input type="button" value="12" id="add">
<input type="button" value="14" id="total">
</body>
</html>
Any help would be great! Thank you.
Just replace the hardcoded value of 100 by the value you want:
$("#total").val(parseInt($("#total").val()) + parseInt($("#add").val()) )
<html>
<head>
<title>Input tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
window.onload = function() {
$('#add').bind('click', function () {
$("#total").val(parseInt($("#total").val()) + parseInt($("#add").val()) + 100);
});
}
</script>
</head>
<body>
<input type="button" value="12" id="add">
<input type="button" value="0" id="total">
</body>
</html>
Related
This question already has answers here:
How to get a number value from an input field?
(4 answers)
Closed 5 months ago.
Here is my code
<html>
<head>
head
<title>title</title>
</head>
<script>
var val1 = parseInt(document.getElementById('input1'));
function bytton()
{
window.alert(val1);
}
</script>
<body>
<br>
<input type="number" id="input1"/>
<br>
<button type="button" onclick="bytton()">value of val1</button>
</body>
</html>
It runs properly without any problem.
At the input field i write a number in it and then click on the button but then it displays that the value is NaN,I think the value is not getting assigned to val1.
<html>
<head>
head
<title>title</title>
</head>
<script>
function bytton() {
window.alert(document.getElementById("input1").value);
}
</script>
<body>
<br>
<input type="number" id="input1"/>
<br>
<button type="button" onclick="bytton()">value of val1</button>
</body>
</html>
I was asked to develop a web page without a mouse.
The keyboard cursor must be in the input area(example: <input id="input-label" type="text">) immediately when the page is changed.
I tried,
document.querySelector("#input-area").focus();
and
document.querySelector("#input-area").select();
It works with buttons, but does not work in DOMContentLoaded.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector("#input-area").select();
});
How can I solve it?
try this, call it when dom is ready
$(document).ready(function () {
$("#input-area").focus();
});
OR
<input id="input-area" autofocus="autofocus" />
OR
$(function() {
$("#input-area").focus();
});
Try this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#myAnchor').click(function() {
$('#mustfocus').focus();
});
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
How about this one which triggers only during DOM is ready:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#mustfocus').focus();
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
This question already has answers here:
jQuery: get the file name selected from <input type="file" />
(8 answers)
Closed 5 years ago.
Below in the code the vanilla javascript version works fine but the jQuery one I tried to code does not produce the update to the input's text. What error is there in the jQuery one as I cannot seem to spot it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Total Tutor </title>
<link type="text/css" rel="stylesheet" href="query.css">
<script src="../jquery.js"></script>
</head>
<body>
<div id="main">
<button class="fileUpload">
<input id="uploadBtn" type="file" class="upload">
</button>
<input id="uploadFile" placeholder="0 files selected" disabled="disabled">
</div>
</body>
</html>
<script>
$("#uploadBtn").change(function() {
var value = $(this).val();
$("#uploadFile").val(value);
});
//this works fine
// document.getElementById("uploadBtn").onchange = function () {
// document.getElementById("uploadFile").value = this.value;
// };
</script>
Please try this :
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
alert(fileName);
// do whatever you want to do with file name
});
});
I have a code-
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function testFunction(){
var stringCode = '#abc[0][0]';
console.log(stringCode);
result = $(stringCode).val();
console.log(result);
}
</script>
</head>
<body>
<input type="hidden" id="abc[0][0]" value="5" readonly="true/">
<input type="button" onClick="testFunction()"/>
</body>
</html>
My Main problem is-
When i click the button and look to browser console so i get undefined
as result of console.log(result). How to fix it so the code can show 5
as the result not undefined ?
Thank you.
You can do it like below (In jquery which is used in your code):-
function testFunction(){
result = $('input[id ="abc[0][0]"]').val();
console.log(result);
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<input type="hidden" id="abc[0][0]" value="5" readonly="true/">
<input type="button" onClick="testFunction()" value = "ClickMe!"/>
</body>
</html>
Note:-
This is called [attribute=value] selector
Check all available different selectors
If things are simple then try simple way
function testFunction(){
var f = document.getElementById("abc[0][0]");
result = f.value;
console.log(result);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="hidden" id="abc[0][0]" value="5" readonly="true/">
<input type="button" onClick="testFunction()" value = "ClickMe!"/>
</body>
</html>
I am trying to use ajax but it is not working when I clicks the button it does not show the alert box on browser.
<html>
<head>
<title>Ajax</title>
<script scr="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="data">
<input type="submit" id="sub" value="save">
<script>
$(document).ready(function () {
$('#sub').click(function () {
alert('ok');
});
});
</script>
</body>
</html>
Please try the below code
<html>
<head>
<title>Ajax</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('#sub').click(function(){
alert('ok');
});
});
</script>
</head>
<body>
Name: <input type="text" id="data" >
<input type="submit" id="sub" value="save">
</body>
</html>
1. problem with the jquery path
2. always put the scripts in the head section