Jump to content
Sign in to follow this  
Macchiato

Hide Button When Input Value Is Empty

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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: hide_button_when_input_value_is_empty_2.gif Can you show me an example of a javascript that can do this?

Edited by Macchiato

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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: hide_button_when_input_value_is_empty_before.gif With script the output will look like this: hide_button_when_input_value_is_empty_1.gif Could you show me a javascript that works with this example?

Share this post


Link to post
Share on other sites
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';  }}

  • Like 1

Share this post


Link to post
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
Sign in to follow this  

×