Jump to content

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?

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.

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
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.

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?

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
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...
×
×
  • Create New...