?
Solved

Why can't the submit button be an image?

Posted on 2008-06-19
17
Medium Priority
?
837 Views
Last Modified: 2012-06-21
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 ;-)
// 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);
}

Open in new window

0
Comment
Question by:seanpowell
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
17 Comments
 
LVL 17

Expert Comment

by:contactkarthi
ID: 21825864
<A HREF="javascript:document.myform.submit()"
onmouseover="document.myform.sub_but.src='butdown.gif'"
onmouseout="document.myform.sub_but.src='butup.gif'"
onclick="return val_form_this_page()">

<IMG SRC="butup.gif"
WIDTH="143" HEIGHT="39" BORDER="0" ALT="Submit this form"
NAME="sub_but">

</A>
0
 
LVL 31

Author Comment

by:seanpowell
ID: 21825938
That throws an error -
Can anyone tell me why the code needs an input button, and not an image?
0
 
LVL 82

Expert Comment

by:hielo
ID: 21825978
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()">
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 82

Expert Comment

by:hielo
ID: 21826001
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.
0
 
LVL 31

Author Comment

by:seanpowell
ID: 21826099
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
0
 
LVL 31

Author Comment

by:seanpowell
ID: 21826103
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">&nbsp;</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>
0
 
LVL 82

Expert Comment

by:hielo
ID: 21826196
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
0
 
LVL 31

Author Comment

by:seanpowell
ID: 21826330
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/bindings/autocomplete.xml :: onxblpopuphiding :: line 834"  data: no]
0
 
LVL 82

Expert Comment

by:hielo
ID: 21826807
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);
0
 
LVL 31

Author Comment

by:seanpowell
ID: 21827801
Sorry - still no good.

The script works fine - I just need to use an image button  - why is this so difficult :-(
0
 
LVL 7

Expert Comment

by:Dauhee
ID: 21830762
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).
0
 
LVL 82

Expert Comment

by:hielo
ID: 21831165
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">&nbsp;</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>

Open in new window

0
 
LVL 31

Author Comment

by:seanpowell
ID: 21832692
Hmm - the page doesn't go anywhere - can it submit to the same html page?
0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 21832816
>>the page doesn't go anywhere
So how are you going to process the information? If it does not submit anywhere, then the data will just be on the browser and you will never get/see it on the server. At any rate, if that is what you really want, then change:
return !(true && err);

to
return false;
0
 
LVL 31

Author Comment

by:seanpowell
ID: 21832916
The data is only supposed to be on the browser.

Thanks, I'll try that.
0
 
LVL 31

Author Closing Comment

by:seanpowell
ID: 31468956
Thanks - what a task that was...
0
 
LVL 82

Expert Comment

by:hielo
ID: 21833646
You are welcome!
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question