How to highlight a submit button? 1

[tayorolls]

Hi,

This is a form with 2 sections within the same form. Either the users search by Criteria or the Users search by Period. Initially I had one Submit button to return the results for either search button. However they wanted 2 submit buttons which would be the mirror image of each other, but the value of the submit button would be different - "Search By" and "Sort By". On Click on the radio button for Criteria, the drop down for period is disabled. Similarly, on click of the radio button for Period, the drop-down box for Criteria is disabled.

How can I disable to the same disabling for the submit buttons. When radio button for "Period" is selected, then "Search By" submit button is disabled. Wen radio button for "Criteria" is selection, then "Sort By" submit button is disabled.

Can I do that even though both the submit buttons have the same name?

Thanks.

MY HTML code is below.

<form name="frmKaizen" action="getKaizenEvents.asp" method="post" onSubmit="return submitForm(this)">
				<fieldset class="fieldset1">
				<legend>Search by Criteria or Period. Clear your search before starting a new search</legend>
				
				<div class="input_spacer"></div>
				<div class="input_spacer"></div>
				
				<table class="table1" width="650" border=0 cellspacing="0" cellpadding="0">
				    <tr align="left">
					    <td bgcolor="#ececec">Search By:</td>
					    <td><input type="radio" name="SearchBy" value="Criteria" onClick="this.form.SelectPeriod.disabled=true; this.form.Search.disabled=false; this.form.SelectPeriod.style.backgroundcolor='#ECECEC'">&nbsp;Criteria</td>
					    <td bgcolor="#ececec">Search By:</td>
					    <td><input type="radio" name="SearchBy" value="Period" onClick="this.form.Search.disabled=true; this.form.SelectPeriod.disabled=false; this.form.Search.style.backgroundcolor='#ECECEC'">&nbsp;Period</td>
					</tr>
					<tr align="left">
					    <td colspan="4">&nbsp;</td>					    
					</tr>
					<tr align="left">
					    <td bgcolor="#ececec">Search Criteria:</td>
					    <td>
					        <select name="Search" onChange="togDisplay(this.value)" disabled="true">
				                <option value="">  -- Select --  </option>
                                <option value="Keywords">Keywords</option>
				                <option value="StartDate">Start Date</option>
	                            <option value="EndDate">End Date</option>
				                <option value="Coordinator">Coordinator</option>
				            </select>
					    </td>
					    <td bgcolor="#ececec">Select Period:</td>
					    <td>
					        					    

					        <select name="SelectPeriod" disabled="true">
    					        <option value="">  -- Select --  </option>
					            <option value="ALL"> -- All Kaizen Events --  </option>
					            
    					            <option value="2:2007">February, &nbsp;2007 </option>
					            
    					            <option value="3:2007">March, &nbsp;2007 </option>
					            
    					            <option value="4:2007">April, &nbsp;2007 </option>
					            
    					            <option value="5:2007">May, &nbsp;2007 </option>
					            
				            </select>				        
					    </td>					    
					</tr>
					<tr align="left">
					    <td colspan="2">
					    
					    <div class="input_spacer"></div>
				
        				<div id="divKeywords" style="display:none;">
		    		        <label class="label1">Keywords: </label>
			    	        <input class="hiddendiv" type="text" name="txtKeyWords" id="txtKeyWords" size=25 />
				        </div>
				
				        <div id="divStartDate" style="display:none;">
    				        <label class="label1">Start Date: </label>
				            <input class="hiddendiv" type="text" name="txtStartDate" id="txtStartDate" size=25 onBlur="return validateStartDate();"/>
				        </div>
				
    				    <div id="divEndDate" style="display:none;">
    				        <label class="label1">End Date: </label>
				            <input class="hiddendiv" type="text" name="txtEndDate" id="txtEndDate" size=25 onBlur="return validateEndDate();"/>
				        </div>
				
    				    <div id="divCoordinator" style="display:none;">
    				        <label class="label1">Co-ordinator: </label>
				            <input class="hiddendiv" type="text" name="txtCoordinator" id="txtCoordinator" size=25 />
				        </div>				
					    
					    </td>
					    <td colspan="2">&nbsp;</td>
					</tr>
					<tr>
					    <td colspan="2" align="center"><input type="submit" name="subSearch" id="subSearch1" value ="   Search By   " /></td>
					    <td colspan="2" align="center"><input type="submit" name="subSearch" id="subSearch2" value ="   Sort By     " /></td>
					</tr>
					<tr align="center">
					    <td colspan="4"><input type="button" value ="   Clear     " onClick="document.location.reload()"/></td>					   
					</tr>
				</table>
				</fieldset>
				</form>

 

[vacunita]

Really we only needed to see your radio buttons and submits. Anyway:
just add the js command to the radio buttons. for the submit buttons.

input type="radio" name="SearchBy" value="Criteria" onClick="this.form.SelectPeriod.disabled=true; this.form.Search.disabled=false; this.form.SelectPeriod.style.backgroundcolor='#ECECEC'; [red]this.form.submitbuttonname.disabled=true[/red];">&nbsp;Criteria</td>
                        <td bgcolor="#ececec">

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[tayorolls]

But this line that you added inline would disable both the submit buttons:

radio buttons are:

<td><input type="radio" name="SearchBy" value="Criteria" onClick="this.form.SelectPeriod.disabled=true; this.form.Search.disabled=false; this.form.SelectPeriod.style.backgroundcolor='#ECECEC'">&nbsp;Criteria</td>
                        <td bgcolor="#ececec">Search By:</td>
       
                 <td><input type="radio" name="SearchBy" value="Period" onClick="this.form.Search.disabled=true; this.form.SelectPeriod.disabled=false; this.form.Search.style.backgroundcolor='#ECECEC'">&nbsp;Period</td>

My Submit buttons are:

<td colspan="2" align="center"><input type="submit" name="subSearch" id="subSearch1" value ="   Search By   " /></td>
                        <td colspan="2" align="center"><input type="submit" name="subSearch" id="subSearch2" value ="   Sort By     " /></td>

 

[vacunita]

sorry, didn't catch that. If you must keep the names of both submit buttons the same, then use their ID's.

input type="radio" name="SearchBy" value="Period" onClick="this.form.Search.disabled=true; this.form.SelectPeriod.disabled=false; this.form.Search.style.backgroundcolor='#ECECEC';
[red]document.getElementById('subsearch2').disabled=true;[/red]">

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[tayorolls]

Thanks for the tip.