Jump to content
Sign in to follow this  
alobi

Ho to disable a textbox when a radio button is selected

Recommended Posts

I have two radio buttons and two textboxes on a form, I want to be able to disable one of the textboxes when the optiion box is clicked. Pls help, I am very new to javascript. Thank you for you time. He is my code

function disablefield(){if ( document.admin.customerInfo_0.checked = true)document.admin.txtPhoneNumber.value = enabledelseif (admin.customerInfo_1.value="yes")document.admin.txtLastName.value.enabled=false}<form action="post" method="get" name="admin"><input type="radio" name="customerInfo" value="radio" id="customerInfo_0" /><input type="radio" name="customerInfo" value="radio" id="customerInfo_1" /><input name="txtPhoneNumber" type="text" id="PhoneNumber" size="25" />Last Name<input name="txtLastName" type="text" size

Share this post


Link to post
Share on other sites
<!DOCTYPE html><html><head><title>Disable</title><script>window.onload = function() {document.getElementById('phone_no').onchange = disablefield;document.getElementById('phone_yes').onchange = disablefield;}function disablefield(){if ( document.getElementById('phone_no').checked == true ){document.getElementById('PhoneNumber').value = '';document.getElementById('PhoneNumber').disabled = true}else if (document.getElementById('phone_yes').checked == true ){document.getElementById('PhoneNumber').disabled = false;}}</script></head><body><form action="post" method="get" name="admin">Have a phone?:<br/>No:<input type="radio" name="Phone" value="no" id="phone_no"/>Yes:<input type="radio" name="Phone" value="yes" id="phone_yes"/><br/>Phone:<input name="PhoneNumber" type="tel" id="PhoneNumber" size="25" /><br/>Last Name:<input name="LastName" type="text" size="25" /></form></body></html>
Edited by davej
  • Like 1

Share this post


Link to post
Share on other sites

I disagree with most of the answers provided there.

A lot of people are making the assumption that a form element will have properties named after the elements in contains. But what if the name of the form inputs are something like "action" or "nodeValue" for some reason?

Share this post


Link to post
Share on other sites

My first post was not clear enough. I am sorry, my bad. Here is a better posting. On my form, I have two option buttons, one for phone number and the other for last name. I have two text boxes , one for phone number the other for last name My goal is when the phone Number option is clicked to disable the last name text box, and enable the Phone Number text box, and when the option button last Name is clicked to disable the Phone Number text box and enable the txtlastName. Onformload. I need both options unchecked and the text boxes enabled

function disablefield() { if ( document.admin.customerInfo_0.checked = true) document.admin.txtPhoneNumber.value = enabled elseif (admin.customerInfo_1.value="yes") document.admin.txtLastName.value.enabled=false }<form action="post" method="get" name="admin"><input type="radio" name="customerInfo" value="radio" id="customerInfo_0" /><input type="radio" name="customerInfo" value="radio" id="customerInfo_1" /><input name="txtPhoneNumber" type="text" id="PhoneNumber" size="25" /> Last Name<input name="txtLastName" type="text" size
Edited by alobi

Share this post


Link to post
Share on other sites

I disagree with most of the answers provided there. A lot of people are making the assumption that a form element will have properties named after the elements in contains. But what if the name of the form inputs are something like "action" or "nodeValue" for some reason?

 

 

I asked this "best practice" question in another forum and was provided with a link that I thought was interesting...

 

http://jsperf.com/form-element-access

Share this post


Link to post
Share on other sites

It shows that getting the element by its ID is the fastest way. But even if document.myForm.firstName was actually faster, it has many problems, mainly identity conflicts.

Share this post


Link to post
Share on other sites

 

On my form, I have two option buttons, one for phone number and the other for last name. I have two text boxes , one for phone number the other for last name My goal is when the phone Number option is clicked to disable the last name text box, and enable the Phone Number text box, and when the option button last Name is clicked to disable the Phone Number text box and enable the txtlastName. Onformload. I need both options unchecked and the text boxes enabled

 

I'm sure you can adjust the logic in the example code above to get what you want. It might be something like this...

<!DOCTYPE html><html><head><title>Disable</title><script>window.onload = function() {document.getElementById('phone').onchange = disablefield;document.getElementById('name').onchange = disablefield;document.getElementById('LastName').disabled = false;document.getElementById('PhoneNumber').disabled = false;document.getElementById('name').checked = false;document.getElementById('phone').checked = false;}function disablefield(){if ( document.getElementById('name').checked == true ){document.getElementById('PhoneNumber').value = '';document.getElementById('PhoneNumber').disabled = true;document.getElementById('LastName').disabled = false;}else if (document.getElementById('phone').checked == true ){document.getElementById('LastName').value = '';document.getElementById('LastName').disabled = true;document.getElementById('PhoneNumber').disabled = false;}}</script></head><body><form action="#" method="get" name="admin">Phone: <input type="radio" name="idmethod" value="phone" id="phone"/><input name="PhoneNumber" type="tel" id="PhoneNumber" size="25" /><br/><br/>Name:<input type="radio" name="idmethod" value="name" id="name"/><input name="LastName" type="text" id="LastName" size="25" /></form></body></html>
Edited by davej

Share this post


Link to post
Share on other sites

I have tried the code it still does not working. My aim is to make sure that users do not search with both lastname and phone number at the same time. could you look at it one more time?

 

At this line of code I get a syntax error message "document.getElementById('phone').onchange = disablefield; " It tells me that code hint will not work until the error is fix.

Thanks

 

 

 

Share this post


Link to post
Share on other sites

At this line of code I get a syntax error message "document.getElementById('phone').onchange = disablefield; " It tells me that code hint will not work until the error is fix.

 

 

When I copy and paste the entire listing above it works fine for me with Firefox 22, so I don't know what you are doing.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...