Onclick to both disable and delete textbox data

Posted on 2009-02-24
Last Modified: 2012-05-06
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

Question by:Bulldog7
    LVL 8

    Accepted Solution

    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.
    LVL 19

    Assisted Solution

    by:Albert Van Halen
    Just set the value property to empty string

    Open in new window


    Author Closing Comment

    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.
    LVL 8

    Expert Comment

    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

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now