I want to calculate loan payment automatically, after loading a page. For the payment calculation I have javascript function calculatePayment(field.form).
I have four variables, which can be changed by users. By default I am going to use information from the current post (E.g. price of the car, 5.5% interest, 5 years, 10% downpayment from the car price):
<p><label class="loan-title" for="l-amount"><?php _e('PRICE: '.$symbols['currency'].'','language')?></label>
<input type="text" size="10" name="price" value="<?php if ( $fields['price']){ echo $fields['price'];} else { echo '0'; };?>" class="l-inputbar" id="l-amount" onBlur="checkForZero(this)" onChange="checkForZero(this)"></p>
<p><label class="loan-title" for="l-down"><?php _e('DOWNPAYMENT: '.$symbols['currency'].'','language')?></label>
<input type="text" size="10" name="dp" id="l-down" class="l-inputbar" value="<?php if ( $fields['price']){ echo $fields['price']*0.1;} else { echo '0'; };?>" onChange="calculatePayment(this.form)"></p>
<p><label class="loan-title" for="l-amount"><?php _e('PROCENTU LIKME: %','language')?></label>
<input type="text" size="5" name="ir" value="5.5" class="l-inputbar" onBlur="checkForZero(this)" onChange="checkForZero(this)"> </p>
<p><label class="loan-title" for="l-amount"><?php _e('PERIOD: (years) ','language')?></label>
<input type="text" size="4" name="term" value="5" class="l-inputbar" onBlur="checkForZero(this)" onChange="checkForZero(this)"> </p>
<p class="calculate-wrapper"><input type="button" name="cmdCalc" value="" class="calculate-btn" onClick="cmdCalc_Click(this.form)" onLoad="calculatePayment(this.form)" ></p>
<p><label class="loan-title" for="l-amount"><?php _e('MONTHLY PAYMENT: '.$symbols['currency'].'','language')?></label>
<input type="label" size="12" class="l-inputbar" name="pmt"></p>
All the data loads into input fields, but I can't find the solution how to calculate the payment on page load. I have tried all the javascript function calls. Nothing seems to work.
You could use jQuery's document.ready() or *$(function(){ / * your stuff here * / })* which does the check, whether the document is loaded and rendered. It's a bit more complex than window.onload, so I would recommend you to use a framework (anyway).
Related
This is a small part of a larger project. Why does it not output the total of the four number and display in the fifth text box?
<body>
<form action="acknolcupcard" method="post" name="CupCard" id="CupCard" target="_self">
<p></p>
<input name="OneH1" type="number" value="0" size="5" maxlength="5" onchange="calc"/>
<input name="OneH2" type="number" value="0" size="5" maxlength="5" onchange="calc"/>
<input name="OneH3" type="number" value="0" size="5" maxlength="5" onchange="calc"/>
<input name="OneH4" type="number" value="0" size="5" maxlength="5" onchange="calc"/>
<label for="S1TotH"></label>
<input type="text" name="S1TotH" id="S1TotH" value="0" size= "10" maxlength= "10"/>
</form>
<script type="text/javascript">
function calc(){
var S1TotH =<br />
document.getElementById('OneH1').value +
document.getElementById('OneH2').value +
document.getElementById('OneH3').value +
document.getElementById('OneH4').value;
document.getElementById('S1TotH').value = S1TotH;
}
</script>
</body>
You need to add id as an attribute:
<input id="OneH1" name="OneH1" type="number" value="0" size="5" maxlength="5" onchange="calc"/>
Also in order to call the method you should create a handler:
<script type="text/javascript">
function calc() {
// This doesn't work since <br/> has no type (e.g. var S1TotH = '<br />')
var S1TotH =<br />
/* This values need to be stored in a variable or used in some way
(e.g. var S1TotH = document.getElementById('OneH1').value + document...). But be careful because in this way you are concatenating the
values, not adding them. If you want to add them you
should convert them to numbers (e.g. parseFloat(document.getElementById('OneH1').value)) */
document.getElementById('OneH1').value +
document.getElementById('OneH2').value +
document.getElementById('OneH3').value +
document.getElementById('OneH4').value;
document.getElementById('S1TotH').value = S1TotH;
}
// use 'input' or 'change' event
document.querySelector('input').addEventListener('input', function () {
calc();
});
</script>
You don't call the function
Mentioning the name of a variable (even if the value of that variable is a function) doesn't call the function.
You need to put (argument, list) after it.
onchange="calc()"
Intrinsic event attributes have a bunch of problems though (e.g this one) and are best avoided.
You could use a delegated event listener instead.
function calc(event) {
const input = event.target;
console.log(input.value);
}
document.querySelector("form").addEventListener("change", calc);
<form>
<input type="number">
<input type="number">
<input type="number">
<input type="number">
</form>
You have no ids
Then it will run, but error, because you are using getElementById without having elements with id attributes.
You are concatenating not adding
Once you fix that, you will still not be adding up the values because + servers double duty as the concatenation operator and values are strings.
You need to convert them to numbers (e.g. with parseFloat).
This code should work, use oninput instead of onchange for live changes reflect, I resolved few other errors too.
<body>
<form action="acknolcupcard" method="post" name="CupCard" id="CupCard" target="_self">
<p></p>
<input name="OneH1" id="OneH1" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<input name="OneH2" id="OneH2" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<input name="OneH3" id="OneH3" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<input name="OneH4" id="OneH4" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<label for="S1TotH"></label>
<input type="text" name="S1TotH" id="S1TotH" value="0" size= "10" maxlength= "10"/>
</form>
<script type="text/javascript">
function calc(){
var S1TotH =
document.getElementById('OneH1').value +
document.getElementById('OneH2').value +
document.getElementById('OneH3').value +
document.getElementById('OneH4').value;
document.getElementById('S1TotH').value = S1TotH;
}
</script>
</body>
Above code will concate the values as these are strings values so far so you need to use the parseInt() function if you want to convert it into numbers
I am having an issue with a bit of code in a form. I am trying to get the value from the user (dollar amount) and parse it to an integer. Then I need to perform calculations to add 2.9% to it and also add .30 to the product.
It seems that the issue is in the parsing...because I am getting errors in the console saying $sendAmount.val is not a function [when I enter $sendAmount.val()]. Yet, if I submit $userAmount.val(), it returns the dollar amount the user submitted (in a string).
Keep in mind that $userAmount is what the user enters and
$sendAmount is what is sent to Paypal.
Any help with this would be most appreciated... I have been trying to get this to work and have been coming up empty. I don't have much experience with parseInt.
Here is my code:
var $sendAmount = $("#payAMT");
var $userAmount = $("#valInput");
//Update the Amount
function $convFee() {
$sendAmount = parseInt($userAmount) * 1.029 + 0.30;
};
$agree.keyup($convFee);
$agree.click($convFee);
<div id="paypalWrap">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="new">
<input type="hidden" name="amount" id="payAMT" value="0.00">
<input type="hidden" name="currency_code" value="USD">
<p>
<label for="os0" type="hidden" name="on0" value="Name:">Name:</label>
<input type="text" name="os0" maxlength="30" id="name">
</p>
<p>
<label for="os1" type="hidden" name="on1" value="Invoice Number:">Invoice Number:
<br />
<i>(Reference must be correct to get credit applied to your account)</i>
</label>
<input type="text" name="os1" maxlength="50" id="invoice">
</p>
<p>
<label for="os2" type="hidden" name="on2" value="Amount:">Amount being paid:</label>
<input type="text" name="os2" id="valInput" maxlength="15" placeholder="ex: 10.00 (not $10.00)">
</p>
<p>
<input type="checkbox" name "agreeCheck" id="agreeCheck" />
<label for="agreeCheck" type="hidden" name="agreeStatement" id="agreeStatement">
I understand and accept that I will be charged a convenience fee ($0.30 + 2.9% of transaction).
</label>
</p>
<input id="send" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif" disabled="disabled" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
</form>
</div>
This line has the same problem twice:
$sendAmount = parseInt($userAmount) * 1.029 + 0.30;
Both of these variables are DOM elements, not numbers. You need to interact with them as items, specifically their value elements (which are strings that can be parsed to numbers).
You need to retrieve the value from the first, and set the value of the second, e.g.:
$sendAmount.val(parseInt($userAmount.val) * 1.029 + 0.30);
See http://api.jquery.com/val/
I have a user setup/create form that includes requesting a users license/certification number as part of the user setup process. However, i need the license information entered to be validated and returned to target DIV Onchange before the full form is actually submitted normally. As I understand it, a AJAX POST would be the way to do that but I have never used AJAX. I was looking at an example on W3schools here
but it is using the value set by a single select. In my case I have 3 separate form fields that normally are sanitized and sent to a standalone PHP file thats expecting 3 variables via POST method on SUBMIT like normal.
Can someone show me example of how I could accomplish the AJAX call made by the w3schools example when i need to pass/submit 3 variables to receiving PHP processing file, using the POST method when the LAST FORM FIELD is exited (onblur)?
FORM
<div>Active license?<input name="sffl" type="checkbox" value="1">Yes | License#
<input name="dig1" type="text" size="5" maxlength="1" placeholder="5">-
<input name="dig2" type="text" size="8" maxlength="2" placeholder="12">-
<input name="dig3" type="text" size="7" maxlength="3" value="XXX" disabled>-
<input name="dig4" type="text" size="7" maxlength="2" value="XX" disabled>-
<input name="dig5" type="text" size="7" maxlength="2" value="XX" disabled>-
<input name="dig6" type="text" size="10" maxlength="5" placeholder="22131">
</div>
TARGET FOR RESPONSE
<div id="datatarget"> </div>
This is code I cut and pasted from an ajax call that checks time. It sends more than one variable to the server.
Editing again to point out that this ajax call uses jquery, which some complain about but I find it to be very simple and straightforward for ajax calls.
$("#startdate,#starttime,#enddate,#endtime" ).change(function(){
$("#date_error").show(''); //clears the error display
$("#date_error").html('...validating'); //puts a temporary value
var startdate=$("#startdate").val();
var starttime = $("#starttime").val();
var enddate=$("#enddate").val();
var endtime=$("#endtime").val();
startdate = startdate + ' ' + starttime; //combine date and time
enddate = enddate + ' ' + endtime; //combine date and time
$.post("http://www.mysite.net/contest/validate/",
{
startdate:startdate, //sends to server with post collection
enddate:enddate,
id:id
},
function(data,status) {
$("#date_error").html(data);
}); //.post
}); // keyup
The following code worked, as i understand it after a few hours of playing with it this is a combination of jquery/ajax??? in any case this was the end result that was successful:
<div>Active license?<input name="sffl" type="checkbox" value="1">Yes | License#
<input name="dig1" type="text" size="5" maxlength="1" placeholder="5">-
<input name="dig2" type="text" size="8" maxlength="2" placeholder="12">-
<input name="dig3" type="text" size="7" maxlength="3" value="XXX" disabled>-
<input name="dig4" type="text" size="7" maxlength="2" value="XX" disabled>-
<input name="dig5" type="text" size="7" maxlength="2" value="XX" disabled>-
<input name="dig6" type="text" size="10" maxlength="5" placeholder="22131">
</div>
m
$(document).ready(function() {
$("#dig6").blur(function(){
$.ajax({
type : 'POST',
url : 'test.php',
data: {
var1 : $('#dig1').val(),
var2 : $('#dig2').val(),
var3 : $('#dig6').val()
},
success:function (data) {
$("#datatarget").append(data);
} }); }); });
test.php contained:
echo $_POST["var1"].'<br>';
echo $_POST["var2"].'<br>';
echo $_POST["var3"].'<br>';
I have searched the web for (what I am expecting to be) a basic answer to this question.
I have an HTML form I am putting together for a specific system. I have two text fields that a user will input two temperatures into. I want to have a third text field that onBlur, will generate the difference between these two temperatures. I have a script which I think is heading in the right direction, but does not work. Because of the system I will be using this for, I cannot have tags in the HTML.
My script:
<script language="javascript" type="text/javascript">
<!--
function calculate_temp(TempIn, TempOut) {
var TempIn = parseInt(document.getElementById('TempIn').value);
var TempOut = parseInt(document.getElementById('TempOut').value);
var Delta = TempIn - TempOut;
document.getElementById('Delta').innerHTML = Delta
}
// -->
</script>
My HTML:
<body>
<div>
<p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" /></p>
<p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" /></p>
<p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" onBlur="calculate_temp(this.form.TempIn.value, this.form.TempOut.value)"/></p>
</div>
</body>
Can anyone explain what I am doing wrong here? Again, I want the user to input TempIn, hit tab, input TempOut, hit tab and then the Delta be calculated automatically.
Like I said, every resource I find online does it a slightly different way, but I can't seem to get it working if I use any of the approaches.
Any help is greatly appreciated. Thanks.
An input doesn't have an innerHTML, you should use value.
document.getElementById('Delta').value = Delta
Also, always pass the 2nd parameter to parseInt which is the radix. Otherwise it will often guess the wrong radix.
Remove the comments in your script: .
All tags and attribute names must be lowercase in XHTML (optional). i.e:
onblur.
For your expected behavior, I recommend use the onfocus event,
it makes more sense.
You don't need to pass nothing to the calculate_temp() function if
you can access the elements through the script.
Change the value of the Delta input with the value property.
Result:
<head>
<title>Untitled 1</title>
<script language="javascript" type="text/javascript">
function calculate_temp(TempIn, TempOut) {
var TempIn = parseInt(document.getElementById('TempIn').value);
var TempOut = parseInt(document.getElementById('TempOut').value);
var Delta = TempIn - TempOut;
document.getElementById('Delta').value = Delta
}
</script>
</head>
<body>
<div>
<p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" /></p>
<p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" /></p>
<p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" onfocus="calculate_temp()"/></p>
</div>
</body>
I'll throw my hat in the ring....
html:
<div>
<p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn"/></p>
<p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" /></p>
<p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta"/></p>
</div>
js:
/* store elements */
var TempIn = document.getElementById('TempIn'),
TempOut = document.getElementById('TempOut'),
Delta = document.getElementById('Delta');
function calculate_temp() {
Delta.value = parseInt(TempIn.value,10) - parseInt(TempOut.value,10);
}
/* unobtrusive onblur */
TempIn.onblur = calculate_temp;
TempOut.onblur = calculate_temp;
Delta.onblur = calculate_temp;
here's a fiddle: http://jsfiddle.net/JKirchartz/TbHW3/
EDIT should probably mention, this JS should be right above your </body> tag, or be run when the dom has loaded.
The OnBlurevent fires when the control in question looses the focus, so your code can only get called, when the user moves the focus away from the Delta input. You want it to get called when the TempOut input looses it's focus, so that's where your event handling should be setup:
<p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" /></p>
<p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" onBlur="calculate_temp(this.form.TempIn.value, this.form.TempOut.value)"/></p>
<p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" /></p>
try this
script:
<script language="javascript" type="text/javascript">
<!--
function calculate_temp() {
var TempIn = parseInt(document.getElementById('TempIn').value);
var TempOut = parseInt(document.getElementById('TempOut').value);
var Delta = TempIn - TempOut;
document.getElementById('Delta').value = Delta;
}
// -->
</script>
html:
<body>
<div>
<p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" /></p>
<p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" /></p>
<p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" onBlur="calculate_temp()"/></p>
</div>
</body>
<div>
<p><label for="TempIn">TempIn: </label><input type="text" name="TempIn" id="TempIn" onBlur="calculate_temp(document.getElementById('TempIn').value, document.getElementById('TempOut').value);"/></p>
<p><label for="TempOut">TempOut: </label><input type="text" name="TempOut" id="TempOut" onBlur="calculate_temp(document.getElementById('TempIn').value, document.getElementById('TempOut').value);"/></p>
<p><label for="Delta">Delta: </label> <input type="text" name="Delta" id="Delta" /></p>
</div>
<script language="javascript" type="text/javascript">
<!--
function calculate_temp(TempIn, TempOut) {
var Delta = TempIn - TempOut;
document.getElementById('Delta').value = Delta
}
// -->
</script>
My shopping cart script is intended to check if an article is already in the shopping cart; then the numbers must be filled in the survey.
I work with Javascript. I give the ID number through a position() function.
This is a part of the script where I pick list:
<input type="text" size="2" name="aantalArts_{position()}" id="aantalArts_{position()}"/>
The output:
<input type="text" size="2" value="" name="aantalArts_1" id="test" class="infoButton">
<input type="text" size="2" value="" name="aantalArts_2" id="test" class="infoButton">
<input type="text" size="2" value="" name="aantalArts_3" id="test" class="infoButton">
<input type="text" size="2" value="" name="aantalArts_4" id="test" class="infoButton">
I am just filling the numbers, but how do I deal with the positions?
<script language="javascript" type="text/javascript">
if(document.all.artNr.value = <%=artNrWW%>);{
document.all.aantalArts_??????.value = <%=aantalWW%>;
}
</script>
You are probably looking for the following syntax:
var i = 1; // or whichever
document.all["aantalArts_" + i].value = <% aantalWW %>;