Fill empty inputs with jQuery

Question

I'm working with PHP+MySQL. In one page I have a form with aprox. 30 inputs.

After showing the form, at the end I execute some jQuery sentences styling the form.

Well, some rows in my SQL have data empty inputs, so I show empty inputs. I want to fill the form with "------" without writing that slashes into DB because makes SQL much bigger.

I'm trying "replaceWith", but i dont know if this implementation with "empty" is correct. This does not work, even without .is(:empty)

<script>
    $('#form').find('input[type=text]').is(':empty').replaceWith(function()
       {
        return this.val('------');
       });
</script>

I would suggest doing this server-side instead. You can simply format the output before returning it with a simple IF without touching the DB, like if(is_null(field)) {field = "----";} — BReal14, Aug 27 '14 at 14:30
@JaredEitnier fixed! Sorry, i had not that written in my file :) — Alex Deiwor, Aug 27 '14 at 15:19

score 3 · Answer 1 · answered Aug 27 '14 at 14:30

3

jQuery's :empty finds elements with no children, not elements without a value, and as an input can't have children it finds nothing.

And jQuery's is() returns a boolean, not a collection.

jQuery's replaceWith replaces the entire element, not just the value.

Check the value instead.

$('#form input[type=text]').val(function(_, val) {
    return val.length === 0 ? '------' : val;
});

or

$('#form input[type=text]').filter(function() {
    return this.value.length === 0;
}).val('------');

Throw in a $.trim to trim off whitespace if needed

answered Aug 27 '14 at 14:30

adeneo

312,895
29
395
388

Wow, thank you. Obviusly I misunderstood the function of empty. Unluckily that two options is not working. I gonna try with $('#form').find('input[type=text]') – Alex Deiwor Aug 27 '14 at 15:23
It's not just jQuery's `:empty`, it's the way that CSS selector is supposed to work. – SeinopSys Aug 27 '14 at 15:27

score 2 · Accepted Answer · edited Aug 27 '14 at 14:54

2

Use something like this:

<script>
    $('#form').find('input[type=text]').each(function(e){
        if($(this).val()=="") $(this).val("---");
    })       
</script>

edited Aug 27 '14 at 14:54

arserbin3

6,010
8
36
52

answered Aug 27 '14 at 14:37

RN Kushwaha

2,081
3
29
40

That works! as @adeneo write, I need to use .trim to trim off the whitespaces. Thankyou !!!! – Alex Deiwor Aug 27 '14 at 15:30

score 1 · Answer 3 · edited May 23 '17 at 12:27

Have you considered using the HTML placeholder attribute?

You could use placeholder to make the dashes appear in light grey text without actually changing the value of the input. They would automatically be added to any blank fields on your page:

<input type="text" placeholder="----" value="asdf" name="notempty"
    title="This has a placeholder, but doesn't show it because the input is filled with something" />
<input type="text" placeholder="----" value="" name="empty"
    title="This is empty, so it shows the dashes" />

The placeholder text would not be included in your $_POST data. In this example, $_POST['empty'] would be blank.

The placeholder attribute is supported by many of the modern browsers, but not IE9:

http://caniuse.com/#feat=input-placeholder

There are various jQuery plugins that imitate this effect as well. You can read about a few of them here:

How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

That it is a really good option but I could not use that because after adding the slashes I use other Jquery sentence to convert this inputs to plain text, so if there is no text written in the input, the conversion makes it dissapear — Alex Deiwor, Aug 27 '14 at 15:28

Fill empty inputs with jQuery

3 Answers3