• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 186
  • Last Modified:

Onclick to both disable and delete textbox data

I currently have a checkbox that will enable/disable a textbox, but only grays out the data if you click the box after. So after you hit Submit it is still there as a value. I would like to be able to, if you accidentally put text in the textfield and click on the checkbox it will both DELETE the text and make the field inactive. Is it possible with only one onclick?

<label for="txtBPSys">BP *</label></td>
			  <td width="187">
			  	<input size="3" type="text" id="txtBPSys" name="txtBPSys" maxlength="3" value="<%=.BPSys%>" /> / <input size="3" type="text" id="txtBPDia" name="txtBPDia" maxlength="3" value="<%=.BPDia%>" />
			  	<input type="checkbox" name="MyCheckboxBP"onclick="if(this.checked){txtBPSys.disabled=true;txtBPDia.disabled=true}else{txtBPSys.disabled=false;txtBPDia.disabled=false}"/>
				ND:<br /><br />			

Open in new window

  • 2
2 Solutions
Short answer: Yes ;-)

Not really much longer but complete answer:

Replace your input with this:
<input type="checkbox" name="MyCheckboxBP" onclick="if(this.checked){txtBPSys.disabled=true;txtBPDia.disabled=true;txtBPDia.value='';txtBPSys.value=''}else{txtBPSys.disabled=false;txtBPDia.disabled=false}"/>

Of course, your preset default values for the text fields are deleted and don't appear again if unchecking the box.
Albert Van HalenCommented:
Just set the value property to empty string

Open in new window

Bulldog7Author Commented:
Awesome guys, I only split it because you literally answered 2 mins. apart!
Quick question though...if I submit with text it refreshes with the same (GOOD), but if I click on the checkbox to indicate no data, when I refresh, the bozes are unchecked and the text is once again enabled.
That's something you can't do much about, it's dependent on the browsers behaviour. When reloading a page, the browser sends another request for the same page to the server, and the server can't know anything about the changes made to the form because it was not submitted. The browser 'could' in theory notice it is loading the same form and apply the changes you made after reloading, but I don't know of any browser behaving in such way. Usually, if you hit reload, it is because you want the form in the initial state.

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now