seanpowell
asked on
Why can't the submit button be an image?
Can anyone tell me why this code needs an input button, and not an image?
This works:
<input name="cmdCalc" type="button" id="cmdCalc" value="Calculate Benefit" onClick="CalcThis();">
This doesn't!
<input name="cmdCalc" src="calculate.gif" type="image" id="cmdCalc" onClick="CalcThis();">
Thanks for your help ;-)
This works:
<input name="cmdCalc" type="button" id="cmdCalc" value="Calculate Benefit" onClick="CalcThis();">
This doesn't!
<input name="cmdCalc" src="calculate.gif" type="image" id="cmdCalc" onClick="CalcThis();">
Thanks for your help ;-)
// JavaScript Document
var err;
function CalcThis() {
err = "";
var taxRate = document.frmStockCalculation.slcTaxRate.value;
var marketValue = document.frmStockCalculation.txtMarketValue.value;
var originalCost = document.frmStockCalculation.txtOriginalCost.value;
//Check empty or not number fields
if (!taxRate) {err = "Please select your marginal tax rate.";}
numCheck(marketValue,"current market value of your stock");
numCheck(originalCost,"original cost of the stock");
if(err) {
alert(err);
} else {
taxRate = parseInt(taxRate);
marketValue = parseInt(marketValue);
originalCost = parseInt(originalCost);
var taxCredit = marketValue * taxRate * 0.01;
var capitalGain = (marketValue - originalCost) * 0.5 * taxRate * 0.01;
var donation_direct = marketValue - taxCredit;
var donation_sell = marketValue - taxCredit + capitalGain;
//1. Amount of your donation
document.getElementById("lblAmount_Direct").innerHTML = formatCurrency(marketValue);
document.getElementById("lblAmount_Sell").innerHTML = formatCurrency(marketValue);
//2. Less your tax credit
document.getElementById("lblTaxCredit_Direct").innerHTML = formatCurrency(taxCredit * (-1));
document.getElementById("lblTaxCredit_Sell").innerHTML = formatCurrency(taxCredit * (-1));
//3. Plus tax on the capital gain
document.getElementById("lblCapitalGain_Direct").innerHTML = formatCurrency(0);
document.getElementById("lblCapitalGain_Sell").innerHTML = formatCurrency(capitalGain);
//4. After tax cost of your donation
document.getElementById("lblAfterTaxCost_Direct").innerHTML = formatCurrency(donation_direct);
document.getElementById("lblAfterTaxCost_Sell").innerHTML = formatCurrency(donation_sell);
//5. Net Benefit
document.getElementById("lblNetBenefit_Direct").innerHTML = formatCurrency(donation_sell - donation_direct);
}
}
function numCheck(num,att) {
if (!err) {
if (!num) {err = "Please enter "+att+".";}
else if (isNaN(num)) {err = "Please enter number for "+att+".";}
}
}
function formatCurrency(num) {
var sign, cents;
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num)) num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.round(num/100).toString();
//num = Math.floor(num/100).toString();
if(cents<10)cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '$' + num);
//return (((sign)?'':'-') + '$' + num + '.' + cents);
}
ASKER
That throws an error -
Can anyone tell me why the code needs an input button, and not an image?
Can anyone tell me why the code needs an input button, and not an image?
if <input type="button"...> works, then try changing this:
<input name="cmdCalc" src="calculate.gif" type="image" id="cmdCalc" onClick="CalcThis();">
to this:
<input name="cmdCalc" src="calculate.gif" type="image" id="cmdCalc">
And put the funtion call on an onsubmit instead:
<form ... onsubmit="return CalcThis()">
<input name="cmdCalc" src="calculate.gif" type="image" id="cmdCalc" onClick="CalcThis();">
to this:
<input name="cmdCalc" src="calculate.gif" type="image" id="cmdCalc">
And put the funtion call on an onsubmit instead:
<form ... onsubmit="return CalcThis()">
type="button" IS a button - meaning it does not submit the form. type="submit" AND type="image" ARE submit buttons. So you altered the functionality of your form. If you want the image then you will need to use an onsubmit event handler on your form.
ASKER
Well that makes perfect sence although it's not funtioning. Attached is the html if anyone could tell me where I'm going wrong...
cao-sec-button-calculate.gif
cao-sec-button-calculate.gif
ASKER
So much for attaching html...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<script language="javascript" src="cao-sec-calculator.js "></script >
<form name="frmStockCalculation" method="post" id="frmStockCalculation" onsubmit="return CalcThis()">
<table cellspacing="0" class="sec-contenttable">
<tr>
<td class="secmainimg"> < /td>
<td class="secmaindata">
<p><b>Calculate your net benefit of donating securities</b></p>
<table width="480" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>Your combined marginal tax rate:</td>
<td>
<select name="slcTaxRate">
<option value="">Please select</option>
<option value="26">26%</option>
<option value="30">30%</option>
<option value="34">34%</option>
<option value="38">38%</option>
<option value="46">46%</option>
</select>
</td>
</tr>
<tr>
<td>Current fair market value of your securities:</td>
<td>$ <input name="txtMarketValue" type="text" size="15" maxlength="15"></td>
</tr>
<tr>
<td>Original cost of your securities:</td>
<td>$ <input name="txtOriginalCost" type="text" size="15" maxlength="15"></td>
</tr>
</table>
<input name="cmdCalc" src="cao-sec-button-calcul ate.gif" type="image" id="cmdCalc">
</td>
</tr>
</table>
<table cellspacing="5">
<tr>
<td style="padding:5px;vertica l-align:bo ttom;">Res ults</td>
<td style="padding:5px;vertica l-align:bo ttom;text- align:cent er;"><b>Do nate Securities</b></td>
<td style="padding:5px;vertica l-align:bo ttom;text- align:cent er;"><b>Se ll Securities<br>and Donate Cash</b></td>
</tr>
<tr>
<td style="background:#fff;pad ding:5px;b order:1px solid #e2dac4;">Value of your donation</td>
<td style="text-align:right;ba ckground:# fff;paddin g:5px;bord er:1px solid #e2dac4;"><div id="lblAmount_Direct"></di v></td>
<td style="text-align:right;ba ckground:# fff;paddin g:5px;bord er:1px solid #e2dac4;"><div id="lblAmount_Sell"></div> </td>
</tr>
<tr>
<td style="background:#fff;pad ding:5px;b order:1px solid #e2dac4;">Subtract: charitable tax credit</td>
<td style="text-align:right;ba ckground:# fff;paddin g:5px;bord er:1px solid #e2dac4;"><div id="lblTaxCredit_Direct">< /div></td>
<td style="text-align:right;ba ckground:# fff;paddin g:5px;bord er:1px solid #e2dac4;"><div id="lblTaxCredit_Sell"></d iv></td>
</tr>
<tr>
<td style="background:#fff;pad ding:5px;b order:1px solid #e2dac4;">Add: capital gains tax</td>
<td style="text-align:right;ba ckground:# fff;paddin g:5px;bord er:1px solid #e2dac4;"><div id="lblCapitalGain_Direct" ></div></t d>
<td style="text-align:right;ba ckground:# fff;paddin g:5px;bord er:1px solid #e2dac4;"><div id="lblCapitalGain_Sell">< /div></td>
</tr>
<tr>
<td style="background:#fff;pad ding:5px;b order:1px solid #e2dac4;">Net cost of donation</td>
<td style="text-align:right;ba ckground:# fff;paddin g:5px;bord er:1px solid #e2dac4;"><div id="lblAfterTaxCost_Direct "></div></ td>
<td style="text-align:right;ba ckground:# fff;paddin g:5px;bord er:1px solid #e2dac4;"><div id="lblAfterTaxCost_Sell"> </div></td >
</tr>
<tr>
<td style="background:#ccc;pad ding:5px;b order:1px solid #999;"><b>Net Benefit of Your Securities Donation</b></td>
<td style="background:#ccc;pad ding:5px;b order:1px solid #999;" colspan="2"><div id="lblNetBenefit_Direct"> <b></b></d iv></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<script language="javascript" src="cao-sec-calculator.js
<form name="frmStockCalculation"
<table cellspacing="0" class="sec-contenttable">
<tr>
<td class="secmainimg"> <
<td class="secmaindata">
<p><b>Calculate your net benefit of donating securities</b></p>
<table width="480" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>Your combined marginal tax rate:</td>
<td>
<select name="slcTaxRate">
<option value="">Please select</option>
<option value="26">26%</option>
<option value="30">30%</option>
<option value="34">34%</option>
<option value="38">38%</option>
<option value="46">46%</option>
</select>
</td>
</tr>
<tr>
<td>Current fair market value of your securities:</td>
<td>$ <input name="txtMarketValue" type="text" size="15" maxlength="15"></td>
</tr>
<tr>
<td>Original cost of your securities:</td>
<td>$ <input name="txtOriginalCost" type="text" size="15" maxlength="15"></td>
</tr>
</table>
<input name="cmdCalc" src="cao-sec-button-calcul
</td>
</tr>
</table>
<table cellspacing="5">
<tr>
<td style="padding:5px;vertica
<td style="padding:5px;vertica
<td style="padding:5px;vertica
</tr>
<tr>
<td style="background:#fff;pad
<td style="text-align:right;ba
<td style="text-align:right;ba
</tr>
<tr>
<td style="background:#fff;pad
<td style="text-align:right;ba
<td style="text-align:right;ba
</tr>
<tr>
<td style="background:#fff;pad
<td style="text-align:right;ba
<td style="text-align:right;ba
</tr>
<tr>
<td style="background:#fff;pad
<td style="text-align:right;ba
<td style="text-align:right;ba
</tr>
<tr>
<td style="background:#ccc;pad
<td style="background:#ccc;pad
</tr>
</table>
</form>
</body>
</html>
Your html looks OK. Open your page throught Firefox and cheed if Firebug reports any errors.
BTW: we don't know what's in
cao-sec-calculator.js
BTW: we don't know what's in
cao-sec-calculator.js
ASKER
The js is at the top of this page...
Beats me what this means...
Error: uncaught exception: [Exception... "Cannot modify properties of a WrappedNative" nsresult: "0x80570034 (NS_ERROR_XPC_CANT_MODIFY_ PROP_ON_WN )" location: "JS frame :: chrome://global/content/bi ndings/aut ocomplete. xml :: onxblpopuphiding :: line 834" data: no]
Beats me what this means...
Error: uncaught exception: [Exception... "Cannot modify properties of a WrappedNative" nsresult: "0x80570034 (NS_ERROR_XPC_CANT_MODIFY_
Your function does NOT have a return value. It need to return true if evrything is OK, false otherwise. Add this at the end:
return !(true && err);
return !(true && err);
ASKER
Sorry - still no good.
The script works fine - I just need to use an image button - why is this so difficult :-(
The script works fine - I just need to use an image button - why is this so difficult :-(
how does it not work? - does it not do anything or do you get an error (need to check error console in firefox or enable error visibility in IE).
The attached code is what I tried and it works. If by "not working" you mean it is not seen on your server, then it's because your <form> is missing the action attribute - the url where the data should be submitted to.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<!-- <script language="javascript" src="cao-sec-calculator.js"></script> -->
<script type="text/javascript">
// JavaScript Document
var err;
function CalcThis() {
err = "";
var taxRate = document.frmStockCalculation.slcTaxRate.value;
var marketValue = document.frmStockCalculation.txtMarketValue.value;
var originalCost = document.frmStockCalculation.txtOriginalCost.value;
//Check empty or not number fields
if (!taxRate) {err = "Please select your marginal tax rate.";}
numCheck(marketValue,"current market value of your stock");
numCheck(originalCost,"original cost of the stock");
if(err) {
alert(err);
} else {
taxRate = parseInt(taxRate);
marketValue = parseInt(marketValue);
originalCost = parseInt(originalCost);
var taxCredit = marketValue * taxRate * 0.01;
var capitalGain = (marketValue - originalCost) * 0.5 * taxRate * 0.01;
var donation_direct = marketValue - taxCredit;
var donation_sell = marketValue - taxCredit + capitalGain;
//1. Amount of your donation
document.getElementById("lblAmount_Direct").innerHTML = formatCurrency(marketValue);
document.getElementById("lblAmount_Sell").innerHTML = formatCurrency(marketValue);
//2. Less your tax credit
document.getElementById("lblTaxCredit_Direct").innerHTML = formatCurrency(taxCredit * (-1));
document.getElementById("lblTaxCredit_Sell").innerHTML = formatCurrency(taxCredit * (-1));
//3. Plus tax on the capital gain
document.getElementById("lblCapitalGain_Direct").innerHTML = formatCurrency(0);
document.getElementById("lblCapitalGain_Sell").innerHTML = formatCurrency(capitalGain);
//4. After tax cost of your donation
document.getElementById("lblAfterTaxCost_Direct").innerHTML = formatCurrency(donation_direct);
document.getElementById("lblAfterTaxCost_Sell").innerHTML = formatCurrency(donation_sell);
//5. Net Benefit
document.getElementById("lblNetBenefit_Direct").innerHTML = formatCurrency(donation_sell - donation_direct);
}
return !(true && err);
}
function numCheck(num,att) {
if (!err) {
if (!num) {err = "Please enter "+att+".";}
else if (isNaN(num)) {err = "Please enter number for "+att+".";}
}
}
function formatCurrency(num) {
var sign, cents;
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num)) num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.round(num/100).toString();
//num = Math.floor(num/100).toString();
if(cents<10)cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '$' + num);
//return (((sign)?'':'-') + '$' + num + '.' + cents);
}
</script>
<form action="http://www.yoursite.com/" name="frmStockCalculation" method="post" id="frmStockCalculation" onsubmit="return CalcThis()">
<table cellspacing="0" class="sec-contenttable">
<tr>
<td class="secmainimg"> </td>
<td class="secmaindata">
<p><b>Calculate your net benefit of donating securities</b></p>
<table width="480" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>Your combined marginal tax rate:</td>
<td>
<select name="slcTaxRate">
<option value="">Please select</option>
<option value="26">26%</option>
<option value="30">30%</option>
<option value="34">34%</option>
<option value="38">38%</option>
<option value="46">46%</option>
</select>
</td>
</tr>
<tr>
<td>Current fair market value of your securities:</td>
<td>$ <input name="txtMarketValue" type="text" size="15" maxlength="15"></td>
</tr>
<tr>
<td>Original cost of your securities:</td>
<td>$ <input name="txtOriginalCost" type="text" size="15" maxlength="15"></td>
</tr>
</table>
<input name="cmdCalc" src="cao-sec-button-calculate.gif" type="image" id="cmdCalc">
</td>
</tr>
</table>
<table cellspacing="5">
<tr>
<td style="padding:5px;vertical-align:bottom;">Results</td>
<td style="padding:5px;vertical-align:bottom;text-align:center;"><b>Donate Securities</b></td>
<td style="padding:5px;vertical-align:bottom;text-align:center;"><b>Sell Securities<br>and Donate Cash</b></td>
</tr>
<tr>
<td style="background:#fff;padding:5px;border:1px solid #e2dac4;">Value of your donation</td>
<td style="text-align:right;background:#fff;padding:5px;border:1px solid #e2dac4;"><div id="lblAmount_Direct"></div></td>
<td style="text-align:right;background:#fff;padding:5px;border:1px solid #e2dac4;"><div id="lblAmount_Sell"></div></td>
</tr>
<tr>
<td style="background:#fff;padding:5px;border:1px solid #e2dac4;">Subtract: charitable tax credit</td>
<td style="text-align:right;background:#fff;padding:5px;border:1px solid #e2dac4;"><div id="lblTaxCredit_Direct"></div></td>
<td style="text-align:right;background:#fff;padding:5px;border:1px solid #e2dac4;"><div id="lblTaxCredit_Sell"></div></td>
</tr>
<tr>
<td style="background:#fff;padding:5px;border:1px solid #e2dac4;">Add: capital gains tax</td>
<td style="text-align:right;background:#fff;padding:5px;border:1px solid #e2dac4;"><div id="lblCapitalGain_Direct"></div></td>
<td style="text-align:right;background:#fff;padding:5px;border:1px solid #e2dac4;"><div id="lblCapitalGain_Sell"></div></td>
</tr>
<tr>
<td style="background:#fff;padding:5px;border:1px solid #e2dac4;">Net cost of donation</td>
<td style="text-align:right;background:#fff;padding:5px;border:1px solid #e2dac4;"><div id="lblAfterTaxCost_Direct"></div></td>
<td style="text-align:right;background:#fff;padding:5px;border:1px solid #e2dac4;"><div id="lblAfterTaxCost_Sell"></div></td>
</tr>
<tr>
<td style="background:#ccc;padding:5px;border:1px solid #999;"><b>Net Benefit of Your Securities Donation</b></td>
<td style="background:#ccc;padding:5px;border:1px solid #999;" colspan="2"><div id="lblNetBenefit_Direct"><b></b></div></td>
</tr>
</table>
</form>
</body>
</html>
ASKER
Hmm - the page doesn't go anywhere - can it submit to the same html page?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
The data is only supposed to be on the browser.
Thanks, I'll try that.
Thanks, I'll try that.
ASKER
Thanks - what a task that was...
You are welcome!
onmouseover="document.myfo
onmouseout="document.myfor
onclick="return val_form_this_page()">
<IMG SRC="butup.gif"
WIDTH="143" HEIGHT="39" BORDER="0" ALT="Submit this form"
NAME="sub_but">
</A>