So I have some basic code in html here, i just have two textbox which u can type numbers in and when you click the button, it adds em both up, and in a perfect world, it would display the answer in that third textbox.
<html>
<head>
</head>
<script type="text/javascript">
function myfunction()
{
var first = document.getElementById("textbox1").value;
var second = document.getElementById("textbox2").value;
var answer = +first + +second;
var textbox3 = answer;
}
</script>
<body>
<input type="text" name="textbox1" id="textbox1" />
+
<input type="text" name="textbox2" id="textbox2" />
<input type="submit" name="button" id="button1" onclick="myfunction()" value="=" />
<input type="text" name="textbox3" id="textbox3" readonly="true"/>
<br />
Your answer is: --
</body>
</html>
however, i can't get the answer to display in that textbox3. Does anyone know how to assign a value to that third textbox from a variable?
also, as an added bonus, if anyone knows a way to also make the last line "Your answer is: --" display the answer as well, that would be amazing.
function myfunction() {
var first = document.getElementById("textbox1").value;
var second = document.getElementById("textbox2").value;
var answer = parseFloat(first) + parseFloat(second);
var textbox3 = document.getElementById('textbox3');
textbox3.value = answer;
}
<input type="text" name="textbox1" id="textbox1" /> + <input type="text" name="textbox2" id="textbox2" />
<input type="submit" name="button" id="button1" onclick="myfunction()" value="=" />
<br/> Your answer is:--
<input type="text" name="textbox3" id="textbox3" readonly="true" />
You're on the right track with using document.getElementById() as you have done for your first two text boxes. Use something like document.getElementById("textbox3") to retrieve the element. Then you can just set its value property: document.getElementById("textbox3").value = answer;
For the "Your answer is: --", I'd recommend wrapping the "--" in a <span/> (e.g. <span id="answerDisplay">--</span>). Then use document.getElementById("answerDisplay").textContent = answer; to display it.
Even if this is already answered (1 year ago) you could also let the fields be calculated automatically.
The HTML
<tr>
<td><input type="text" value="" ></td>
<td><input type="text" class="class_name" placeholder="bla bla"/></td>
</tr>
<tr>
<td><input type="text" value="" ></td>
<td><input type="text" class="class_name" placeholder="bla bla."/></td>
</tr>
The script
$(document).ready(function(){
$(".class_name").each(function(){
$(this).keyup(function(){
calculateSum()
;})
;})
;}
);
function calculateSum(){
var sum=0;
$(".class_name").each(function(){
if(!isNaN(this.value) && this.value.length!=0){
sum+=parseFloat(this.value);
}
else if(isNaN(this.value)) {
alert("Maybe an alert if they type , instead of .");
}
}
);
$("#sum").html(sum.toFixed(2));
}
Related
#for (int i = 0; i < ViewBag.Count; i++) {
<tbody>
<tr>
<td> <input type="text" required readonly name="emp[#i].Total_Marks" value="#ViewBag.Total" class="form-control" id="tm" /></td>
<td> <input type="number" required name="emp[#i].Obtained_Marks" class="form-control" id="ob" /></td>
<td> <input type="number" required name="emp[#i].Percentage" class="form-control" id="percentage" onfocus="calcper()" /></td>
<td> <textarea cols="10" required rows="1" name="emp[#i].Remarks" class="form-control"></textarea></td>*
</tr>
</tbody>
}
function calculatePercentage() {
ab = $("#tm").val();
sb = $("#ob").val();
ntb = parseInt(sb) / parseInt(ab) * 100;
console.log(ntb);
document.getElementById("percentage").value = ntb;
}
I am new to mvc 5 and javascript/jQuery please help me how can I use this jQuery function in percentage in every input type which is created by loop but their id is same
As you said you need to call a function on your percentage textbox.
Let me tell you one thing assigning a same Id to a element is bad practice but you can have same name.
Recommend you to use common class attribute or common name attribute
<input type="text" name="percentage1" id="percentage1" class="percentage">
That you can consider as a empty class which will help you for your script operations
eg:
<html>
<head>
<script>
$('.percentage').keypress(function(){
alert('I called');
});
</script>
</head>
<BODY>
<input type="text" name="percentage1" id="percentage1" class="percentage" />
<input type="text" name="percentage2" id="percentage2" class="percentage"/>
<input type="text" name="percentage3" id="percentage3" class="percentage"/>
</BODY>
</HTML>
In the above code I have three textbox where it is pointed to same function which will show alert box.
In your case just apply the emp[#i] to the Id also and have a common class name or have a common name attribute which will help you.
Happy coding.
I have many textboxes in a form where I am inserting numeric values and getting total of all the fields. There are 4 total textboxes and 1 grandtotal textbox. Currently I am able to get all the total textboxes values but, I am confused how to get sum of all the total textbox values in the Grand total textbox using Jquery or javascript.
Here is my html and js in a fiddle
Do let me know how to do this
Just set the value of the textbox to the result of adding the other values:
document.getElementById("grand-textbox-id").value = value1 + value2 + value3;
If you want to make it do it automatically, add a change event handler to all the inputs:
var calculateSum = function() {
document.getElementById("grand-textbox-id").value = value1 + value2 + value3;
};
document.getElementById("input-1").onchange = calculateSum;
document.getElementById("input-2").onchange = calculateSum;
document.getElementById("input-3").onchange = calculateSum;
Please Try Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".total").keyup(function(){
var first=0,second=0,third=0,fourth=0;
if($("#text1").val()!="")
{
first=$("#text1").val();
}
if($("#text2").val()!="")
{
second=$("#text2").val();
}
if($("#text3").val()!="")
{
third=$("#text3").val();
}
if($("#text4").val()!="")
{
fourth=$("#text4").val();
}
$("#grand").val( parseInt(first)+ parseInt(second)+ parseInt(third)+ parseInt(fourth));
});
});
</script>
<style tupe="text/css">
.total
{
}
</style>
First val <input type="text" class="total" id="text1" value="" /><br />
second val <input type="text" class="total" id="text2" value="" /><br />
Third val <input type="text" class="total" id="text3" value="" /><br />
Fourth val <input type="text" class="total" id="text4" value="" /><br />
Grand val <input type="text" class="" id="grand" value="" readonly />
Here is what I am trying to achieve, but for some reason, it does not work:
Javascript:
<script type="text/javascript">
function calculate() {
var n1 = getElementById("1").value
var n2 = getElementById("2").value
var answer = n1+n2
alert(answer)
}
</script>
HTML:
<form id="form">
<input id="1" type="text" />
<input id="2" type="text" />
<input type="button onClick="calculate()" value="Go" />
</form>
I am not sure where I went wrong, Can someone help please?
You shouldn't start ID's with numbers - in HTML4 and CSS it isn't allowed, in HTML5 it is allowed, but it's not good practice to do so.
Also, in this context it is illegal in HTML5 - as an ID starting with a number requires at least one letter afterwards.
So, firstly replace the numbered ID's with letters/words.
Apart from this, you need to fix the syntax errors mentioned below:
Replace getElementById("id").value with document.getElementById("id").value;
and also replace <input type="button onClick="calculate()" value="Go" />
with <input type="button" onClick="calculate()" value="Go" /> (notice there was a closing " missing for "button").
Here is a working jsFiddle.
Here is the code used in the jsFiddle:
Javascript:
function calculate() {
var n1 = document.getElementById("aItem").value;
var n2 = document.getElementById("bItem").value;
var answer = n1+n2;
alert(answer);
}
HTML:
<form id="form">
<input id="aItem" type="text" />
<input id="bItem" type="text" />
<input type="button" onClick="calculate()" value="Go"/>
</form>
HTML:
<input id="val1" type="text" value="100" />
<input id="val2" type="text" value="200"/>
<input type="button" onclick="calculate()" value="Go" />
JavaScript:
function calculate() {
var n1 = +(document.getElementById("val1").value);
var n2 = +(document.getElementById("val2").value);
var answer = n1+n2;
alert(answer);
}
This will add the 2 numeric values entered rather than concatenating them.
The problem: I have a page with many <input> fields (just say all are text fields)
I would like to have a button, when click on it, all input fields will become plaintext only.
e.g. <input type="text" value="123" /> becomes 123
and if I click on another button, the text will change back to
e.g. 123 becomes <input type="text" value="123" />
Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.
Thank you!
Edited
Seems you guys are getting the wrong idea.
Read what I have written again: e.g. <input type="text" value="123" /> becomes 123
I have value="123" already, why would I want to set the value again???
What I want is e.g.
<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>
Use this to go one way,
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});
and this to go the other.
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
Check this link http://jsfiddle.net/Evmkf/2/
HTML:
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>
Javascript:
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
Try this FIDDLE
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();
Suppose an entry is made in a textbox. Is it possible to retain the same entered text in a second text box? If so, how is this done?
<html>
<label>First</label>
<input type="text" name="n1" id="n1">
<label>Second</label>
<input type="text" name="n1" id="n1"/>
</html>
<script>
function sync()
{
var n1 = document.getElementById('n1');
var n2 = document.getElementById('n2');
n2.value = n1.value;
}
</script>
<input type="text" name="n1" id="n1" onkeyup="sync()">
<input type="text" name="n2" id="n2"/>
More efficiently it can be done as :
For the one who will see the post now should use best practices of javascript.
<script>
function sync(textbox)
{
document.getElementById('n2').value = textbox.value;
}
</script>
<input type="text" name="n1" id="n1" onkeyup="sync(this)">
<input type="text" name="n2" id="n2"/>
<html>
<script type="text/javascript">
function copy()
{
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
n2.value = n1.value;
}
</script>
<label>First</label><input type="text" name="n1" id="n1">
<label>Second</label><input type="text" name="n2" id="n2"/>
<input type="button" value="copy" onClick="copy();" />
</html>
Well, you have two textboxes with the same ID. An Id should be unique, so you should prbably change this.
To set the value from one text box to another a simple call to getElementById() should suffice:
document.getElementById("n1").value= document.getElementById("n2").value;
(assuming, of course you give your secodn text box an id of n2)
Tie this up to a button click to make it work.
This worked for me and it doesn't use JavaScript:
<form name="theform" action="something" method="something" />
<input type="text" name="input1" onkeypress="document.theform.input2.value = this.value" />
<input type="text" name="input2" />
</form>
I found the code here
Use event "oninput". This gives a more robust behavior. It will also trigger the copy function when you copy paste.
You can this way also used copy contents of one textbox to another
function populateSecondTextBox() {
document.getElementById('txtSecond').value = document.getElementById('txtFirst').value;
}
<label>Write Here :</label>
<input type="text" id="txtFirst" onkeyup="populateSecondTextBox();" />
<br>
<label>Will be copied here :</label>
<input type="text" id="txtSecond" />