SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Enable disabled button issue

    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.

    Code HTML4Strict:
    <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>

    Code JavaScript:
    $('#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. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •