16

So I have an input field, if it's blank, I want its value to be the words "empty", but if there is any value inputted, I want the value to be the inputted value. I want to use javascript for this, any idea how this can be done?

UPDATE: Sorry, I don't think I explained it too well. I don't mean placeholder text. I mean the captured value of it. So if it's blank, the captured val() for it should be "empty", if it's filled, the captured val() for it should be that val()

Sergio
  • 28,539
  • 11
  • 85
  • 132
Maverick
  • 1,123
  • 5
  • 16
  • 30
  • http://stackoverflow.com/questions/108207/how-do-i-make-an-html-text-box-show-a-hint-when-empty – Joe Jul 19 '11 at 19:13

6 Answers6

30

If you're using pure JS you can simply do it like:

var input = document.getElementById('myInput');

if(input.value.length == 0)
    input.value = "Empty";

Here's a demo: http://jsfiddle.net/nYtm8/

Jamie Dixon
  • 53,019
  • 19
  • 125
  • 162
  • Shortest and simplest wins:) Is it any different if instead of input.value.length == 0 , we put input.value == '' ? – Maverick Jul 19 '11 at 19:31
  • I usually find it preferable to test against numbers rather than strings but sure, you can do that too :) – Jamie Dixon Jul 19 '11 at 19:32
  • 2
    Since the `value` attribute is always a string, simply `!input.value` will be always correct, too (because only empty strings coerce to `false`). – katspaugh Jul 19 '11 at 19:42
  • @katspaugh how do you know that `value` is always a string? – ma11hew28 Aug 19 '15 at 14:55
  • @MattDiPasquale because the DOM spec says `value` is a always DOMString (which maps to JS string). See https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement – katspaugh Aug 19 '15 at 16:41
  • Thanks. And, do all the latest browsers comply? – ma11hew28 Aug 19 '15 at 22:33
  • Always use "===" when checking for equality. The "==" is causing unexpected behavior. – Henry Lynx Oct 01 '15 at 08:40
  • `==` doesn't cause unexpected behaviour. The conversation around using `===` and `==` is one of coercion. If you want to utilise the power of coercion then you'll be wanting to use `==` and it's behaviour is only unexpected if you don't know what it does. The spec is quite clear. You are right in saying that I should have used `===` here though. – Jamie Dixon Oct 01 '15 at 08:43
4

I'm guessing this is what you want...

When the form is submitted, check if the value is empty and if so, send a value = empty.

If so, you could do the following with jQuery.

$('form').submit(function(){
    var input = $('#test').val();
    if(input == ''){
         $('#test').val('empty');
    }    
});

HTML

<form> 
    <input id="test" type="text" />
</form>

http://jsfiddle.net/jasongennaro/NS6Ca/

Click your cursor in the box and then hit enter to see the form submit the value.

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
3

This can be done using HTML5's placeHolder or using JavaScript. Checkout this post.

Community
  • 1
  • 1
Varun Achar
  • 14,781
  • 7
  • 57
  • 74
2

You can set a callback function for the onSubmit event of the form and check the contents of each field. If it contains nothing you can then fill it with the string "empty":

<form name="my_form" action="validate.php" onsubmit="check()">
    <input type="text" name="text1" />
    <input type="submit" value="submit" />
</form>

and in your js:

function check() {
    if(document.forms["my_form"]["text1"].value == "")
        document.forms["my_form"]["text1"].value = "empty";
}
Daniel
  • 1,527
  • 10
  • 13
1

You can do this:

var getValue  = function (input, defaultValue) {
    return input.value || defaultValue;
};
katspaugh
  • 17,449
  • 11
  • 66
  • 103
0

I think the easiest way to solve this issue, if you only need it on 1 or 2 boxes is by using the HTML input's "onsubmit" function.

Check this out and i will explain what it does:

<input type="text" name="val" onsubmit="if(this == ''){$this.val('empty');}" />

So we have created the HTML text box, assigned it a name ("val" in this case) and then we added the onsubmit code, this code checks to see if the current input box is empty and if it is, then, upon form submit it will fill it with the words empty.

Please note, this code should also function perfectly when using the HTML "Placeholder" tag as the placeholder tag doesn't actually assign a value to the input box.

Wackyedd
  • 81
  • 1
  • 4