|
JavaScript - Calculate Diff In Amounts Onchange
Hi Experts,
I am sorry if this is a beat up question... I have a form with three fields that capture Amounts in $: Field1: Invoice_Amount (calculated using SQL Query from Invoice table - Display only) Field2: Amount_Paid - Will be entered by admin Field3: Amount_Due - Should be autocalculated based on Field1-Field2 I want to put an onChange event on Field2 so that when user tabs out of that field then Field3 is automatically calculated. Any help would be appreciated. Thanks Vinny Similar TutorialsHi, I have made this php script which checks two variables (nick and email): script.php PHP Code: <?php if (isset($_GET['nick'])) { $name = 'aurimas'; $ats = $_GET['nick']; if ($name == $ats) {echo "Užimtas";} else {echo "Laisvas";} } if (isset($_GET['email'])) { $email = 'auriaks@gmail.com'; $get_mail = $_GET['email']; if ($email == $get_mail) {echo "Užimtas";} else {echo "Laisvas";} } ?> And I use this Ajax script to get the answers from script.php PHP Code: // Get the HTTP Object function gethttpObject(){ if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) return new XMLHttpRequest(); else { alert("Your browser does not support AJAX."); return null; } } // Change the value of the outputText field function setOutput(){ if(httpObject.readyState == 4){ document.getElementById('answer').innerHTML = httpObject.responseText; } } // Implement business logic function doWork(){ httpObject = gethttpObject(); if (httpObject != null) { httpObject.open("GET", "script.php?nick=" + document.getElementById('nikas').value + "&email=" + document.getElementById('email').value, true); httpObject.send(null); httpObject.onreadystatechange = setOutput; } } setInterval(doWork, 100); var httpObject = null; The problem is, that I want to get those answers in different places of the page. PHP Code: <div id='td'>Nikas* |Tik mažosios raidės|</div> <div id='td'><input MAXLENGTH=20 type="text" size='27' id='nikas' name="nick" value="<?php echo $_POST['nick']; ?>">ONE HERE(WORKS)<div id='answer'></div></div> <div id='td'>E-paštas*</div> <div id='td'><input MAXLENGTH=60 type="text" size='27' id="email" name="email" value="<?php echo $_POST['email']; ?>">ANOTHER HERE(DONT WORK)</div> taisyklėmis. The aim is to check if the nick and email already exists ant tell user this info by saying "užimtas"(exists) or "Laisvas"(available) THANKS in ADVANCE Hi, I am having a Main homepage in my site which contains many pages rendered from different sources. And all these rendered pages are having a table like <table id="toc" class="toc"></table> . As all these are rendered in my homepage , those tables are appearing in my homepage.. I am trying to remove these tables from my homepage coding by javascript. So i tried with a onload option to remove it .. But i dono how to do this. Since by any way only one table in the first page rendered is removed and all others are having the table.. How can i do this?? Please help me.. I have a onChange value
Code:
var people = [
["Timothy Conner", "1999-Present", "Age: 12", "Male", ""],
["Andrew Conner", "1992-Present", "Age: 19", "Male", ""]
];
var how = "Brothers";
function find()
{
if(document.getElementById("name").value == people [0] [0])
{
document.getElementById("desc").value = people [0] [1] + " " + people [0] [2] + " " + people [0] [3];
}
if(document.getElementById("name").value == people [1] [0])
{
document.getElementById("desc").value = people [1] [1] + " " + people [1] [2] + " " + people [1] [3];
}
document.getElementById("relateb").value = document.getElementById("name").value;
}
Code: Name: <input type="text" id="name" value="" onChange="find()"/> So for it to proses a name you must click out of a box is ther a way to make it instead of when you click out of it, it would immidiatly change? Hi folks. I'm working on a calculator and need to use the 'onchange' function. Basically, the user selects the year (id=taxYear) and once the year is select (default is 2008) this year will appear in 2 different lines of the page under 2 seperate ID's(ageYear & totalYear). I've looked at a few example of the function but I'm still not sure how to approach it. At the moment the year changes once I hit the 'calculate' button but the onChange would obviously offer a better alternative with the date changing once 'taxYear' is changed. here is the script; Code: //check the year
var taxYear = document.getElementById('taxYear').options[document.getElementById('taxYear').selectedIndex].value;
document.getElementById('ageYear').innerHTML = taxYear;
document.getElementById('totalYear').innerHTML = taxYear;
Here is the jsp; Code: <tr>
<td align="left" width="203" colspan=""><p> Your Tax Year: </p></td>
<td align="left" >
<s:select name="taxYear" id="taxYear" list="#{'2008':'2008', '2009':'2009'}" theme="simple" />*
</td>
</tr>
<tr>
<td align="left" width="203"><p> Age at December 31st <span id="ageYear"></span></p></td>
<td align="left" colspan="1">
<s:textfield name="age" id="age" theme="simple" cssClass="text" value="30" /> *
<div id="errorage" class="warningmessage" style="display:none">
Please enter your Age to proceed.
</div>
</td>
</tr>
<tr>
<td colspan="2" class="basicboldtext">
<br/>
The total pension contribution you can make for year <span id="totalYear"></span> is €<span id="totalTax2"></span>
<br/>
</td>
</tr>
Appreciate any help on this! Code: <input type = "text" style ='display:none;' onchange="display_data_from_server(this.value)"/> Value inside that input is cahanged from js. Is there any reason that onchange would not happen ? i mean, it does not. hi i have a form where i need to join fields from the form prior to submission to flow into a pdf form. here is the function PHP Code: <SCRIPT language='javascript' type='text/javascript'> function joinna(form, elemName, ttl) { form.bname.value = form.b_fname.value + ' ' + form.b_lname.value; } </script> here is what the form input looks like PHP Code: <input class="left" onBlur="mark(this,'#ffffff','#000000')" name="b_fname" size="20" maxlength="40" onFocus="nextfield ='cb_fname'; mark(this,'#FFFF99','#0000FF')" value="<?php echo $row['b_fname'];?>" onChange="joinna(this.form,'b_fname','p1f6');"> </span> <input class="left" onBlur="mark(this,'#ffffff','#000000')" name="b_lname" size="20" maxlength="40" onFocus="nextfield ='cb_fname'; mark(this,'#FFFF99','#0000FF')" value="<?php echo $row['b_lname'];?>" onChange="joinna(this.form,'b_lname','p1f6');"> </span> and here is the calc field PHP Code: <input type="hidden" NAME="bname" value="" Size="7" onBlur="mark(this,'#ffffff','#000000')" onFocus="blur();document.smartform.bname.focus()" onChange="this.form.b_fname.value + this.form.b_lname.value; joinna(this.form,'field');" > this works fine IF i manually insert something new into the b_fname field. but lets say a user pulls the for to edit, and then makes no changes, "bname" will remain blank. what i want to do is call the function and/or force an 'onchange' or do whatever so bname is not left blank in the event the user submits w/o making any changes to the form tia I'm trying to figure out how to call multiple functions within the same onchange attribute, associated in the same select object. I have a drop-down menu in which I can select MN, WI, and Other. I've worked it now so that when I select MN, a new drop-down menu appears in which I can select one of MN's Counties. I want to be able to do the same with WI and Other, but my code is only calling MN. Here it is: Code: <html>
<head>
<script="text/javascript">
function showMN(select)
{
select.form.MN.value=""; // reset the text box value
document.getElementById("MNBox").style.display =
select.value == "MN" ? "inline" : "none";
}
function showWI(select)
{
select.form.WI.value=""; // reset the text box value
document.getElementById("WIBox").style.display =
select.value == "WI" ? "inline" : "none";
}
function showOther(select)
{
select.form.otherState.value = ""; // reset the text box value
document.getElementById("otherBox").style.display =
select.value == "Other" ? "inline" : "none";
</script>
</head>
<body>
<select name="state" onchange="showMN(this);showWI(this);showOther(this)">
<option value="" selected="selected">Choose...</option>
<option value="MN">MN</option>
<option value="WI">WI</option>
<option value="Other">Other</option>
</select><font color="red">*</font>
<span id="MNBox" style="display:none">
County: <select name="MN">
<option value="" selected="selected">Choose...</option>
<option value="List of MN Counties">List of MN Counties</option> </select><font color="red">*</font>
<span id="WIBox" style="display:none">
County: <select name="WI">
<option value="" selected="selected">Choose...</option>
<option value="List of WI Counties">List of WI Counties</option>
</select><font color="red">*</font>
<span id="otherBox" style="display:none">
<input type="text" name="otherState" placeholder="Enter state here"/><font color="red">*</font> <input type="text" name="otherCounty" placeholder="Enter County here"</span>
</body>
</html>
Am I even close? Hi I'm a newbie. Please help me. I'm using Joomla. I've got a dropdown which reads the filename from the database. When the user selects it I want an onchange event to open the pdf. I've been at it for 2 days now. Code: <?php
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("metnet", $con);
$sql="SELECT * FROM newsletter";
$result = mysql_query($sql);
echo "<form method='post'>";
$dropdown = "<select name='sname' onChange='location(this.form.sname)' >";
while($row = mysql_fetch_assoc($result)) {
$dropdown .= "\r\n<option value='{$row['fpath']}'>{$row['fpath']}</option>";
}
$dropdown .= "\r\n</select>";
echo $dropdown;
?>
This code works great for splitting value to textbox.. However; It quits working in example 2 when I move the select outside the form tags Code: <!-- EXAMPLE 1 WORKS-->
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
sel.form["F"+first].value = temp[0];
sel.form["F"+(first+1)].value = temp[1];
sel.form["F"+(first+2)].value = temp[2];
}
</script>
<form method='post'>
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
<select onChange="Split(this,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
</form>
Help with the onChange to work outside the form tags. Code: <!-- EXAMPLE 2 NEED HELP-->
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
sel.form1["F"+first].value = temp[0];
sel.form1["F"+(first+1)].value = temp[1];
sel.form1["F"+(first+2)].value = temp[2];
}
</script>
<form method='post' name="form1">
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
</form>
<!-- NEED TO MODIFY THE ONCHANGE TO WORK IN THIS POSITON?? -->
<select onChange="Split(this.form1.value,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
I am trying to create an onChange action that will validate that confirmation checkbox has been checked, and if not, popup an alert message and put the focus on the checkbox input and change the class of the container DIV to "highlight". Here is the form, with the 'onchange' trigger: Code: <form id="checkout" name="my_form" method="post" action="!---SCRIPT_NAME---" onsubmit="return validForm(this);"> <div id="verification" class="aligncenter required"> <input type="checkbox" id="verified" name="verified" value="" /> <label for="verified">YES</label>, the items and quantities shown above are correct.</div> <div class="required"><label for="name">Name:</label><input id="name" name="contactname" type="text" class="L" onchange="" /></div> <div class="required"><label for="company">Company Name:</label><input id="company" name="company" type="text" class="L" /></div> <div class="buttonRow"><input type="submit" name="VERIFY" class="btn red" value="Continue" /></div> </form> And here is my javascript code: Code: function verifyOrder() {
if (document.my_form.verified.checked != "true") {
alert("Please verify the contents of your order");
document.my_form.verified.focus();
getElementById('document.my_form.verification').className='highlight'
return false;
}
}
But this is not working and generates errors in firebug. What am I doing wrong? Thanks!! I need the code to run a few functions on change, the box is a "date picker" and I unsure how to add my onchange function without breaking the date picker, can anyone help ? Code: p>end date:</p>
<input id='secondDate' type="text" size="25"><a href="javascript:NewCal('secondDate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date" onchange="dateDiff() ;calculate() ;deposit() ;milecharge() ;agecheck()"></a>
Hi, I am trying to copy the value of one textbox to another using onchange event. For some reason, my code does not work, please let me know where I went wrong. here is my code: Code: <html>
<head>
<script type="text/javascript">
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>
Field1: <input type="text" id="field1"/><br />
Field2: <input type="text" id="field2" onchange="copyText()"/>
</body>
</html>
Thank you. i keep getting the following error: - there is no attribute "onChange" Code: <select name="type" id="type" onChange="gettype('type');">
<option selected="selected">--Car type--</option>
<option value="1">Bmw</option>
<option value="2">Merc Blinds</option>
<option value="3">Ford</option>
<option value="4">Saab</option>
</select>
HI, i know very little about javascript, just enough to get me into trouble actually lol. Here is what im working with. I have a custom Instant messenger for members. It uses embed object macromedia as well as javascript to diplay the window and send messages. What i want to do is simply add an onchange that when one person is typing it shows they are typing (ie xxxxx is typing....) My experience is in php and html and i looked thru the script and the javascript functions but im not sure what im looking for exactly. Do i need to have access to the swf or fla file and be able to edit them to do this? I dont see any form inputs or i would know exactly where to put the onchange lol. Im guessing the input is in the swf or fla file not sure how that works. what im guessing is that in the embed or the object tags (ill play with it) i can put something like Code: document.write('test on change\n');
i think i need to wrap that in doc write script type=javascript in quotes so it parses. If i can get that text to show up inside the IM where i want it then i can try to figure out how to set focus on box and recongize onchange and do some testing. I think i might even be able to doc write the onchange command but not sure. Thanks Evening all. I have a little bit of code, thus: Code: var data = document.createElement("td");
box = document.createElement("input");
box.id = headercategories[i];
box.type = text;
box.value = "Ten";
box.onChange = alter("11");
data.appendChild(box);
in which I insert a text input box into a table data element. When the value of the input is changed, I would like to call the function alter(). However, what's happening in practice is that the function alter is getting called straight away, without waiting for any changes. Is there any way I can stop this? It doesn't seem to happen if you actually write the onchange bit into the HTML by hand rather than doing it dynamically. Thanks, Chris All, If I have the following code: Code: <form name="datatoshow" id="datatoshow"> Want to learn more about the sie? Use the drop down menu:<br /> <select name="thingtoshow" onchange="javascript:showvalues(this.datatoshow);"> <option value="home">Home</option> <option value="help">Help!</option> <option value="refer">Refer a Friend</option> </select> </form> This doesn't do anything on the onchange. The code it's supposed to send to is: Code: function showvalues(selObj){
alert("it gets here");
var valuetoshow;
valuetoshow = "valuetoshow="+selObj.options[selObj.selectedIndex].value;
alert(valuetoshow);
makePOSTRequest('showhome.php', valuetoshow);
}
This is in external js file. For some reason it doesn't send it and the alert never gets triggered. Thanks. Hello all, I have a translation script that I want to modify to use select boxes instead of divs, but I have a little problem with what I have. Bascially, the user selects an option and it changes the text in between the ' ' (VALUE) to whatever the value of the option is: Code: <select onchange="updateLangTo('VALUE')">
<option value="en">English</option>
<option value="ar">Arabic</option>
</select>
So how would JavaScript be able to accomplish this? I have an onchange event JS working fine in IE, but not in FF. It's intended to reset an input field to zero when an adjacent drop-down menu value is changed. I've spent a half-hour looking for answers, and nothing has worked. Decided to post here in the hope there is a quick solution I've overlooked. TIA. Code: function resetInput()
{
y = document.getElementById("baseInput");
y.setAttribute("value","0");
}
And the HTML... Code:
<select id="baseMethod" onchange="resetInput()">
<option value="baseGrowth" selected="selected">Annual Growth Rate (%)</option>
<option value="baseTarget">Target Year Projection</option>
</select>
<input type="text" name="baseInput" id="baseInput" value="0" size="14" maxlength="14" /><br />
Hi there - this seems like it should be an obvious problem - can anyone spot it? I have an object, declared this way: Code: var FK_gid = new picChooser('FK_gid', FK_gidArray);
FK_gid.init();
and a select group like this: Code: <select id = "FK_gid" name = "FK_gid"> <option value="none" selected="true" >None</option> <option value="335" >pics/zoobins.jpg</option> etc. etc. </select> picChooser in construction sets the onchange of the select group like this: Code: this.list = document.getElementById('FK_gid');
this.list.setAttribute("onchange", "FK_gid.displayImage();");
and the object's displayImage(); is like this: Code: this.displayImage = function () {
this.clearImage();
if (this.list.selectedIndex != 0)
{
pic = new Image();
pic.src = this.reformat(this.list.options[this.list.selectedIndex].innerHTML);
img = document.createElement("img");
img.src = pic.src;
this.preview.appendChild(img);
}
}
But whenever I choose something else off the list I get this error message: Code: TypeError: Result of expression 'FK_gid.displayImage' [undefined] is not a function. It's bizarre because when I type FK_gid.displayImage(); into Safari's dynamic console the function works perfectly... Any ideas? Thanks Edd |
|||||||