Jump to content

Ho to disable a textbox when a radio button is selected

alobi

By alobi
in JavaScript

 Share

Recommended Posts

alobi Newbie

alobi

Posted
Posted

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

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted (edited) 
<!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
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

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?

Link to comment
Share on other sites
alobi Newbie

alobi

Posted
  • Author
Posted (edited)

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
Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

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

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

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.

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted (edited)

 

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
Link to comment
Share on other sites
alobi Newbie

alobi

Posted
  • Author
Posted

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

 

 

 

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...