Macchiato Posted September 5, 2012 Share Posted September 5, 2012 I'd like to hide the corresponding button when an input value is empty or has a value="n/a". In the following example, the input box "first_field" is corresponding with the button "first_button", and the input box "second_field" with the button "second_button", and so on... In this case the second and fifth button will be hidden: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hide Button When Input Value Is Empty</title></head><body> <div> <form action=""> <fieldset> <input type="text" id="first_field" value="1"/> <input type="text" id="second_field" value=""/> <input type="text" id="third_field" value="3"/> <input type="text" id="fourth_field" value="4"/> <input type="text" id="fifth_field" value="n/a"/> <input type="text" id="sixth_field" value="5"/> </fieldset> </form> </div> <div> <form action=""> <fieldset> <div id="first_button"><input type="button" value="First Button"/></div> <div id="second_button"><input type="button" value="Second Button"/></div> <div id="third_button"><input type="button" value="Third Button"/></div> <div id="fourth_button"><input type="button" value="Fourth Button"/></div> <div id="fifth_button"><input type="button" value="Fifth Button"/></div> <div id="sixth_button"><input type="button" value="Sixth Button"/></div> </fieldset> </form> </div></body></html> Anyone know a Javascript that can do this? Link to comment Share on other sites More sharing options...
Ingolme Posted September 5, 2012 Share Posted September 5, 2012 Hiding elements can be done setting their style: // Hide elementelement.style.display = "none";// Show elementelement.style.display = ""; Finding the value of a text field is just getting the value property of the element. // Store the value of the text field in a variablevar val = element.value; All that's missing is to compare the value to "" or "n/a". When this happens depends on the event you used to call the function that hides the element. You can use the keydown event for immediate calls, or use the onchange event to only call the function when the user removes focus from the field. Link to comment Share on other sites More sharing options...
Macchiato Posted September 5, 2012 Author Share Posted September 5, 2012 (edited) The script must be run when the page is loaded. The content of the fields cannot be changed, so instead use this html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hide Button When Input Value Is Empty</title></head><body> <div> <form action=""> <fieldset> <input type="text" disabled="disabled" id="first_field" value="1"/> <input type="text" disabled="disabled" id="second_field" value=""/> <input type="text" disabled="disabled" id="third_field" value="3"/> <input type="text" disabled="disabled" id="fourth_field" value="4"/> <input type="text" disabled="disabled" id="fifth_field" value="n/a"/> <input type="text" disabled="disabled" id="sixth_field" value="5"/> </fieldset> </form> </div> <div> <form action=""> <fieldset> <div id="first_button"><input type="button" value="First Button"/></div> <div id="second_button"><input type="button" value="Second Button"/></div> <div id="third_button"><input type="button" value="Third Button"/></div> <div id="fourth_button"><input type="button" value="Fourth Button"/></div> <div id="fifth_button"><input type="button" value="Fifth Button"/></div> <div id="sixth_button"><input type="button" value="Sixth Button"/></div> </fieldset> </form> </div></body></html> The output will look something like this: Can you show me an example of a javascript that can do this? Edited September 5, 2012 by Macchiato Link to comment Share on other sites More sharing options...
justsomeguy Posted September 5, 2012 Share Posted September 5, 2012 It will be better to use numeric IDs so that you can loop through them, and give the buttons IDs also. e.g.: <form action=""> <fieldset> <input type="text" disabled="disabled" id="field_1" value="1"/> <input type="text" disabled="disabled" id="field_2" value=""/> <input type="text" disabled="disabled" id="field_3" value="3"/> </fieldset> </form> </div> <div> <form action=""> <fieldset> <div id="button_1"><input type="button" value="First Button"/></div> <div id="button_2"><input type="button" value="Second Button"/></div> <div id="button_3"><input type="button" value="Third Button"/></div> </fieldset> </form> In your onload code you would use a for loop to loop however many times you need to for each field and button pair. The for loop would add an event handler to each field to check the value of it whenever you want to, like on blur, on keypress, whatever. In the event handler you'll need to get the ID of the current field and get the number at the end of it, then you can target the div with the same number in the ID to hide or show it. Link to comment Share on other sites More sharing options...
Macchiato Posted September 6, 2012 Author Share Posted September 6, 2012 In this example you cannot change the properties of the input element with type="text". I've changed the html code to make the intention more clear: <div> <form action=""> <fieldset> <input type="text" name="boat" id="boat" disabled="disabled" value="n/a"> <input type="text" name="car" id="car" disabled="disabled" value="2"> <input type="text" name="dog" id="dog" disabled="disabled" value=""> </fieldset> </form></div> <div> <div id="button_boat"><input type="button" value="Boat"/></div> <div id="button_car"><input type="button" value="Car"/></div> <div id="button_dog"><input type="button" value="Dog"/></div></div> Without script the output will look like this: With script the output will look like this: Could you show me a javascript that works with this example? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 6, 2012 Share Posted September 6, 2012 var id, i, inputs = document.getElementsByTagName('input');for (i = 0; i < inputs.length; i++){ if (inputs[i].type == 'text' && (inputs[i].value == '' || inputs[i].value == 'n/a')) { document.getElementById('button_' + inputs[i].id).style.display = 'none'; }} 1 Link to comment Share on other sites More sharing options...
Macchiato Posted September 7, 2012 Author Share Posted September 7, 2012 Works like a charm, thanks Justsomeguy! 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