I need some help putting together a line of javascript. I Am looking to add the values of two different fields and display them in a text area. The fields are "AP" and "MP" and the text are is "TotalCost".
I am not sure of how to make his happen at all. Please help!
HTML:
<input name="AP" />
<input name="MP" />
<textarea name="TotalCost" rows="4" cols="20"></textarea>
<button>Add</button>
jQuery:
$(document).ready(function(){
$("button").click(function(){
$("textarea[name='TotalCost']").val($("input[name='AP']").val()+$("input[name='MP']").val());
});
});
Working fiddle
So something like:
<input id="AP" />
<input id="MP" />
<input id="TotalCost" />
<button onclick="add()">Add</button>
<script>
function add()
{
var ap = +document.getElementById('AP').value; // Value of AP (plus will cast the value to a number)
var mp = +document.getElementById('MP').value; // Value of MP
document.getElementById('TotalCost').value = ap + mp; // Set TotalCost to ap + mp
}
</script>
If you wanted to use jQuery, you could do something like this:
<button id="btnAdd">Add</button>
<script>
$('#btnAdd').click(function ()
{
var ap = +$('#AP').val();
var mp = +$('#MP').val();
$('#TotalCost').val(ap + mp);
});
</script>
Related
Hello and happy new year to everyone :D.
I am currently trying to develop a way to add and delete an input from a form using javascript and jquery.
The problem is i am not familiarized with declaring functions on jquery so I beg for your help because I currently ran out of ideas.
I currently have this.
So the idea is to have 4 buttons in the bottom. Two for add or delete extra inputs for percentages "A", and the other pair to add or delete extra inputs for percentages "B".
I was trying to do it the easy way by declaring four independent functions (i.e addA, removeA, addB, removeB), but i want to achieve this in a few lines. So that's why i opted to declare it as a function with two input parameters. Since i did that the code doesn't work anymore :(
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idesc">
<input type='text' id='idesc_1' value='idesc_1'>
</div>
<div id="edesc">
<input type='text' id='edesc_1' value='edesc_1'>
</div>
<input type="hidden" value="1" id="idinpt">
<input type="hidden" value="1" id="edinpt">
<button id="idadd">Add input for data A</button><button id="idrem">Remove input for data A</button>
<button id="edadd">Add input for data B</button><button id="edrem">Remove input for data B</button>
<script type="text/javascript">
function add(inpnum, inpnam){
var act_id = parseInt($('#'+inpnum).val());
if(act_id<5){ //5 input
var new_id = act_id+1;
var new_input = "<input type='text' id='"+inpnam+"_"+new_id+"' value='"+inpnam+"_"+new_id+"'>";
$('#'+inpnam).append(new_input);
$('#'+inpnum).val(new_id);
}
}
function remove(inpnum, inpnam){
var last_id = $('#'+inpnum).val();
if(last_id>1){
$('#'+inpnam+'_'+last_id).remove();
$('#'+inpnum).val(last_id-1);
}
}
$('#edadd').on('click', add('edinpt','edesc'));
$('#edrem').on('click', remove('edinpt','edesc'));
$('#idadd').on('click', add('idinpt','idesc'));
$('#idrem').on('click', remove('idinpt','idesc'));
</script>
</body>
</html>
Thank you so much!
I edited you html, please see below, jquery codes must be inside the $(function(){
and your syntax in on click function is incorrect.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idesc">
<input type='text' id='idesc_1' value='idesc_1'>
</div>
<div id="edesc">
<input type='text' id='edesc_1' value='edesc_1'>
</div>
<input type="hidden" value="1" id="idinpt">
<input type="hidden" value="1" id="edinpt">
<button id="idadd">Add input for data A</button><button id="idrem">Remove input for data A</button>
<button id="edadd">Add input for data B</button><button id="edrem">Remove input for data B</button>
<script>
$(function(){
$('#edadd').on('click', function(){
add('edinpt','edesc')
});
$('#edrem').on('click', function(){
remove('edinpt','edesc')
});
$('#idadd').on('click', function(){
add('idinpt','idesc')
});
$('#idrem').on('click', function(){
remove('idinpt','idesc')
});
})
</script>
<script type="text/javascript">
function add(inpnum, inpnam){
var act_id = parseInt($('#'+inpnum).val());
if(act_id<5){ //5 input
var new_id = act_id+1;
var new_input = "<input type='text' id='"+inpnam+"_"+new_id+"' value='"+inpnam+"_"+new_id+"'>";
$('#'+inpnam).append(new_input);
$('#'+inpnum).val(new_id);
}
}
function remove(inpnum, inpnam){
var last_id = $('#'+inpnum).val();
if(last_id>1){
$('#'+inpnam+'_'+last_id).remove();
$('#'+inpnum).val(last_id-1);
}
}
</script>
</body>
</html>
Hi I have struck in a issue that appending a special character to a variable that contain the value from a textbox. I have used .append() function to append a character but I getting error in console as append is not a function can anyone help me out from this issue
<html>
<body>
<form>
<input type="textbox" id="textbox"/>
<input type="submit" class="button" value="submit"/>
</form>
</body>
</html>
jquery
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.button', function(){
var demo=$('#textbox').val();
var demoapp=demo.append("^");
console.log(demoapp);
});
});
</script>
Can Any one help me out from this
https://jsfiddle.net/pxdc9g0f/6/
You can do normal string concatenation instead of using any library (like use used .append() )
$(document).ready(function() {
$(document).on('click', '.button', function() {
var demo = $('#textbox').val();
var demoapp = demo + "^";
alert(demoapp);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<input type="textbox" id="textbox" />
<input type="submit" class="button" value="submit" />
</body>
</html>
Instead of var demoapp=demo.append("^");, use var demoapp=demo+"^";
You're using append on a value, but from the docs:
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
If you just need a string concatenation, you should try something like this:
var demo=$('#textbox').val();
var demoapp=demo + "^";
alert(demoapp);
If you want to edit the #textbox value, then you should try this:
var demo=$('#textbox');
demo.val(demo.val() + '^');
alert(demo.val());
I'm trying to pass a number to a text field on button click. User hits "add to cart" and the 2499 is added to the total already in the text field.
<form name="cart">
<input id="display" type="text" name="output" size="6" placeholder="0000"/>
<button id="scart" value="Add to Cart" onclick="addCart()" +='2499'"/>
<script type="text/javascript">
var total=""
function addCart(){
document.getElementById('scart').value;
total+= document.getElementById('display').value;
console.log(total);
}
</script>
When learning, I feel that I understand the logic, but don't know the syntax.
I think this is what you want. I made a codepen for you: https://codepen.io/NeilGBK/pen/boGadz?editors=1111
<form name="cart">
<input id="display" type="text" name="output" size="6" placeholder="0000"/>
</form>
<button id="scart" onclick="addCart(2499)">Add To Cart</button>
<script>
function addCart(v){
document.getElementById('display').value = v
console.log(v);
return false;
}
</script>
I'm passing the number to the function and simply using that to change the value of the input. I'm also logging it to the console
You have some errors, your quotes are not matching and you don't have closing button tag. Also, why don't you add 2499 in the code?
How about this:
<form name="cart">
<input id="display" type="text" name="output" size="6" placeholder="0000"/>
<button id="scart" value="Add to Cart" onclick="addCart()" >
</button>
<script type="text/javascript">
var total=""
function addCart(){
document.getElementById('scart').value;
total+= document.getElementById('display').value + 2499;
console.log(total);
}
</script>
</form>
It's not clear what you are trying to do so I made the beginning of a "cart" button where the input is the quantity you want to add to cart.
I then print out the number typed in and the total if you pressed the button more than once.
<input id="display" type="text" name="output" size="6" placeholder="0000" />
<button id="scart" type="button">Add to cart</button>
<script type="text/javascript">
var total = 0;
var display = document.querySelector('#display');
var scart = document.querySelector('#scart');
scart.addEventListener('click', function() {
var str = display.value;
var num = parseInt(str, 10);
console.log('You entered the number: ', num);
if (!isNaN(num)) {
total += num;
}
console.log('The total is now: ', total);
});
</script>
There are many things that is wrong here:
First, replace + with a good indicator data-value or whatever
<button id="scart" value="Add to Cart" onclick="addCart()" data-value="2499"/>
Second, In your script you should make var total a number not string.
var total = 0;
Finally, your addCart() function.
function addCart() {
// I see you are trying to get the value of the clicked button so you need to store it as this does not do anything
// document.getElementById('scart').value;
var value = document.getElementById('scart').value;
// Add it to total var;, you need to parseInt it as .value returns string
total += parseInt(value);
// put it on display
document.getElementById('display').value = total;
}
Hope that helps.
I have a simple calculator and I want two text fields to reset when the reset button is clicked, but for some reason it's not working. I've referenced other Stack Overflow inquiries, but some use jQuery. Is there a way to do this without jQuery? Anyways, here's the JSFiddle: http://jsfiddle.net/jsdmLr7b/
<script>
var a, b, result;
function setValues() {
a = Number(document.getElementById('leftInput').value);
b = Number(document.getElementById('rightInput').value);
}
function sum() {
setValues();
result = a + b;
document.getElementById('inputTotal').innerHTML = result;
}
function reset() {
document.getElementByID('inputLeft').innerHTML.value = "";
document.getElementByID('inputRight').innerHTML.value = "";
}
</script>
<div>
<input id="leftInput" type="text" />
<input id="rightInput" type="text" />
<input type="button" onClick="sum()" value="sum" />
<input type="button" onClick="reset()" value="reset" />
<p>Total: <a id="inputTotal"></a>
</p>
</div>
Try this:
<script>
var a, b, result;
function setValues() {
a = Number(document.getElementById('leftInput').value);
b = Number(document.getElementById('rightInput').value);
}
function sum() {
setValues();
result = a + b;
document.getElementById('inputTotal').innerHTML = result;
}
function reset() {
document.getElementById("leftInput").value = "";
document.getElementById("rightInput").value = "";
}
</script>
<div>
<input id="leftInput" type="text" />
<input id="rightInput" type="text" />
<input type="button" onClick="sum()" value="sum" />
<input type="button" onClick="reset()" value="reset" />
<p>Total: <a id="inputTotal"></a>
</p>
</div>
Your problem was that you were calling getElementByID on the document. The proper way to call this is getElementById with a lowercase "d" in "Id."
Also, you were referencing the wrong id values. They are leftInput and rightInput, not inputLeft and inputRight. It can be easy to overlook wording and case sensitivity after looking at code for hours!
I switched the reset function to use .value = ""; because it makes more sense in this case and should be used for input/form operations, while innerHTML is used for other elements (div, span, td, etc.)
You can also clear your total by adding this to the reset() function:
document.getElementById("inputTotal").innerHTML = "";
In this case you want to use innerHTML because your value is not inside an input/form operation. Here's the updated JSFiddle.
I Found A Very Simple Solution Just Wrap Your All Input in FORM Tag and Your Reset button will work Fine
I want to store the value given in the text box in a variable. I am beginner to javascript. Please help me out. Here s my code.
<!DOCTYPE html>
<html>
<body>
Days of Journey: <input type="text" id="doj" name="daysofjourney">
<input type="button" value="submit" onclick="dayscounter()">
<script language="javascript" type="text/javascript">
var travel = document.getElementById("doj").value;
function dayscounter() {
var days;
for(days = 1; days <= travel; days++) {
document.write(days);
}
}
</script>
</body>
</html>
You nearly had it already...
function dayscounter() {
var travel = document.getElementById("doj").value;
var days;
for(days=1;days<=travel;days++)
{
document.write(days);
}
}
The problem was, that your first assignment of the variable travel is made as soon as the HTML code is loaded. The user can't have made an input yet at that time, thus the variable stays empty. If you include document.getElementById("doj").value inside the function, you will get the value at that specific time you launch the function.
Just parse value to int
var travel = +(document.getElementById("doj").value;);
You can use 'value' attribute of an text input to set it's value like:
<input type="text" id="textid" value="value content" />
and you can do your function like this:
<script language="javascript" type="text/javascript">
function dayscounter()
{
var travel = document.getElementById("doj").value;
var days;
var result = "";
for (days = 1; days <= parseInt(travel); ++days)
{
document.getElementById("result").value += " " + days;
}
}
</script>
Days of Journey:
<input type="text" id="doj" name="daysofjourney" />
<input type="button" value="submit" onclick="dayscounter()" />
<p>
<input type="text" id="result" />
</p>