Enable disabled button issue

JavaScript
1

Hi,

I’m trying a simple JQuery enable a disabled button once the fields have all been entered for the Horzontal section.

At the moment as long as one input val has been entered it enables the button?

Could someone advise how to make it so it only enables if all vals are entered?

Thanks in advance.

<div id="oCalculator">
				<form action="add.php" enctype="multipart/form-data">
					<table width="430">
						<tr>
							<td width="300"><strong>Q. Would you like to install horizontal or vertical?</strong></td>
							<td><select name="oSelectType" id="oSelectType">
								<option>Please Select</option>
								<option value="horz">Horizontal</option>
								<option value="vert">Vertical</option>
							</select></td>
						</tr>
					</table>
					<table width="430" id="oHorzCalc">	
						<tr>
							<td colspan="2">Please enter the details below for us to calculate your results</td>
						</tr>
						<tr>
							<td>Trench Width (Meters): <input type="text" name="trench-width" id="trench-width" /></td>
							<td>Depth of Conducrete (Meters): <input type="text" name="depth" id="depth" /></td>
						</tr>
						<tr>
							<td>Length (Meters): <input type="text" name="trench-length" id="trench-length"  /></td>
							<td>Email Address: <input type="text" name="email" id="email" /></td>
						</tr>
					</table>
					<!--<table width="430" id="oVertCalc">	
						<tr>
							<td colspan="2">Please enter the details below for us to calculate your results</td>
						</tr>
						<tr>
							<td>Hole Diameter (cm): <input type="text" name="hole-diameter" /></td>
							<td>Depth of Conducrete (Meters): <input type="text" name="depth" /></td>
						</tr>
						<tr>
							<td>Email Address: <input type="text" name="email" /></td>
						</tr>
					</table>-->
					<table width="430" id="oResultArea">
						<tr>
							<td><input type="image" src="images/button.png" title="Get Results" name="resultsbutton" disabled="disabled" id="resultsbutton"/></td>
							<td id="oAnswer"></td>
						</tr>	
					</table>
					
				</form>
				
			</div>

$('#oHorzCalc input').blur(function()
	{
 	   if($(this).val() ) {
	      $('#resultsbutton').removeAttr('disabled');
	      $('#oResultArea').css('filter', 'alpha(opacity=100)');
	      $('#oResultArea').css('opacity', '1.0');
	   } else {
	      $('#resultsbutton').attr('disabled', 'disabled');
	      $('#oResultArea').css('filter', 'alpha(opacity=40)');
	      $('#oResultArea').css('opacity', '0.4');
	    }
	    
	});
2

Why use jquery for something relatively simple when you can do it with less code using plain javascript.

If you look at the “back end” code jquery will run to do the same thing, it will be a lot more code than doing it with plain javascript.

Just loop through the inputs and if all have a valid value entered then enable the button.