Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i am trying to show in realtime the total price of the selected amount of a product. But i dom't get out with it, example: if you select 2 cards the price must be show in realtime : $10, and also that it counts the total amount and show the total price.
How can i fix this? This is my source:
function updatePrice()
{
var numSubTotal = parseInt($("#num-fruits option").filter(":selected").val());
if (isNaN(numFruits)) numFruits = 0;
$("#num-fruits").html(""+numFruits);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="652" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><strong>Product</strong></td>
<td><strong>Product Price</strong></td>
<td><strong>How much you want?</strong></td>
<td><strong>Total Price</strong></td>
</tr>
<tr>
<td width="210">Fruit:</td>
<td width="216">$ 10</td>
<td width="204"><input name="number" type="number" id="number" value="5" onchange="updatePrice()"></td>
<td width="204">$ 50 <span id="num-fruits">0</span> </td>
</tr>
<tr>
<td>Drinks:</td>
<td>$ 25</td>
<td><input name="number2" type="number" id="number2" value="25"></td>
<td>$ 625</td>
</tr>
<tr>
<td>Cards:</td>
<td>$ 5</td>
<td><input type="number" name="number3" id="number3"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Total price of all:</td>
<td>$ 675</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</center>
</body>
</html>
why isn't this code working?
In your HTML remove your onchange attribute, it's a bad practice.
Then, your Javascript is not taking care of all the fields (i.e. only Fruits), so replace it with this:
$("input").on("change", function () {
var $input = $(this);
var howMany = parseInt($input.val());
var unitAmount = parseInt($input.parent().prev().text().replace("$",""));
var total = howMany * unitAmount;
$input.parent().next().text("$ " + total);
});
What this does is to detect when the "how much" input fields change and when that's the case, it retrieve how much a unit costs and multiplies by the number input in the "how much" field and writes the total in the last column.
Related
I have the code below, its working outside WordPress, but when i add to the WordPress site the script fails. I have tried using a plugin and separating the code as shown, then putting the JS code separate
I am not sure where the problems is since am not good with JS.
Any one point me to the right direction and i will appreciate.
< script language = "JavaScript" >
function calculate() {
// Get the user's input from the form. Assume it is all valid.
// Convert interest from a percentage to a decimal, and convert from
// an annual rate to a monthly rate. Convert payment period in years
// to the number of monthly payments.
var principal = document.loandata.principal.value;
var interest = document.loandata.interest.value / 100 / 12;
var payments = document.loandata.years.value;
// Now compute the monthly payment figure, using esoteric math.
var x = Math.pow(1 + interest, payments);
var monthly = (principal * x * interest) / (x - 1);
// Check that the result is a finite number. If so, display the results.
if (!isNaN(monthly) &&
(monthly != Number.POSITIVE_INFINITY) &&
(monthly != Number.NEGATIVE_INFINITY)) {
document.loandata.payment.value = round(monthly);
document.loandata.total.value = round(monthly * payments);
document.loandata.totalinterest.value =
round((monthly * payments) - principal);
}
// Otherwise, the user's input was probably invalid, so don't
// display anything.
else {
document.loandata.payment.value = "";
document.loandata.total.value = "";
document.loandata.totalinterest.value = "";
}
}
// This simple method rounds a number to two decimal places.
function round(x) {
return Math.round(x * 100) / 100;
} <
/script>
<head>
<title>JavaScript Loan Calculator</title>
</head>
<form name="loandata">
<table border=0>
<tr>
<td colspan="3" th bgcolor="#0c77bb">
<font color=white><b>Enter Loan Information:</b></td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Amount Borrowed:</td>
<td bgcolor="#f1f1f1"><input type="text" name="principal" size="12" onchange="calculate();"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Monthly Interest Rate (%):</td>
<td bgcolor="#f1f1f1"><input type="text" name="interest" size="12" onchange="calculate();"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Number of Monthly Payments:</td>
<td bgcolor="#f1f1f1"><input type="text" name="years" size="12" onchange="calculate();"></td>
</tr>
<tr>
<td bgcolor="#a0ce4e" colspan="2">
<input type="button" value="Compute" onclick="calculate();"> </td>
<td bgcolor="#cb4429"><input type="reset" value="Reset"></td>
</td>
</tr>
<tr>
<td bgcolor=""></td>
<td bgcolor="" </td>
</tr>
<tr>
<td th bgcolor="#0c77bb" colspan="3">
<b><font color=white>Payment Information:</b>
</td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Your monthly payment will be:</td>
<td bgcolor="#f1f1f1"><input type="text" name="payment" size="12"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Your total payment will be:</td>
<td bgcolor="#f1f1f1"><input type="text" name="total" size="12"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#f1f1f1">Your total interest payments will be:</td>
<td bgcolor="#f1f1f1"><input type="text" name="totalinterest" size="12"></td>
</tr>
</table>
</form>
It happened i had the code twice, removing one solved the problem
My previous question is here but it seems that using only window and document cannot get it done. What I want is that when the text from the first row is selected, the first input will be filled. Same for the second row.
javascript - select text in table cell and autofill the input on the same row
https://jsfiddle.net/nrdq71pz/6/
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
This is jQuery solution. (Actually easier than i thought, i've thought that selection text inside elements can't be reached so easily, but...):
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
Demo:
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
td {
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
<tr>
<td>Test code 3</td>
<td>
<input type='text' id='input3' class="selection" />
</td>
</tr>
</table>
So, point is to put event on cell, and then reach closest input (in your current hTML structure, this works, if you change something, you can modify it, easily, i guess)
I'm having trouble figuring out what you are asking but does this get the job done? When you click "Test code 1" it will fill in the input value to "Hello".
https://jsfiddle.net/nrdq71pz/8/
Html:
<table>
<tr>
<td class="select">Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
jQuery:
$('.select').click(function(){
$('#input1').val("hello")
})
I just noticed your comment on a post above. I think what I did was wrong so take a look at what I did here and tell me which one is closer to what you need. https://jsfiddle.net/nrdq71pz/9/
I've been digging around to try and get a list of comma separated values from a set of checkboxes. There have been lots of useful answers here, but I can't work out a final kink. My code is behaving oddly depending on whether or not the first checkbox is checked and I can't work out why (this is my first ever attempt at javascript!)
<script type="text/javascript">
function updateTextArea() {
var allVals = $('input.gift:checked').map(
function() {return this.value;}).get().join();
$('#txtValue').val(allVals)
}
$(function () {
$('#gift input').click(updateTextArea);
updateTextArea();
});
</script>
And here's the html that accompanies it.
<fieldset id="gift">
<input type='checkbox' name='lFreeProductid' value='8840'
id="lFreeProductid1" class="gift">
</td>
<td class="style42">64 SSG</td>
<td class="style32"> </td>
</tr>
<tr id="tr2">
<td class="style33"><input type='checkbox' name='lFreeProductid'
value='420' id="lFreeProductid1" class="gift"></td>
<td class="style41">Perfect D</td>
<td> </td>
</tr>
<tr id="tr3">
<td class="style33"><input type='checkbox' name='lFreeProductid'
value='460' id="lFreeProductid1" class="gift"></td>
<td class="style41">Soccer Attack</td>
<td> </td>
</tr>
</fieldset>
<tr>
<td class="style33"> </td>
<td class="style41"> </td>
<td> </td>
</tr>
</table>
<textarea id="txtValue"></textarea>
I know this is the sort of question that's been asked a thousand times, but I can't seem to find a solution to this specific issue. Any help would be greatly appreciated.
I think your code is working fine !
Check this demo once : https://jsbin.com/vigixi/46/edit?html,js,output
And if this is not the desired output you want. Then let us know what exactly you want.
I advice you to correct all the HTML syntax errors
<fieldset id="gift">
<table>
<tr id="tr1">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='8840' id="lFreeProductid1" class="gift"></td>
<td class="style42"><label for="lFreeProductid1">64 SSG</label></td>
<td class="style32"> </td>
</tr>
<tr id="tr2">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='420' id="lFreeProductid2" class="gift"></td>
<td class="style41"><label for="lFreeProductid2">Perfect D</label></td>
<td> </td>
</tr>
<tr id="tr3">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='460' id="lFreeProductid3" class="gift"></td>
<td class="style41"><label for="lFreeProductid3">Soccer Attack</label></td>
<td> </td>
</tr>
<tr>
<td class="style33"> </td>
<td class="style41"> </td>
<td> </td>
</tr>
</table>
</fieldset>
<textarea id="txtValue"></textarea>
Your issue could be due to a certain browser or/and doctype
I want to Check or Uncheck an Checkbox which is part of an tr.
From this tr I already have the Name as Information.
I need something like "Uncheck checkbox on tr where tr.name = $name"
<tr>
<td id="klauselname">
002
</td>
<td>
50591
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="klauselname">
003
</td>
<td>
50601
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
Do u have any idea? o.o
First of all , as others pointed out , IDs in your DOM should always be unique. You can use classes or other attributes for mass manipulation , but not IDs.
So lets clear the duplicate ids like this and at the same time add some IDs on your Checkboxes.
<tr>
<td id="myUniqueID_1">002</td>
<td>50591</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_3">
<input id='myCheckBox_1' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="myUniqueID_2">003</td>
<td>50601</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_4">
<input id='myCheckBox_2' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
now we can add a function that will take care the Checkbox changes. We will use the checked property and will change it to false or true depending on our needs.
<script>
function changeState(elID){
var myCheckBoxStatus = document.getElementById(elID).checked;
if(myCheckBoxStatus)
document.getElementById(elID).checked = false;
else
document.getElementById(elID).checked = true;
}
</script>
and lets also place a button to test it out
<button onclick='changeState("myCheckBox_2");'>Toggle</button>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
When the age value is less than 15, I want to show the below hidden table row.
<td>Age</td>
<td><input type="text" name="age" id="age"></td>
<td> </td>
<td> </td>
</tr>
<tr style="display:none">
<td> Guardian</td>
<td><input type="hidden" name="guardian" id="guardian"></td>
<td> </td>
<td> </td>
</tr>
In jQuery it would be something like
$("#age").on("input",function() { // or "keyup" or "blur"
$(this).closest("tr").next().toggle(this.value<15);
});
You need to not have the input for guaridan hidden, though
Working Fiddle
I slightly modify your html:
<table>
<tr>
<td>Age</td>
<td>
<input type="text" name="age" id="age">
</td>
<td> </td>
<td> </td>
</tr>
<tr id='trGuardian' style="display:none">
<td> Guardian</td>
<td>
<input name="guardian" id="guardian">
</td>
<td> </td>
<td> </td>
</tr>
</table>
And JQuery :
$("#age").blur(function() {
if (parseInt($(this).val()) < 15)
$('#trGuardian').show();
else
$('#trGuardian').hide();
});