[duffgirl]

Hello,

I have been working on this homework project a couple of days now and am stumped. I am trying to perform some basic calculations using JS but for some reason it is just completely ingoring my functions and won't do anything when I press my calculate button. When I press the clear button I tried setting breakpoints and they are just skipped over, the form is not done yet, but I am trying to at least test the first portion that requires square footage be calculated to make sure I am on the right path. Couple things I have noticed, it does not like my submit buttons, something wrong with them? my onclick event? When I coded the buttons as button and not input, the function name in the onclick event turned blue instead of black, I am assuming there is a reason for this, since the function names I have not written yet for objects of the form are black. Of course using button instead of input won't work because they looked funky in the browsers. Any feedback is much appreciated as always!

  function getSquareFoot()
	    {     
	        var InputWidth=parseInt(document.getElementById('inputWidth').value);
	        var InputDepth=parseInt(document.getElementById('inputDepth').value);
	        var SquareFoot = document.getElementById('SquareFoot'); 
	        var msg=[];
   
	        if (isNaN('inputWidth')) 
	        { msg.push('Please enter a number');}
	        if (isNaN('inputDepth'))
	        {msg.push('Please enter a number');}
	        if (msg.length > 0) { 
	            SquareFoot.innerHTML = msg.join(', '); 
	        } 
	        else { SquareFoot.innerHTML = InputWidth * InputDepth / 12;
	        }
	    }

       
	    function getpriceSqft()
   
	    {      
	        var priceSqft=parseFloat(document.getElementById('priceSqft').value);
	        var BasePrice=document.getElementById('BasePrice');
	        var msg=[];
	
	        if (isNaN('priceSqft')) 
	        { msg.push('Please enter a number');}
	        if (msg.length > 0) { 
	            BasePrice.innerHTML = msg.join(', '); 
	        } 
	        else {BasePrice.innerHTML = priceSqft * getSquareFoot()}
	    }
  
  
  
   
   
	  
	     function calculateTotal()
	    {
	         {
	             var Total = getpriceSqft()
                   document.getElementById('Total')
	         }
	        
 
	    }
   
 
	   
	     function Clear()
	         
	         {
	             document.DeskCalculator.InputWidth.value = '';  
	             document.DeskCalculator.InputDepth.value = ''; 
	             document.DeskCalculator.SquareFoot.value = '';
	             document.DeskCalculator.BasePrice.value = '';
	             document.DeskCalculator.priceSqft.value = '';
	             document.DeskCalculator.Total.value = '';
                
	         }

<div id="divOutside">
        <form name="DeskCalculator" id="DeskCalculator" onsubmit="calculateTotal()" action="test">
            <fieldset id="fieldset1">
				<legend>Desk Calculator</legend>
					<fieldset id="fieldset4">
						<legend>Size</legend>
                <p>Width (inches):	&nbsp &nbsp &nbsp						Depth (inches):<br/>
							<input type="text" id="inputWidth" onchange="getSquareFoot()" />&nbsp &nbsp <input type="text" id="inputDepth" onchange="getSquareFoot()"/><br/>
				Square Feet:&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp &nbsp &nbsp &nbsp&nbsp &nbsp &nbsp&nbsp &nbsp &nbsp Price Per Sq.Ft.: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp	Base Price:<br/>
								<input type="text" id="SquareFoot" onchange="getSquareFoot()" value ="" />&nbsp &nbsp = <input type="text" id="priceSqft" onchange="getpriceSqft()" />&nbsp &nbsp  <input type="text" id="BasePrice" onchange="getpriceSqft()" value="" />
						</p>	</fieldset>
						
					<fieldset id="fieldset3">
				<legend>Drawers</legend>
			<input type="radio"  name="SelectedDrawer" value="one" onclick="getDrawers()" />One($35) <input type="radio"  name="SelectedDrawer" value="two"onclick="getDrawers()" />Two ($60)
		<input type="radio"  name="SelectedDrawer" value="custom"onclick="getDrawers()" />Custom <select id="custom" name="SelectedDrawer" onchange="getDrawers()">
	<option value="three">3</option>
		<option value="four">4</option>
			<option value="five">5</option>
				</select>
					</fieldset>
						
							<fieldset id="fieldset2">
								<legend>Wood</legend><p>
							<br/>
						<input type="radio"  name="SelectedWood" value="Veneer" onclick="getWood()" />Veneer &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  <input type="radio"  name="SelectedWood" value="Oak"  onclick="getWood()" />Oak (+ $50)<br/>
					<br/>
			<input type="radio"  name="SelectedWood" value="Maple" onclick="getWood()" />Maple (+ $75) <input type="radio"  name="SelectedWood" value="Cherry" onclick="getWood()" />Cherry (+ $100)<br/>
		</p>
        </fieldset>
    
		<p>  Total Cost:<input type="text" id="Total" value=" " /> <br/> <br />
   <input type="submit" onclick= "calculateTotal()" id="Calculate" value="Calculate Price" /><input type="submit" value="Clear" onclick= "Clear()" />
            </p>
				</fieldset>
					</form>
				</div>
			</body>
		</html>

[Atli]

Hey.

When you click the buttons, does the page reload? And the URL perhaps change to include a bunch of the input values?

If you put a <input type="submit"> button into a form element, when you click the button the form is submitted. Any click event handlers attached to the buttons will be ignored because the page will be redirected to the form's action page.

If you want to prevent a form from submitting when those buttons are pressed, have the onsubmit event return false. Something along the lines of:

<form onsubmit="return false;">

You can also use functions that return false instead of hard-coding the value like that.

[duffgirl]

thank you for the response, I added the return false it did certainly help resolve one issue I'm sure, I am getting an error that says SCRIPT5009: my function is undefined, the page will load but once I click calculate the error comes up, eventually putting up an error page after I cycled through all the functions which came back undefined.

This was what I used to return false

javascript

 function submitHandler()
         {
             alert(0);
             return false;
         }

and HTML

<form name="DeskCalculator" id="DeskCalculator" onsubmit="submitHandler()" action="test">

[raghav.naganathan]

One small suggestion to you.

<input type="submit" value="Clear" onclick= "Clear()" />

For your 'clear' button above, you can change the code to the following and it will help you to clear the boxes without any problems.

<input type="reset" value="Clear" />

This will help the page reset all the text boxes to blanks and will also remove the checks in radio buttons.

regards,
Raghav

[Dormilich]

duffgirl, on 18 December 2012 - 07:01 AM, said:

This was what I used to return false

[…]

and HTML

<form name="DeskCalculator" id="DeskCalculator" onsubmit="submitHandler()" action="test">

that doesn’t suffice. HTML event attributes (in contrast to JS event listeners) require an explicit return statement.

<form name="DeskCalculator" id="DeskCalculator" onsubmit="return submitHandler()" action="test">

[duffgirl]

I'm still working on it, unfortunately the clear button has to be hard coded, I get 10 points off if not

[andrewsw]

If you are not interested in submitting the form then don't add the submit buttons - it's rare to have two anyway. Just use input type="button" onclick="...". I would add return false; as the last line to your onclick functions.

[Note that it is still possible for someone to submit the form even without submit buttons. They can just press Enter to trigger submission.]

But your function does not return a value, or change the "Total" box. I presume you intended:

function calculateTotal()
{
    {
        var Total = getpriceSqft();
        document.getElementById('Total').innerHTML = Total;
    }
}

BTW It is preferable not to use input type="reset" anyway, because we cannot control its behaviour in different browsers.