I'm not sure why, but my onclick event for one of my buttons is not working. It's the one I'm using to do the calculations on my form. I have two others, that are functioning correctly, one triggers a print function, and the other redirects to another page.
Here's the Javascript for the 3 buttons:
<script type="text/javascript">
function previewFunction() {
window.location.href = "preview.php";
}
function printFunction() {
window.print();
}
function calculateFunction() {
var e = document.getElementById("limit");
var limit = e.options[e.selectedIndex].value;
var rate = .0075;
var fee = .0025;
var cost = (rate + fee) * limit;
document.getElementById("cost").innerHtml = cost;
}
</script>
The calculateFunction() is the one that's not working.
Here's the HTML for the calculate button / cost span:
<tr>
<th align="center"><input class="buttonStuff" type="button" onclick="calculateFunction()" value="Calculate" /></th>
<th valign="bottom" align="center"><span style="font-size: 20pt;">Cost: </h3><span id="cost" style="text-decoration:underline;">$0.00</span></th>
</tr>
Here's the HTML for the two that do work:
<tr class="container">
<td width="25%" align="center"><input class="buttonStuff" type="button" onclick="previewFunction()" value="Preview" /></td>
<td width="25%" align="center"><input type="button" class="buttonStuff" onclick="printFunction()" value="Print" /></td>
</tr>
Nothing happens when I click Calculate. I'm sure it's something simple I'm overlooking, maybe not.
Thanks for any help you can provide. Let me know if I need to post more code.
Javascript is case sensitive, it's innerHTML, not innerHtml
document.getElementById("cost").innerHTML = cost;
I had a similar issue. I had child.js and a common.js files. In my case, My HTML file was using both the JS files and both of them had a function with the same name,
child.js
function calculateFunction(){...}
and also
common.js
function calculateFunction(){...}
After I remove one of these my code works fine and onclick started working. hope this helps!
Related
I have a Javascript variable Pass which holds value that I got from my XSLT. I want to display the value of Pass in my html webpage inside a table. The variable Pass definitely holds a value. I am able to get in in a alert box using the alert() function, But, i am not able to get this value to my webpage.
I have so far tried these two but they dont seem to work.
<td> Pass</td>
<td> document.write(Pass) </td>
Here is the section of code, where I need help:
<table>
<script type="text/javascript">
var Total='<xsl:value-of select="#total" />'
var Failure='<xsl:value-of select="#errors" />'
var Pass= Total - Failure
<tr>
<td>Pass </td>
<td> *Value of the variable 'Pass' goes here* </td>
</tr>
</script>
</table>
If you're using XSLT anyway, just use XSLT to output the value instead of JavaScript:
<table>
<tr>
<td>Pass </td>
<td><xsl:value-of select="#total - #errors"/></td>
</tr>
<table>
<table>
<tr>
<td>Pass </td>
<td> *Value of the variable '<span id="PassId">Pass</span>' goes here* </td>
</tr>
</table>
<script type="text/javascript">
var Total='<xsl:value-of select="#total" />'
var Failure='<xsl:value-of select="#errors" />'
var Pass= Total - Failure;
document.getElementById('PassId').innerHTML = Pass;
</script>
Assign the element you want the value to appear in an id.
Eg <td id="myexample"><\td>
You can now easily access that element from JavaScript.
var myexample = document.getElementById("myexample");
myexample.innerHTML = "your value here";
As long as you can get your XSLT to render the value correctly for vars Total and Failure. The following can work:
<html><body>
<table>
<tr>
<td>Pass </td>
<td> *Value of the variable <span id="passval"></span> goes here* </td>
</tr>
</table>
<script type="text/javascript">
var Total='<xsl:value-of select="#total" />'
var Failure='<xsl:value-of select="#errors" />'
var Pass= Total-Failure;
var passvalholder = document.getElementById("passval");
passvalholder.innerHTML=Pass;
</script>
</body></html>
I am trying to get the value of a hidden input inside a tag in html table element through javascript in a MVC view. i have get the respective value of the hidden input which is in a loop,when the the respective row is clicked. I have tried many codes but it returns the value of the first row alone for all the rows in the table. i tried the following:
#foreach (var item in Model)
{
<tr>
<td hidden><input value="#item.QuoteId" id="QuoteID" class="QuoteID"> </td>
</tr>
}
javascript:
$("tr").click(function () {
var quoteid=document.getElementById("#QuoteID").innerHTML
alert(quoteid);
alert($('.QuoteID').val());
}
if my db contains 3 values for quote,say 12,17,18.. it alerts 12 for all the row clicks.. Pls help,I am literally stuck. I have been trying it from 3 days,i cant figure it out. I guess it is some simple mistake from my side. Pls help. I am not able to finish the work assigned to me because of this simple error.
You're using the same id multiple times. The ID has to be unique!! To make this to work you could call the unique id, or put a onclick on the specific row and call your function with this. In your function you can use this.value.
<script>
function ShowMeThePower(myElement) {
alert(myElement.innerHTML);
}
</script>
<div onclick="ShowMeThePower(this);">This is great!</div>
http://jsfiddle.net/3RJVd/
Edit:
To satisfy the OP:
<table>
<tr>
<td><input type="text" id="show1" value="test1" /></td>
</tr>
<tr>
<td><input type="text" id="show2" value="test2" /></td>
</tr>
</table>
<script>
for (var i = 1; i < 3; i++){
alert(document.getElementById('show' + i).value);
}
</script>
If you see, it's the same logic. Just be sure to use unique id's.
http://jsfiddle.net/4gMy6/
I don't know why, but this code is not working! There is no error in the code other than that! Because when I change the values of num1, num2, num3 to some predefined values it works perfectly fine. Please help.
The HTML is..
<h3>Choose Image</h3>
<table border="1">
<tr>
<td><h4>Ball_1</h4></td>
<td><img src="images/b.png"></td>
<td>No. of Images: <input type="text" id="one_number_id" value="0"> </td>
</tr>
<tr>
<td><h4>Ball_2</h4></td>
<td><img src="images/b2.png"></td>
<td>No. of Images: <input type="text" id="two_number_id" value="0"></td>
</tr>
<tr>
<td><h4>Ball_3</h4></td>
<td><img src="images/b3.png"></td>
<td>No. of Images: <input type="text" id="three_number_id" value="0"></td>
</tr>
</table>
And this is inside Script.js
var one_n_img = document.getElementById("one_number_id");
var two_n_img = document.getElementById("two_number_id");
var three_n_img = document.getElementById("three_number_id");
var num1 = one_n_img.value;
var num2 = two_n_img.value;
var num3 = three_n_img.value;
The only requirement other than a unique ID is that the element is rendered and available in the DOM. If you're script is included prior to this, then getElementById() will return null.
Wrap the code in the window.onload event, to ensure that the elements are ready for use:
window.onload = function(){
var one_n_img = document.getElementById("one_number_id");
var two_n_img = document.getElementById("two_number_id");
var three_n_img = document.getElementById("three_number_id");
var num1 = one_n_img.value;
var num2 = two_n_img.value;
var num3 = three_n_img.value;
};
You need need to check inside your Script.js. You must run all of your script onload event. For jquery, use $(document).ready otherwise use following solution. $(document).ready equivalent without jQuery
I have the following javascript function:
function updatePrintCost()
{
var qty = parseFloat(document.getElementById('qty').value);
var pp = parseFloat(document.getElementById('pp').value);
var finalPrice = qty * pp;
if (!isNaN(finalPrice))
fp.value = "$" + finalPrice.toFixed(2);
else
fp.value = "Error";
}
it's called by the following HTML code:
<table>
<tr>
<td style='border:none;'>Quantity:</td>
<td style='border:none;'><input type='text' id='qty' name='quantity' onChange="updatePrintCost()" style='width:50px;' /></td>
<td style='border:none;'>Print Price:</td>
<td style='border:none;'><input type='text' name='printPrice' id='pp' onChange="updatePrintCost()" style='width:50px;' /></td>
<td style='border:none;'> = </td>
<td style='border:none;'><input type='finalPrice' id='fp' placeholder='0.00' style='width:75px;' /></td>
</tr>
</table>
I put some alert tests in there, and the function IS being called, but fails out when it comes to setting the value of fp.
Can anybody see why this won't work?
Where is your declaration of fp? You need:
var fp = document.getElementById('fp');
Or:
if (!isNaN(finalPrice))
document.getElementById('fp').value = "$" + finalPrice.toFixed(2);
else
document.getElementById('fp').value = "Error";
You also have a weird html input in type finalPrice rather than a regular type.
See this if you want to know why it was working in Firefox. This is a cross browser solution. The way you were doing it works in only newer browsers.
Not answering your question, but it seems to me that <input type='finalPrice' ...> is not want you meant. You probably mean <input type='text' name='finalPrice' ...>, right?
it is not fp,value.
change it to f.p.value
it'll work
My application has a list of indicators, each with its help button. Clicking on each button, brings up a ToolTipDialog with definition for each respectively. The way I have written the code (below), the content does not get refreshed when the user clicks on another help button within the list after having clicked the first one. I have not been able to figure out how to change the "content" dynamically. Any help will be appreciated:
HTML:
<div dojoType="dijit.layout.ContentPane" id="group1" title="Population projection" selected="true">
<table id="popIndTable">
<tr id="someID">
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkCBR" name="checkInd" /></td>
<td id="indCBR">Crude Birth Rate</td>
<td id="infoCBR"><img id="imgCBR" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest1" name="checkInd" /></td>
<td id="indTest1">Test 1</td>
<td id="infoTest1"><img id="imgTest1" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest2" name="checkInd" /></td>
<td id="indTest2">Test 2</td>
<td id="infoTest2"><img id="imgTest2" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
</table>
</div>
JavaScript:
function showToolTipDialog(node,infoId){
var infoText;
var infoElem = dojo.byId(infoId).parentNode.id;
if (infoElem == "infoCBR"){
infoText = "This is the text container for CBR";
}
else if (infoElem == "infoTest1"){
infoText = "This is the text container for Test1";
}
if (!tooltipDialog) {
tooltipDialog = new dijit.TooltipDialog({
content: infoText,
style: "width:200px;height:auto;",
autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
refocus: !dojo.isIE
});
dijit.popup.open({ popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
else {
if (tooltipDialog.opened_) {
dijit.popup.close(tooltipDialog);
tooltipDialog.opened_ = false;
}
else {
dijit.popup.open({popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
}
}
I believe the preferred way to change the value of a dojo widget programatically is to use the .set() method. ie:
this.myTooltipDialog.set("content", newContent);
Rather than:
this.myTooltip.content = newContent;
It looks like you never reset the content of your tooltipDialog. You create it once, but once it's created (new dijit.TooltipDialog({...})) it remains static.
I don't know the Dojo API. But can you just set the content value directly? Perhaps immediately after your first else:
tooltipDialog.content = infoText;
This is just a guess, but if Dojo's API is simple enough, that might do the trick.
If not, you might have to remove your if (!tooltipDialog) { check.
If your content is not too complicate, I suggestion you create a new TooltipDialog every call and clear it when blur, like
var dlgDiv = dojo.create("div");
var dlg = new dijit.TooltipDialog({
content: dlgDiv,
onBlur: function () {
popup.close(this);
this.destroyRecursive();
}
});
// you can create any content within dlgDiv at here dynamicly
dojo.popup.open({
around: yourArondNode ,
orient: ["below", "before", "after", "above"],
popup: dlg
});
dlg.focus();