alobi Posted July 6, 2013 Share Posted July 6, 2013 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 More sharing options...
davej Posted July 6, 2013 Share Posted July 6, 2013 (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 July 6, 2013 by davej 1 Link to comment Share on other sites More sharing options...
davej Posted July 6, 2013 Share Posted July 6, 2013 I guess this is also a topic for discussion: http://stackoverflow.com/questions/2435525/best-practice-access-form-elements-by-html-id-or-name-attribute Link to comment Share on other sites More sharing options...
Ingolme Posted July 6, 2013 Share Posted July 6, 2013 I guess this is also a topic for discussion: http://stackoverflow.com/questions/2435525/best-practice-access-form-elements-by-html-id-or-name-attribute 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 More sharing options...
alobi Posted July 9, 2013 Author Share Posted July 9, 2013 To Invested member, The code works fine. Once again, thank you for your time Link to comment Share on other sites More sharing options...
alobi Posted July 9, 2013 Author Share Posted July 9, 2013 (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 July 10, 2013 by alobi Link to comment Share on other sites More sharing options...
davej Posted July 12, 2013 Share Posted July 12, 2013 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 More sharing options...
Ingolme Posted July 12, 2013 Share Posted July 12, 2013 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 More sharing options...
davej Posted July 12, 2013 Share Posted July 12, 2013 (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 July 12, 2013 by davej Link to comment Share on other sites More sharing options...
alobi Posted July 12, 2013 Author Share Posted July 12, 2013 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 More sharing options...
justsomeguy Posted July 12, 2013 Share Posted July 12, 2013 There's not a syntax error on that line, it might be on the previous line. Link to comment Share on other sites More sharing options...
davej Posted July 14, 2013 Share Posted July 14, 2013 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 More sharing options...
alobi Posted July 14, 2013 Author Share Posted July 14, 2013 Thanks, this is resolved, the problem was from a previous line of code. Is there a link on the site to mark this issue resolved? AL Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now