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>
Related
I am trying to display #output value into another input field so far I found
this -> http://jsbin.com/oleto5/5/edit?html,js,output
here you can see when type into input field showing entered data into < div> which id=output <input id="txt" type="text" />
what I am looking to achieve: 1 - Changes in html- I am looking to show #output as a value into another input field like this <input id="output" type="text" />
2 - Changes in script - I also want to do changes in calculation i have php variable named $final_rate for, i want to "Output" deivide by php variable $final_rate
Expected Code Example
<body>
<input id="txt" type="text" />
<input id="output" type="text" value=""/>
</body>
<?php $final_rate = "121";?>
<script>
$(function(){
$('#txt').keydown(function(){
setTimeout(function() {
$('#output').text($('#txt').val());
}, 50);
});
});
</script>
in above example if we enter 10000 in #txt input field we should get an out of 82.644 in simple words "10000/121 = 82.644"
<body>
<input id="txt" type="text" />
<input id="output" type="text" value=""/>
<script>
//put the value in a javascript variable as a Number
var finalRate = <?php echo "121"; ?>;
$(function(){
//bind on the input event, which happens any time the value of the input changes
$('#txt').on('input', function(e){
//console log the rate just for debugging
console.log(finalRate);
//console log the math just for debugging
console.log(parseFloat(e.target.value)/finalRate);
//turn the value in the input into a Number, and perform the math
$('#output').val(parseFloat(e.target.value)/finalRate);
});
});
</script>
</body>
//put the value in a javascript variable as a Number
var finalRate = 121;//'<?php echo "121"; ?>;
$(function() {
//bind on the input event, which happens any time the value of the input changes
$('#txt').on('input', function(e) {
//console log the rate just for debugging
console.log(finalRate);
//console log the math just for debugging
console.log(parseFloat(e.target.value) / finalRate);
//turn the value in the input into a Number, and perform the math
$('#output').val(parseFloat(e.target.value) / finalRate);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" />
<input id="output" type="text" value="" />
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
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
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;
}
}
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>