Very Basic Math Script Using AJAX? - javascript

I wanna ask if is it possible to do very basic math inside form's input text field using AJAX? I know its possible with javascript/jquery but I don't want to having to clicking submit button and reload the page to see the result. I want the math calculation with instant result inside the input text field.
example:
Input Text Field 1 + Input Text Field 2 = (Shows Instant Result in Input Text Field 3)

You may do the following
http://jsfiddle.net/dharam1987/L9evdhkk/
Val 1 <input type="text" name="f1" id="f1" /> <br />
Val 2 <input type="text" name="f2" id="f2" /> <br />
Result <input type="text" name="res" id="res" /> <br />
<input type="button" value="Add" onclick="calculate();" />
<script>
function calculate() {
var f1 = parseInt(document.getElementById('f1').value);
var f2 = parseInt(document.getElementById('f2').value);
var res = f1 + f2;
document.getElementById('res').value = res;
}
</script>

You can do that using javascript/jQuery. Ajax has nothing to do with it. Use a change or keypress event.
This should give you the idea:
$("myInputSelector").on("keyup", function () {
var theTwoSelectors = $("myInputSelector"),
total = 0;
theTwoSelectors.each(function () {
var value = $(this).val();
if(value)
total += parseInt(value);
});
$("myResultSelector").val(result);
});

You can use this simple HTML
Lets try an Example for the above requirement
example:
We can simply use the tag
here the below output tag will show the result of input tag "a" value multiply by 5...
<form oninput="o.value = parseInt(a.value) *5">
<input type="number" id="a" name="a">
<output name="o" id="o"></></output>
</form>
more information please refer this link http://www.w3schools.com/tags/tag_output.asp

Related

Unable to display value in an html field

I'm working in a script editor within Sharepoint, trying to just grab two input field values and display the sum when I click a calculate button. I've been following a number of guides on here and can't find where I've gone wrong. Nothing displays in the result text box.
First number: <input type="text" name="input1"/>
Second number: <input type="text" name="input2"/><br><br>
<input type="button" value="Calculate" onclick="add_number();"/>
<input type="text" name="display"/>
<script type="text/javascript">
function add_number() {
var first_number = document.getElementByID('input1').value;
var second_number=document.getElementByID('input2').value;
var result = parseInt(first_number) + parseInt(second_number);
document.getElementByID('display').value = result;
}
</script>

calculate two input field values in javascript

Hi i want to calculate two input field values and result will show in third input field so i want to write code in ajax page
<input id="a1" type="text" />
<input id="a2" type="text" onblur="Calculate();" />
<input id="a3" type="text" name="total_amt" value="" />
here javascript function
<script>
function Calculate()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value=parseInt(resources) * parseInt(minutes);
document.form1.submit();
}
</script>
starting its working but nw its not working please help me
Thanks in Advance
Look this! Work it.
http://jsfiddle.net/op1u4ht7/2/
<input id="a1" type="text" />
<input id="a2" type="text" onblur="calculate()" />
<input id="a3" type="text" name="total_amt" />
calculate = function()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)*parseInt(minutes);
}
Try AutoCalculator https://github.com/JavscriptLab/autocalculate Calculate Inputs value and Output By using selector expressions
Just add an attribute for your output input like data-ac="(#firstinput+#secondinput)"
No Need of any initialization just add data-ac attribute only. It will find out dynamically added elements automatically
FOr add 'Rs' with Output just add inside curly bracket data-ac="{Rs}(#firstinput+#secondinput)"
My code is from an answer above. Special thank for you!
calculate = function (a, p, t) {
var amount = document.getElementById(a).value;
var price = document.getElementById(p).value;
document.getElementById(t).value = parseInt(amount)*parseInt(price);}
<input type="number" id="a0" onblur="calculate('a0', 'p0', 't0')">
<input type="number" id="p0" onblur="calculate('a0', 'p0', 't0')">
<input type="number" id="t0" >
<hr>
<input type="number" id="a1" onblur="calculate('a1', 'p1', 't1')">
<input type="number" id="p1" onblur="calculate('a1', 'p1', 't1')">
<input type="number" id="t1" >
put in you form id="form1"
the JavaScript is look like this.
calculate = function()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)*parseInt(minutes);
document.form1.submit();
}

Javascript Add input value within characters in output

I've tried to make A input text box & an output text box with a convert button where, if someone clicks the convert button, the input must be displayed in the output box with some change. but it didn't work.
For example,
If the input is "something"
The output should be "##:{something}0"
that is , input value must be present within the characters i specify.
Can someone get me the code for this?
Here's my code so far:
function ConvertText() {
document.form1.outstring.value = document.form1.instring.value.to##{
instring.value}0();
}
<form name="form1" method="post"> <input name="instring" type="text" value="" size="50">
<input type="button" name="Convert" value="Convert" onClick="ConvertText();">
<input name="outstring" type="text" value="" size="50">
</form>
Without spilling all the code. Here is some JavaScript of how to get the value of an input field and make some modifications. And then how to set that string to the value of the output field.
In your html
<input id="first"></input>
<input id="output"></input>
In your javascript (The event is not included)
document.getElementById('first').value
And you can append some stuff to that string.
var string = document.getElementById('first').value
var newString = "##:{"+string+"}0"
And.. heres what you want.
document.getElementById('output').value = newString
Hope this helps, let me know if you have trouble.
Try like this
​<input type="text" id="box1"><br/>
<input type="text" id="box2"><br/>
<input type='button' onclick='convert()' value='convert'>
​function convert() {
var value1=document.getElementById('box1').value;
document.getElementById('box2').value = '##:{'+value1+'}0';
}​
Demo

How to get the difference of two numbers from the input box without page submittal using Codeigniter?

I have three input boxes, of which two are for entering values (any number) and one is for getting results (the difference of the two). How can I get the result without using page submission using Codeigniter?
You can use jQuery for that.
<input type="text" id=first" name="firstInput" />
<input type="text" id="second" name="secondInput" />
<input type="text" id="third" name="thirdInput" />
//jquery
$(document).ready(function() {
var first = parseInt($("#first").val(), 10);
var second = parseInt($("#second").val(), 10);
var thirdVal = first - second;
$("#third").val('');
$("#third").val(thirdVal);
});
Hope it helps
without exactly knowing how the result is being called you could use on onblur on the second number input/ first.
<input name="number" id="num_0" type="text" />
<input name="number" id="num_1" type="text" onblur="getResult()" />
<input name="number" id="num_2_result" type="text" />
script to get result derived for num_0 and num_1
function getResult(){
var number = document.getElementsByName('number');
var result = parseInt(number[0].value,10) - parseInt(number[1].value,10);
// if is a number display reuslt
if(!isNaN(result)){
number[2].value = result;
}
}

When working with a form element how would you access what was input into the element to display a message?

I have a form
<form>
<input id="input" type="number">
<input type="submit">
</form>
I want to be able to input a number into the number and click the submit button and javascript displays a number based on the number submitted.
(My Guess is that this question is very basic but I am pretty knew to javascript.)
Here is a very simple (jquery-less) example of what you might be after:
<script type="text/javascript">
function ShowANumber() {
var currentNumber = document.getElementById("input").value;
var newNumber = currentNumber * 10 // Do something with input
document.getElementById("result").innerHTML = newNumber;
return false; // Stop form submit
}
</script>
<form onsubmit="return ShowANumber();">
<input id="input" type="text"/>
<input type="submit"/>
</form>
<div>Result: <span id="result"></span></div>

Categories